Local web server for testing / development using Node.js and http-server

chrisbitting, , , ,

localhost8080If you’re developing html / javascript applications and want to test locally, many times you will go beyond what local file access (file:///C:/…) in browsers will allow (like XMLHttpRequests, json calls, cross domain access and Access-Control-Allow-Origin restrictions).

A simple solution instead of deploying your code to apache or IIS is to install a local http server. http-server for Node.js is a fast, easy install and app that will allow you to use any directory as a http://localhost.

Installing this simple http server only takes a few steps:

  1. Install node.js if you don’t already have installed (from http://nodejs.org)
  2. In a command prompt / terminal, now run: 
    npm install http-server -g

    (this installs http-server globally so you can access from any folder or directory)

  3. Now using command prompt or terminal, browser to a folder with some html you want to serve as http. (ie: c:\someproject\).
  4. Run: 
    http-server
  5. Open your browser and visit http://localhost:8080.

 

You can change port 8080 (the default) to anything using “-p”, so http-server -p 8088 would change your local site to http://localhost:8088

Run http-server –help to see the other options available for running.

Local web server for testing / development using Node.js and http-server

12 thoughts on “Local web server for testing / development using Node.js and http-server”

  3. Worth to mention the other options availables, also if you pass a directory as argument so that will be root of the web server.

    Available Options:

    -p Port to listen for connections on (defaults to 8080)

    -a Address to bind to (defaults to ‘0.0.0.0’)

    -d Show directory listings (defaults to ‘True’)

    -i Display autoIndex (defaults to ‘True’)

    -e or –ext Default file extension (defaults to ‘html’)

    -s or –silent In silent mode, log messages aren’t logged to the console.

    -h or –help Displays a list of commands and exits.

    -c Set cache time (in seconds) for cache-control max-age header, e.g. -c10 for 10 seconds. To disable caching, use -c-1.

    Like

    Reply

  4. I tried this and still wasn’t able to utilize XMLHttpRequests, I’m getting the same “No ‘Access-Control-Allow-Origin’ header is present” error that I got before when using local file access.

    Like

    Reply
  6. patti says:

    This is an awesome tutorial. Just what I needed to do a react tutorial. It used jsbin but I wanted to do it locally. Thank you for this article.

    Like

    Reply
  9. uder says:

    Great, now add explanation for people how to replace “npm install http-server -g” on a windows machine that’s NOT connected to the net?

    P.S. The use of internet is only available for downloading files, no installation is possible on the machine that have internet. NPM is great as long as you have admin rights on the machine, but useles otherwise and no one is providing instructions how to overcome this …

    Liked by 1 person

    Reply

    1. A Windows web dev box that isn’t connected to the net and you don’t have admin rights for? I hope you’re working on some top secret government project (in a cool top secret facility). If not, why do that to yourself?

      In any case, checkout https://github.com/arei/npmbox. “This lets you create a “box” of an installable package and move it to an offline system that will only install from that box.”

      Like

      Reply

Leave a comment