Express.js Routing Tutorial

Before jumping into routing, let's cover some basics. Make sure Node.js is installed on your machine. Then, set up your Express application.

  1. Initialize your project:

    mkdir express-routing-tutorial
    cd express-routing-tutorial
    npm init -y
    

    This creates a new folder and a package.json file.

  2. Install Express.js:

    npm install express
    
  3. Create your entry file:

    Make a file named app.js. This will be the main script for your app.

Setting Up Your First Route

A route defines a URL pattern and sets what happens when the app gets requests to that URL. Let's create a simple route in Express.

  1. Basic Express server setup:

    Open app.js and add:

    const express = require('express');
    const app = express();
    const port = 3000;
    
    app.listen(port, () => {
      console.log(`Server is running on http://localhost:${port}`);
    });
    
    • require('express'): Loads the express module.
    • express(): Initializes a new Express application.
    • app.listen(port, callback): Tells your app to listen for connections on the specified port.
  2. Define a simple route:

    app.get('/', (req, res) => {
      res.send('Hello World!');
    });
    
    • app.get(path, callback): Defines a route for GET requests to the specified path.
    • req: Represents the HTTP request.
    • res: Represents the HTTP response.
    • res.send(data): Sends a response to the client.

Understanding Route Methods

Express supports multiple HTTP methods, including GET, POST, PUT, DELETE, etc. Let's add more routes to see this in action.

  1. Add a POST route:

    app.post('/submit', (req, res) => {
      res.send('Received a POST request');
    });
    

    Here, /submit handles POST requests, often used for form submissions.

  2. Add a PUT route:

    app.put('/update', (req, res) => {
      res.send('Received a PUT request');
    });
    

    Use PUT when you need to update existing resources.

  3. Add a DELETE route:

    app.delete('/delete', (req, res) => {
      res.send('Received a DELETE request');
    });
    

    DELETE is used for removing resources.

Route Parameters and Query Strings

Sometimes you need variable paths. Express allows dynamic routing through route parameters and query strings.

  1. Route parameters:

    app.get('/user/:id', (req, res) => {
      res.send(`User ID: ${req.params.id}`);
    });
    
    • /user/:id: :id is a placeholder. Express captures this as req.params.id.
  2. Query strings:

    app.get('/search', (req, res) => {
      res.send(`Search for: ${req.query.q}`);
    });
    
    • req.query: Access query string parameters. If you visit /search?q=node, it returns "Search for: node".

Middleware in Routing

Middleware are functions executed during the lifecycle of a request. They're like pit stops in a race—places to modify requests and responses.

Example middleware:

app.use((req, res, next) => {
  console.log('Time:', Date.now());
  next();
});
  • app.use(callback): Registers middleware.
  • next(): Passes control to the next middleware. Without this, the request hangs.

Grouping Routes with Routers

As your app grows, keeping routes organized becomes essential. Express provides Router to handle this.

Create a router for user-related routes:

  1. Set up the router:

    const userRouter = express.Router();
    
    userRouter.get('/', (req, res) => {
      res.send('User List');
    });
    
    userRouter.get('/:id', (req, res) => {
      res.send(`User ID: ${req.params.id}`);
    });
    
    app.use('/users', userRouter);
    
    • express.Router(): Creates a new router.
    • app.use('/path', router): Mounts the router.
Previous Post Next Post

Welcome, New Friend!

We're excited to have you here for the first time!

Enjoy your colorful journey with us!

Welcome Back!

Great to see you Again

If you like the content share to help someone

Thanks

Contact Form