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
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
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
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"
That's it! All we do now is launch our webpage with...
npm start
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)
Super simple guide, easy to recommend. Thanks for sharing this (4 years later but still useful!)