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 [Link] and

[Link]
Ankit Maheshwari Follow
Apr 4 · 4 min read

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

What to cover in this Article:

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

#1) Installation Required

[Link] Or NPM (Node Package Manager)

VS Code (Optional) — A code editor.

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

Otherwise go to these links and install:

→ Click here to download and install [Link] (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
[Link] 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 [Link] with [Link])

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:
→ [Link] file.
→ [Link] file.

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

→ node-ex-website/express/[Link] file.

Open up and update your node-ex-website/[Link] file with below code:

{
"name": "node-ex-website",
"version": "1.0.0",
"description": "",
"scripts": {
"start": "node [Link]"
},
"dependencies": {
"express": "^4.17.1"
}
}

Open up and update your node-ex-website/[Link] file with below code:

const http = require('http');

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

const app = express();

[Link]([Link]());
[Link]([Link]("express"));

// default URL for website

[Link]('/', function(req,res){
[Link]([Link](__dirname+'/express/[Link]'));
//__dirname : It will resolve to your project folder.
});

const server = [Link](app);

const port = 3000;
[Link](port);

[Link]('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 "[Link]" 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 ([Link])
Replace your → node-ex-website/express/[Link] 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/[Link] 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 [Link] and

[Link]
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:
[Link]

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.
[Link]
 Create a CRUD Rest API with Node and [Link]
To build APIs in [Link] we will use [Link] framework. Any other
framework can also be used but [Link] is very…
[Link]

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? |…
[Link]

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
submissions@[Link] 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