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 --savesaves 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
npmnpm install
3. Create Express server
Express serverserver.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 만들기
htmlfile들 만들기
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,imagefile들Server에서
Static files을 다루기 위해선express.static()method를 사용하면 된다!
public directory 만들기
css directory 만들기
.cssfile들 만들기
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
Last updated
Was this helpful?