Quickly setup a Web Server with hot-reload for prototyping

Often there are times while developing web applications, wherein you have to try out certain things before including it into the main project. You may want to try out a new JS library for notifications, or you may want to try out a new CSS framework.

Usually, in such situations, web developers/ designers create a simple temporary HTML file, include libraries and run it on a browser. But sometimes just double-clicking and opening the file using filesystem doesn’t work, an example would be if your file is making an XHR request. In such cases, a web-server is required to set up and run the HTML document. And I know it from experience, setting up web-server just for a simple test or prototype can be annoying, coz why to put time into that when we won’t be using it.

During my initial days, I used to set up an express server(since I’m also a Node.js developer) and serve my static files and I always thought it to be a waste of time. Sometimes I would use something like Xamp, but then I had to place the file in the right place.

This was until I came across lite-server. lite-server is lightweight web server built on Node.js. It’s dead simple to set-up and get’s the job done. It’s an ideal for prototyping and Proof of Concepts. What’s more, it by defaults watches your files for changes and triggers reload, aka. Hot Reload.

Setting up Lite Server

Setting it up is quite simple. If you usually do not use Node.js then you will have to install Node.js on your machine. You can Node.js from the official website.

Once Node is installed you can verify the installation by running $ node -v on the terminal.

Create a folder for the application you are prototyping. Place your HTML files within it. Now using your terminal navigate into the directory you just created. Run…

npm init --yes

This will initialize our Node project and create a package.json file for us. Now install lite-server.

npm install lite-server --save-dev

This will install lite-server locally and save it as a developer dependency.

Now open up your package.json and add “dev”: “lite-server” under scripts.

Now to spin up our dev server we just have to run.

npm run dev

This will start the lite-server by default on port 3000. By default lite-server will server the files from the directory from where you ran the command. Hurray, you have got your prototyping server setup. Now whenever you change anything in the file, lite-server will automatically reload your browser.