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 along 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!

When opening the web server on port 8000, the text Cannot GET/ is displayed
- why?
  - Because the Router hasn't been set up yet!

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

It is good coding practice to write router code and server code in separate files!

Create a router folder
Create 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 allows the router code to be imported and used as a module in server.js since it was written separately~!

5. Render HTML page

Create a views directory
Create html files

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>

Modify server.js

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

// Import the router module main.js and pass app to it
var router = require('./router/main')(app);

// Define the location of HTML so the server can read it
app.set('views',__dirname + '/views');

// Set the server to use the EJS engine when rendering HTML
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

.js, css, image files used in HTML
To handle Static files on the Server, use the express.static() method!

Create a public directory
Create a css directory
Create .css files

public > css > style.css

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

Modify server.js

// Set the public directory as the static folder
app.use(express.static('public'));

Add CSS link to html files

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

result

127.0.0.1:8000/

127.0.0.1:8000/about

PreviousExpress.js NextEJS

Last updated 5 days ago

hashtagWhat is Express.js?

hashtagCore Features

hashtagInstallation

hashtag1. Installing Express Locally

hashtag2. Installing Express in the Project

hashtagDirectory structure

hashtag1. create package.json

hashtag2. Install dependency by using npm

hashtag3. Create Express server

hashtag4. Basic Routing

hashtag5. Router

hashtag5. Render HTML page

hashtagHandling Static Files

hashtagStatic Files

hashtagresult

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