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
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
fileRun 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…