Express.js Tutorial
Tags: tutorial, express, node, webdev
Published: 2024-01-26 12:06:48

Node.js is a runtime environment for running Javascript on servers(outside browsers).

**Express.js** is a Node.js web framework for building APIs and web applications using JavaScript.

## 1. Now see the following code:

```
const express = require('express');
const app = express();
```

- Here, we are using the `require` function to import the Express.js framework for using it in our application.
- In the following line of code, we execute `express()`. This creates an instance of the Express application and stores it in the `app` variable. This variable can be used to define the routes, middleware, and other components of your web application.

## 2. Routing and HTTP Methods

Web frameworks provide resources such as HTML pages, scripts, images, etc. at different routes.

**2.1. Define Routes**

The following function is used to define routes in an Express application −
`app.method(path, handler)`

- This METHOD can be applied to any one of the HTTP verbs – get, set, put, delete.
- Path is the route at which the request will run.
- Handler is a callback function that executes when a matching request type is found on the relevant route.

**2.2. HTTP Methods**

```
app.get('/',(req,res)=>{ 
  console.log("Hello World");
})
```

-The `get` method is used to send a request to the server to retrieve data.

- In addition, there are other fundamental methods such as POST, PUT and DELETE.

- In this second line, we are printing Hello World.

## 3. Middleware

- "A middleware is a function that sits between the request (req) and response (res) objects in an application's processing pipeline."

- Middleware functions are functions that have access to the request object (req), the response object (res), and the next function in the application’s request-response cycle.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wgluvegp8mg13fybkvd9.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lxyj7cslaunz8an38ycx.png)

- Middleware functions are executed in the order they are declared in the application. Each middleware function has access to the next function, which is used to pass control to the next middleware in the stack.

```
app.use((req, res, next) => {
  console.log('This middleware runs first');
  next();
});

const myMiddleware = (req, res, next) => {
  console.log('This is a custom middleware');
  next(); // Call the next middleware in the stack
};

app.use(myMiddleware);
```

## 4. Dynamic Routing
```
const express = require('express');
const app = express();

app.get('/:username',(req,res)=>{ 
  res.send(`Welcome ${req.params.username}`);
})

app.listen(5000);
```

- We are displaying the request we sent as a query.
- To receive a response from the server on the window, the `send` method is used.
- The code `app.listen(5000)` indicates that it is being executed on port number 5000.


## 5. Template Engine

HTML is not equipped to perform calculations or JavaScript operations. In the backend, web developers do not use HTML directly. Instead, they use template engines such as Ejs, Pug, and others to create HTML templates. These template engines are often used to create dynamic web pages.

**5.1. EJS**

Embedded JavaScript templating is a simple templating language that lets you generate HTML markup with plain JavaScript.

- Install EJS

```
npm i ejs
```

- Configure EJS

```
app.set("view engine",""ejs")
```

- To proceed, please create a folder named 'views' and then create ejs files inside it.

- Instead of using the `send` method, we use the `render` method to automatically locate the ejs file (within the views folder).

- To use JavaScript inside Embedded JavaScript (EJS), we can simply declare it within `<%- -%>` tags.

- When passing values to ejs, always declare them as `<%= value %>`.

**5.2. EJS use case**

- We will create a 'views' folder and create two ejs files inside it.

- The first file is named header.ejs:

```
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Document</title>
</head>

<body>
    <h1>Welcome <%=user.name %>
    </h1>
```

- The second file is named hello.ejs:

```
<%- include('header'); -%> //here we are rendering header file inside another ejs file which is possible.
    <h2>Email : <%=user.email %></h2>
    <h3>Age : <%=user.age %></h3>
    <ul>
        <% user.skills.forEach((items)=>{ %>
            <li><%=items %></li>
        <% }) %>
    </ul>
</body>
</html>
```

- In our JavaScript file, we will use the EJS file to display/render the content.

```
const express = require('express');
const app = express();

app.set('view engine','ejs');
app.get('/hello',(req,res)=>{
    const user = {
        name: 'abcde',
        email: 'abc@xyz.in',
        age: 20,
        skills: ['html','css','Js','React','Nodejs']
    }
    res.render('hello',{user});  
});

app.listen(5080);

```

The `render` method sends a user object to the `hello.ejs` file and then renders it.


## 6. Static Files

- Static files, such as images, JavaScript, and stylesheets, are used in web applications.

- We will create a 'public' folder containing three subfolders named images, javascripts, and stylesheets.

- Now, we will use this code in our file to make use of static files:

```
app.use(express.static('./public'))
```
- Now we no longer need to specify the full address of a static file to use it. For example, if we want to use a CSS file, we only need to provide the link as `./stylesheets/style.css` instead of `./public/stylesheets/style.css`.

## 7. Error Handling

Error Handling refers to how Express catches and processes errors that occur both synchronously and asynchronously.

Now declare this after the last route declared:

```
app.use(function errorHandler (err, req, res, next) {
  if (res.headersSent) {
    return next(err)
  }
  res.status(500)
  res.render('error', { error: err })
})
```
- We are storing the error message, referred to as `err`, in a variable called `error`. This variable is then sent to the route named `./error`. 

```
app.get('/error', (req, res, next) => {
  throw new Error('BROKEN')
})
```
- We are storing the word 'BROKEN' in the '`error`' variable.
-Whatever ejs view we set to the `./error` route can display this text using <%= error %> tag.


## 8. Express Generator

Use the application generator tool, express-generator, to quickly create an application skeleton.
To install it:
```
 npm install -g express-generator
```
After installation, we need to create an Express application:
```
express myapp --view=ejs
npm i
```

After executing the command in the terminal, the entire structure that we previously had to create manually is now generated automatically, and two new folders named "routes" and "bin" are also created.
Instead of using `app.get()`, we will now use `route.get()` to handle our routing.

To run the application:
```
npm start
```
**or**
```
npm nodemon
```

**nodemon** is a package that eliminates the need to manually save and reload code, making programming more efficient.

## 9. Sessions and Cookies

Sessions are data that are stored on the server while Cookies are data that are stored on the client side.

**9.1. Sessions**

- Sessions are more secure than cookies as it is saved on the server side.

- To proceed with the task, we must first install 'express-session' and then add it to the 'app.js' file.

Then do the following coding:

```
app.use(expressSession({
resave: false,
saveUninitialized: false,
secret: "rndomxxxx"
}))
```

- The term "resave" refers to the action of not saving the session if there have been no changes in the values.

- `saveUninitialized` means don't save the data which is not defined.

- `secret` is the encryption string. 

```
app.get("/",function (req,res){
req.session.ban= true;
res.render("index")
})

app.get("/removeban",function (req,res){
req.session.ban= false;
res.send("ban remmoved")
})
```

- We are setting the value of a variable to "true" but for route"/". The variable can be named anything.

```
app.get("/checkban",function (req,res){
console.log(req.session)
})
```

- To delete any session manually we will need to write `req.session.destroy`.

**Note: **The sessions are automatically deleted upon restarting.


**9.2. Cookies**

- To proceed with the task, we must first install 'cookie-parse' and then add it to the 'app.js' file.

Then add this to the app.js:

```
app.use(cookieParser())
```

- Create a Cookie:

```
app.get("/",function (req,res){
res,cookie("age",25);
res.render("index")
})

```

We are setting the value of a variable named age to "25" but for route"/". The variable can be named anything.

- Reading Cookies:
```
app.get("/read",function (req,res){
console.log(req.cookies);
res.send("check")
})
```
To get specific cookie, we will use `req.cookies.age`.

- Delete a Cookie:
```
app.get("/clear",function (req,res){
res.clearCookie("age");
res.send("cleared")
})
```

## 10. Connect-Flash

- We will be using a package called `connect-flash` to flash messages.
- This package enables data transfer between routes using sessions, without which it will not function.

```
const flash = require("connect-flash")

app.use(expressSession({
resave: false,
saveUninitialized: false,
secret: "rndomxxxx"
}))
app.use(flash())
```
We can now utilize the flash.

```
app.get("/pass",function (req,res){
req.flash("age",17);
req.flash("name","ABC");
res.send("created")
})

app.get("/check",function (req,res){
console.log(req.flash("age"),req.flash("name"))
})
```

##