You have 2 free member-only stories left this month.

Sign up for Medium and get an extra one

Create a Single Page Website using Node.js and

Express.js
Ankit Maheshwari Follow
Apr 4 · 4 min read

To build a Website in Node.js we will use Express.js framework. Any other framework
can also be used but Express.js 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.
New Angular project with one page website and Live server with
Firebase Hosting.
medium.com
 Create a CRUD Rest API with Node and Express.js
To build APIs in Node.js we will use Express.js framework. Any other
framework can also be used but Express.js is very…
medium.com

Everything you need to know about Angular

framework/TypeScript.
Complete Angular Series — What is Angular/TypeScript? | Why do we
need Angular? | Benefits of using Angular? |…
medium.com

A note from JavaScript In Plain English: We are always interested in helping to

promote quality content. If you have an article that you would like to submit to
JavaScript In Plain English, send us an email at
[email protected] with your Medium username and we will get
you added as a writer.

JavaScript Nodejs Expressjs Website Programming

About Help Legal

Get the Medium app