Express Basics

What is Express.js?

: Express is a minimal and flexible Node.js web application framework that provides a robust set of features to develop web and mobile applications.

Core Features

Allows to set up middlewares to respond to HTTP Requests
Defines a routing table which is used to perform different actions based on HTTP Method and URL
Allows to dynamically render HTML Pages based on passing arguments to templates

Installation

1. Installing Express Locally

Install express

npm install express --save

saves the installation locally in the node_modules
create a directory express inside node_modules

Express version check

$ npm view express version
4.17.1

Install modules alog with express

npm install body-parser --save
npm install cookie-parser --save
npm install multer --save

2. Installing Express in the Project

Directory structure

express_tutorial/
├── package.json
├── public
│   └── css
│   └── style.css
├── router
│   └── main.js
├── server.js
└── views
 ├── about.html
 └── index.html

1. create package.json

{
  "name": "express-tutorial",
  "version": "1.0.0",
  "dependencies": 
  {
    "express": "~4.13.1",
    "ejs": "~2.4.1"    
  }
}

2. Install dependency by using `npm`

npm install

3. Create `Express` server

server.js

var express = require('express');
var app = express()
var server = app.listen(8000, function(){
    console.log("Express server running on port 8000!")
})

result

$ node server.js
Express server running on port 8000!

port 8000 으로 web server 열어서 들어가면 Cannot GET/ 이라는 text 출력됨
- why?
  - Router를 아직 정리하지 않아서!

4. Basic Routing

server.js

var express = require('express');
var app = express()
var server = app.listen(8000, function(){
    console.log("Express server running on port 8000!")
})

app.get('/', function(request, response){
    response.send('Hello World')
})

5. Router

router code와 server code는 다른 파일에 작성하는 것이 좋은 코딩 습관!

router folder 만들기
main.js 생성

router > main.js

module.exports = function(app){

    app.get('/', function(request, response){
        response.render('index.html')
    });

    app.get('/about', function(request, response){
        response.render('about.html')
    });
}

module.exports는 router code를 따로 작성했기 때문에 server.js에서 module로서 불러와서 사용 가능~!

5. Render HTML page

views directory 만들기
html file들 만들기

views > index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index</title>
</head>
<body>

<p>This is index page!</p>
</body>
</html>

views > about.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>About</title>
</head>
<body>
    <p>About... what?</p>
</body>
</html>

server.js 수정하기

var express = require('express');
var app = express();

// router module인 main.js를 불러와서 app에 전달하긔
var router = require('./router/main')(app);

// server가 읽을 수 있도록 HTML의 위치를 정의해주긔
app.set('views',__dirname + '/views');

// server가 HTML rendering을 할 때 EJS engine 사용하도록 설정하긔
app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);

var server = app.listen(8000, function(){
    console.log("Express server has started on port 8000!!")
})

Handling Static Files

Static Files

HTML에서 사용되는 .js, css, image file들
Server에서 Static files을 다루기 위해선 express.static() method를 사용하면 된다!

public directory 만들기
css directory 만들기
.css file들 만들기

public > css > style.css

body {
    background-color: black;
    color: white;
}

server.js 수정하기

// public directory를 static folder로 설정
app.use(express.static('public'));

html file들에 css 링크 추가하기

<link rel="stylesheet" href="css/style.css">

result

127.0.0.1:8000/

127.0.0.1:8000/about

PreviousExpress.js NextEJS

Last updated 1 year ago

Was this helpful?

What is Express.js?

Core Features

Installation

1. Installing Express Locally

2. Installing Express in the Project

Directory structure

1. create package.json

2. Install dependency by using npm

3. Create Express server

4. Basic Routing

5. Router

5. Render HTML page

Handling Static Files

Static Files

result

2. Install dependency by using `npm`

3. Create `Express` server