Hello amazing people👋, welcome back!
Introduction
If you are from a 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.
The 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 a Web application in the 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 the different local servers like Apache Tomcat etc., or even hosted on Cloud.
Hello lite-server!
lite-server is what comes to my mind when I think about a lite Development server for running web applications (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.
To use lite-server in your project, you need to have Node.js installed in your machine.
To begin with, I am gonna create a simple HTML page.
$ mkdir demo
$ cd demo
$ touch index.html
Adding below piece of code in the file I just created for our demonstration purpose.
<!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 that down below.
Use on the Fly:
This is the quickest way to use lite-server, all you need is Node Js installed and connected to the Internet. We are not gonna install lite-server rather we use npx to use it.
$ npx lite-server
Global installation:
lite-server can also be installed globally and used so it works seamlessly even when you are not connected to the Internet.
$ npm i -g 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 – That's awesome!
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.
{
"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 the src directory.
Sets the base directory.
- Make sure you pass config file at the run time as shown below:
$ lite-server -c bs-config.js
All ready you now know how to use lite-server as a dev server in your projects.
Hope you find this article useful, please feel free to share it with your friends/colleagues.
If you got any questions, don't hesitate to post them in the comments section down below.
Happy learning!
I tweet a lot about Web development, Java, and Productivity Hacks, follow me on Twitter at AskUdhay.
Here is one of my recent tweets:
Reference
https://www.browsersync.io/docs/options/
https://github.com/johnpapa/lite-server
