Setting Up a Local Web Server using Node.js

Setting Up a Local Web Server using Node.js

When you're working on a site or app, there will be times when you need to test files as if they were being served from a remote web server, similar to how they are when you browse the web normally.

If you don't have your own server, or just want to test files locally, you can set up a local web server on your computer to simulate to do the job, and this tutorial is here to teach you how.

Install Node and NPM

To run our local web server, we will be using Node.js, a JavaScript runtime.

  1. Visit the official Node.js website to get the installer.
  2. After it downloads, run the installer until the end.
  3. Restart your computer to ensure the changes can take effect.
The Node.js installer.
The Node.js installer.

The Node.js installer should have also installed NPM for you. To confirm that you have installed both properly, you'll need to open Windows Command Prompt if you're on Windows, or Terminal if you're on Mac or Linux.

To check if you installed node:

	
    node -v
	

To check if you installed NPM:

	
    npm
	

If both of these commands return a version number, you're good to go.

Install http-server

Now that we have Node and NPM installed, we can move forward and install the Node module called http-server, which is a simple zero-configuration http server that serves up static files.

	
    npm install http-server -g
	

This command will install it on your computer globally so you can use it anywhere.

Therefore, after you have navigated to your folder via the command line, start the server using this command:

	
    http-server -o
	

If successful, you should see something similar to this:

	
    http-server -o
    Starting up http-server, serving ./
    Available on:
        http://192.168.1.8:8080
        http://127.0.0.1:8080
    Hit CTRL-C to stop the server
	

Upon seeing this, a browser window should have opened for you automatically, but if not, you can manually head to http://127.0.0.1:8080 to see the folder that you used the command on being served up to you!

If you learned from this tutorial, sharing it would mean a lot! 😊 Also, don't miss out on future content by subscribing to our newsletter!