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

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

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

  1. 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

  2. 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

  3. 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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s