DEV Community

Cover image for Node.js with Routing
zenixtech
zenixtech

Posted on

Node.js with Routing

This program creates a simple HTTP server using Node.js that serves different content based on the URL requested.

Key Features:
Responds with a plain text message for the / route.
Serves an Home.html file when the /Home.html URL is accessed.

Commands
1) npm init
2) npm install nodemon

Create file index.js After that looks like this:
index.js

var http = require("http");
var fs = require("fs");
var path = require("path");
var port = 1515;

var app = http.createServer(function (req, res) {
  const url = req.url;

  if (url === "/Home.html" || url === "/") {
    const filePath = path.join(__dirname, "Home.html");

    fs.readFile(filePath, function (err, data) {
      if (err) {
        res.writeHead(404, { "Content-Type": "text/plain" });
        res.write("404 Not Found");
        res.end();
      } else {
        res.writeHead(200, { "Content-Type": "text/html" });
        res.write(data);
        res.end();
      }
    });
  } else {
    res.writeHead(200, { "Content-Type": "text/plain" });
    res.write("This is Routing Server in Node JS..!");
    res.end();
  }
});

app.listen(port, () => {
  console.log("Your server is started on ", port);
});

Enter fullscreen mode Exit fullscreen mode

Home.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>This File Run By Node JS</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
      <div class="container-fluid">
        <a class="navbar-brand" href="javascript:void(0)">Node Js</a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#mynavbar"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="mynavbar">
          <ul class="navbar-nav me-auto">
            <li class="nav-item">
              <a class="nav-link" href="javascript:void(0)">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="javascript:void(0)">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="javascript:void(0)">Cotact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="container">
      <div class="row">
        <h1>This Is a Home Page..!</h1>
      </div>
    </div>
  </body>
</html>

Enter fullscreen mode Exit fullscreen mode

Your server will start, and your Home.html created in the folder looks like this.

Image description

Top comments (0)