DEV Community

Cover image for Got a simple webpage you want to host on localhost?
Nick Raphael
Nick Raphael

Posted on

Got a simple webpage you want to host on localhost?

I recently found myself with an index.html page and assets folder. Now I could simply load index.html directly in a browser by file...

file:///C:/index.html
Enter fullscreen mode Exit fullscreen mode

However, I wanted to host it locally on localhost since that's a better representation of how it would live in production. Turns out it's super easy - barely an inconvenience. I'm going to assume you have the npm package manager installed that comes with node.

Open your prefered command line and navigate to the index.html folder.

npm init
Enter fullscreen mode Exit fullscreen mode

This will take you through a little setup wizard where you'll be asked to provide basic information about your project. Name, Author, Description etc. Once complete you will see it has created a package.json file.

Next we will ask npm to include lite-server in our project. Lite-server is a nice little webserver that is perfect for our needs.

npm install lite-server --save-dev
Enter fullscreen mode Exit fullscreen mode

https://www.npmjs.com/package/lite-server
Lite-server is a Lightweight development only node server that serves a web app, opens it in the browser, refreshes when html or javascript change, injects CSS changes using sockets, and has a fallback page when a route is not found.

The last step is to open package.json and add the following to scripts...

"start": "lite-server"
Enter fullscreen mode Exit fullscreen mode

That's it! All we do now is launch our webpage with...

npm start
Enter fullscreen mode Exit fullscreen mode

You will see your browser automatically open at index.html. What's more, any edits to your webpage will automatically trigger a page refresh. Nice.

Top comments (1)

Collapse
 
ianbonaparte profile image
Ian Bonaparte

Super simple guide, easy to recommend. Thanks for sharing this (4 years later but still useful!)