Building a Website with Node.js and Express.js

This article divides deep into building websites with Node.js and Express.js. Express.js is an essential framework for creating robust and scalable web applications on top of Node.js, and today's focus will be on routing, middleware, template engines, and cookie sessions.

Concept Highlights:

1. app.use(callback)
2. app.use(path, callback)
3. GET, POST, PUT, DELETE
4. Express Middleware
5. Call the Next Middleware in the Stack
6. Using Express Router
7. Cookie Session Management Middleware
8. Template Variables
9. EJS

1. app.use(callback)

The app.use(callback) method in Express.js is used to mount middleware functions. This middleware will run for every request made to your application, regardless of the HTTP method or URL.

e.g.) In this example, the middleware runs for every incoming request and logs a message to the console.

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

app.use((req, res, next) => {
  console.log('Middleware running for every request.');
  next();
});

2. app.use(path, callback)

This method allows you to mount middleware at a specific route. The middleware will only run if the request matches the specified path.

e.g.) In this example, the middleware will only be triggered for routes that start with /users.

app.use('/users', (req, res, next) => {
  console.log('Middleware only for /users route.');
  next();
});

3. GET, POST, PUT, DELETE

These methods allow you to handle specific HTTP methods (GET, POST, PUT, DELETE, etc.) at a specific route. This is where you define the behavior of your web application.

e.g.) Each method handles a different part of CRUD operations (Create, Read, Update, Delete) for user management.

app.get('/users', (req, ress) => {
  res.send('Fetching all users');
});

app.post('/users', (req, res) => {
  res.send('Creating a new user');
});

app.put('/users/:id', (req, res) => {
  res.send(`Updating user with ID: ${req.params.id}`);
});

app.delete('/users/:id', (req, res) => {
  res.send('Deleting user with ID: ${req.params.id}`);
});

4. Express Middleware

Middleware functions in Express.js have access to the request (req) and response (res) objects, and they can execute code, make modifications, or terminate the request-response cycle.

Key Features:

• Execute code: you can perform any logic or operations.
• Modify request/response: middleware can update headers, add data to req, or modify the res object.
• End request-response cycle: middleware can send data back to the client and end the cycle.

e.g.) In this example, middleware adds custom data to the request object and the route handler accesses it.

app.use((req, res, next) => {
  req.customData = 'Some custom data';
  next();
});

app.get('/', (req, res) => {
  res.send(`Data from middleware: ${req.customData}`);
});

5. Calling the Next Middleware

In the example above, I use next() to pass control to the next middleware or route handler. Without calling next(), the request would hang because the cycle wouldn't move forward.

e.g.) This ensures that each piece of middleware can pass control to the next in the chain.

app.use((req, res, next) => {
  console.log('First middleware');
  next();
});

app.use((req, res, next) => {
  console.log('Second middlware');
});

6. Using Express Router

Express Router is a great tool for organizing routes in modular applications. It helps you break down your routes into smaller, manageable pieces.

e.g.) In this example, the router is mounted at /users, and requests to /users/profile will be handled by the router's route.

const express = require('express');
const router = express.Router();

router.get('/profile', (req, res) => {
  res.send('User profile');
});

app.use('/users', router);

7. Cookie Session Management Middleware

Handling sessions and cookies is crucial for managing user authentication and state. Express.js provides middleware to manage session data.

e.g.) Using express-session, I initialize a session and set session data, which can be accessed throughout the user's session.

const session = require('express-session');

app.use(session({
  secret: 'mySecret',
  resave: false,
  saveUninitialized: true,
  cookie: { secure: false }
}));

app.get('/', (req, res) => {
  req.session.user = 'John Doe'; // set session data
  res.send('Session initialized');
});

8. Template Variables

When rendering views using template engines, you can pass variables to dynamically generate content. For example, in EJS, you can pass variables to your views for rendering.

e.g.) In this example, I pass the title and message variables to the EJS template.

app.get('/', (req, res) => {
  res.render('index', { title: 'My website', message: 'Hello world' });
});

9. EJS (Embedded JavaScript)

EJS is a popular templating engine that allows you to write HTML and embed JavaScript directly within the HTML structure. It is simple but powerful and integrates well with Express.js for dynamic web pages.

e.g.) The <%= %> syntax is used to inject JavaScript expressions into the HTML.

<!DOCTYPE html>
<html>
<head>
  <title><%= title %></title>
</head>
<body>
  <h1><%= message %></h1>
</body>
</html>