Skip to content

01_Express_Basics.md

Latest commit

 

History

History
330 lines (219 loc) · 4.93 KB

01_Express_Basics.md

File metadata and controls

330 lines (219 loc) · 4.93 KB

Express.js Basics



image-20200331092006288



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

  1. Allows to set up middlewares to respond to HTTP Requests

  2. Defines a routing table which is used to perform different actions based on HTTP Method and URL

  3. 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


image-20200403223235009

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!

  1. Create a public directory
  2. Create a css directory
  3. 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/

image-20200404155824643


127.0.0.1:8000/about

image-20200404155934497