Abhirath A

Posted on Dec 25, 2022 • Originally published at a6hi.hashnode.dev on Nov 25, 2021

How to make a web server using Node.js and Express JS

So you need to make a web server that can serve HTML in under 10 minutes, well your at the right place By the end of this article you will know how to create a web server and serve HTML Files. Without further ado, Let's Jump in!

Creating a Node.js application

First, open the folder you want to have our Node.js app in, then run:

npm init -y

The command above will create a package.json file and initialize it with some default values. If you want to fill the fields manually, remove the -y flag and follow the instructions.

Installing Express

Now that you have an initialized package.json, you now need to add Express, so to install Express run:

npm install express

Creating the server

Now that we have some HTML Files, let's create the webserver. So in the root directory of the project (where we have the package.json) create a file called index.js and import express, like this:

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

Serve on a port

To send some text on a port write:

app.listen(3000, () => {
    console.log('Application listening on port 3000!');
})
app.get('/', (req, res) => {
    res.send( 'Hello World!' );
});

then run:

node index.js

if you did this correctly, you will see a blank page with the text "Hello World!"

Creating the HTML Files

Let's switch gears to the HTML, In the root directory create a file called "public".

In the public folder, create one file named "index.html". Now write some HTML. Here is what I have:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/styles.css">
  <title>Document</title>
 <style>
body{
    color: red;
}
</style>
</head>
<body>
  <h1>Hello World!</h1>
</body>
</html>

Serving HTML

Now go back to the index.js file and first import path, like this:

const path = require('path')

now change the app.get to look like this:

app.get('/', (req, res) => {
    res.sendFile(`${__dirname}/public/index.html`);
});

Your final JS File will look like this:

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

app.listen(3000, () => {
    console.log('Application listening on port 3000!');
})
app.get('/', (req, res) => {
    res.sendFile(`${__dirname}/public/index.html`);
});

Now go to localhost:3000 and you may see something like this is you did this correctly: