Create a Single Page Website using Node.js and Express

To build a Website in Node.js we will use Express framework. Any other framework can also be used but Express is very popular when using Node.

What to cover in this Article:

#1) Installations.
#2) Create new Node.js Project with Express.js
#3) Create routes using Express.
#4) Testing — to make sure everything is working.

#1) Installation Required

• Node.js Or NPM (Node Package Manager)
• VS Code (Optional) — A code editor.

To check whether the Node.js is already installed on your computer, open your terminal or CMD and run node -v command. If you see your Node.js version means it's installed.

Otherwise go to these links and install:
→ Click here to download and install Node.js (You should choose LTS version).
→ Click here to download VS Code

Express application generator:

To quickly create an application skeleton. You may use this application generator tool (`express-generator`). The application generator uses npx command (available in Node.js newer versions).
→ Click here to know more about Express application generator.

We will not use express-generator in this article, instead we will create everything by ourself to avoid extra files generated from generator and to understand in depth.

#2) Create New Project (using Node.js with Express.js)

Create a new folder (at the place you want to keep your project).
Name that folder: node-ex-website

Create two files inside node-ex-website folder:
→ package.json file.
→ server.js file.

Create a folder (name: express) and a file inside node-ex-website/express folder:
→ node-ex-website/express/index.html file.

Open up and update your node-ex-website/package.json file with below code:

{
    "name": "node-ex-website",
    "version": "1.0.0",
    "description": "",
    "scripts": {
        "start": "node server.js"
    },
    "dependencies": {
        "express": "^4.17.1"
    }
}

Open up and update your node-ex-website/server.js file with below code:

const http = require('http');
const express = require('express');
const path = require('path');
const app = express();
app.use(express.json());
app.use(express.static("express"));
// default URL for website
app.use('/', function(req,res){
    res.sendFile(path.join(__dirname+'/express/index.html'));
    //__dirname : It will resolve to your project folder.
  });
const server = http.createServer(app);
const port = 3000;
server.listen(port);
console.debug('Server listening on port ' + port);

After creating above two files, open your terminal in the "node-ex-website" folder and run this command:

npm install

This command ↑ will install the dependencies defined in "package.json" file.
(You may use VS Code - A code editor↓).

After dependency installation this will create "node_modules" folder at the root of the "node-ex-website" folder.

Template (index.html)

Replace your → node-ex-website/express/index.html file with code below, or you may use your own template.

You may also add all your static files inside express folder like…
→node-ex-website/express/css and node-ex-website/express/js

node-ex-website/express/index.html file

Run Project

We have just created a Node-Express Project 😍 Let’s start a server.
To start a server run this command:

npm start

To test this API — Open your web browser and enter this URL → localhost:3000

Done! 🤩 It’s that simple to Create a Website using Node.js and Express.js

See you later 👋👋

Feel free to comment down in the comment box… If I missed anything or anything is incorrect or anything does not works for you :)
Stay connected for more articles.

Stay connected for more articles:
https://medium.com/@AnkitMaheshwariIn

If you wouldn’t mind giving it some claps 👏 👏 since it helped, I’d greatly appreciate it :) Help others find the article, so it can help them!

Always be clapping…

Learn More

Create a Single Page Website using Angular & Firebase Hosting.

Create a CRUD Rest API with Node and Express.js

Everything you need to know about Angular framework/TypeScript.