If you are from Java background, you must have used / heard about Apache Tomcat server, which is a default server any Java developer works with to deal with Web app development; IIS, Apache are to name a few in addition to Apache tomcat server.

Landscape has changed, Web development evolved a lot in recent years with the JavaScript frameworks like React, Angular & Vue.

We now need a server to run the Frontend piece of Web application in development environment and at the same time it shouldn’t be huge to download and hard to set it up. Backend APIs of your Web app run on different local server like Apache Tomcat etc., or even hosted on Cloud.

All right!

lite-server is what comes to my mind when I think about lite Development server for running web application (Just the frontend piece). It was created by John Papa and it’s based on Node. It has features like browser refresh upon HTML/CSS change, opens the Web page on Multiple browsers and a lot more.

Prerequisite:

To use lite-server in your project, you need to have Node JS installed in your machine.

To begin with, I am gonna create simple HTML page.

Create new HTML file

Adding below piece of code in the file I just created for our demonstration purpose.

Code
<!DOCTYPE html>
<html>
  <head>
    <title>Let's explore lite-server</title>
  </head>
  <body>
    <h1>Welcome!</h1>
    <p>
      Lite-server is a developement only Node server. Come on, let's explore it!
    </p>
  </body>
</html>

There are two ways we can use lite-server to run this HTML file, let me list down below.

1. Use on the Fly:

This is the quickest way to use lite-server, all you need is Node Js installed and connected to Internet. We are not gonna install lite-server rather we use npx to use it. 

Code
npx lite-server

2. Global installation:

lite-server can also be installed globally and used so it works seamlessly even when you are not connected to Internet.

Code
$ npm i -g lite-server
 
# To run lite-server 
$ lite-server

I just changed the HTML content, and I see the Web page is refreshed on my Chrome browser. Awesome isn’t it.. No need to restart the server to render new changes – Saves my life!

lite-server Demo

With zero configuration:

This is super easy, no configuration is needed (the way we ran lite-server just above), but it has some limitations:

  • You need to have index.html in the folder where you want to run lite-server.
  • Default port 3000 can only be used.
  • Changes to any html, CSS, JS files will trigger Web page refresh.

Custom configuration:

With custom configuration, you can change port #, base folder where HTML/CSS/JS reside, and also files that need to be watched for change to refresh Web page.

lite-server uses BrowserSync so the configuration that is applicable to BroserSync is also applicable for lite-server too.

Create a configuration file called bs-config.json or bs-config.js under your project.

Add below JSON configuration to the configuration file.

Code
{
  "port": 8080,
  "files": ["./src/**/*.{html,htm,css,js}"],
  "server": { "baseDir": "./src" }
}
  • Changes server port # to 8080.
  • Watch for changes to files with extensions html, htm, CSS and JS under src directory.
  • Sets the base directory.

Make sure you pass config file at the run time as shown below:

Code
lite-server -c bs-config.js
You got something to say about this post? Feel free to share your comments in the comments section down below.

Reference:

BroserSync configuration

GitHub – lite-server

Join the Newsletter

Subscribe to get our latest content by email.
    We won't send you spam. Unsubscribe at any time.