How to Setup Up A Local Web Server With NodeJS & ExpressJS

A local web server is a software application that runs on your computer, simulating a real web server environment but within your own machine.

In this tutorial, we will implement a Localhost server with Node.js and Express.js. To deploy a Localhost server with Node.js and Express.js, follow these steps

Step 1: Download Node
Step 2: Create A New Working Directory
Step 3: Install Express
Step 4: Set Up Your HTML
Step 5: Set Up Your Localhost Server
Step 6: Launch Your Server
Step 7: Check it out!

Step 1: Download Node

Download Node.js and follow the guided prompts until the installation is complete.

You can validate Node was successfully installed by navigating to the command line and entering the following command.

node --version

If installed correctly, you will see the version of Node returned. For example, I am currently running on V12.18.0.

Step 2: Create A New Working Directory

Before installing Express, you will want to create a new working directory.

mkdir Example-1

Next, add the two files below.

index.html
app.js

touch index.html app.js

Step 3: Install Express

Once the two files are added to your project, you are set to install Express. First, make sure you are in the working directory you just created. For my example, I would be in “Example-1”. You can check to see what directory you are currently in by entering “pwd” on your command line. Once confirming you are in the correct directory, install Express by running the command below.

npm install express

NPM (node package manager) is the default package manager for Node that hosts thousands of packages for free. NPM was automatically installed when you downloaded Node in Step 1

Step 4: Set Up Your HTML

Open the working directory you created in your code editor. Currently, I'm running on VS (Visual Studio), but that is just my preference. You can use whatever works best for you! For this example, insert a header in the body to show how the browser interacts with your server.

Type the code below into your “index.html” file.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Example-1</title>
  </head>
  <body>
    <h1>You did it!</h1>
  </body>
</html>

You may have noticed that your project now holds two new files. These files were added to your project when you installed Express and provide access to the pre-built modules and packages. Remember when I mentioned Express is a framework that allows developers to build web applications easily and quickly?

node_modules: Pre-built packages that can be used in your project

package-lock.json: Stored dependency tree

Step 5: Set Up Your Localhost Server

You are now ready to launch your localhost server!

Enter the following code into your “app.js” file.

const express = require("express");

const app = express();

app.get("/", function (req, res) {
  res.sendFile(__dirname + "/index.html");
});

app.listen(3000, function () {
  console.log("Server is running on localhost3000");
});

Step 6: Launch Your Server

You are almost there! Go to the command line and enter the following in order to launch your server:

node app.js

You will know your server is running correctly if your terminal returns the “Server is running on localhost3000” message written the “app.js” file.

console.log("Server is running on localhost3000");

Step 7: Check it out!

Finally, go to Chrome and enter “localhost:3000” in your browser. You should now see the header you wrote in the “index.html” file.

You now have a solid understanding of how to build and test your web applications on a localhost server using Node and Express.

Thanks for reading !!!

#node-js #web-service #express