How to use the command 'live-server' (with examples)
The ’live-server’ command is a simple development HTTP server with live reload capability. It provides a convenient way to serve web files during the development process and automatically reloads the page whenever there are changes detected in the served files. This makes it easier for developers to see the immediate effects of their changes without manually refreshing the page.
Use case 1: Serve an index.html file and reload on changes
Code:
live-server
Motivation: This use case is useful when you have an index.html file in your project that you want to serve and monitor changes in real-time. By running the command live-server, the server will start and serve the index.html file. Any changes made to the file will trigger an automatic reload of the page, allowing you to see the changes instantly.
Explanation: The command live-server without any additional arguments simply starts the server and serves the index.html file in the project directory. It enables live reload by default, so any changes made to the index.html file will trigger a page reload.
Example output: The server starts and displays the following message:
Serving "index.html" at http://127.0.0.1:8080
Ready for changes
Use case 2: Specify a port (default is 8080) from which to serve a file
Code:
live-server --port=8081
Motivation: Sometimes, the default port (8080) used by the server might be already occupied or conflicts with other applications. In such cases, specifying a different port becomes necessary to avoid any conflicts. Using --port=8081, the server will listen on port 8081 instead of the default port, allowing you to access the served file through the specified port.
Explanation: The argument --port=8081 tells the server to listen on port 8081 instead of the default port. This parameter allows you to specify a different port number if needed.
Example output: The server starts and displays the following message:
Serving "index.html" at http://127.0.0.1:8081
Ready for changes
Use case 3: Specify a given file to serve
Code:
live-server --open=about.html
Motivation: In some cases, you might want to serve a specific file from your project directory rather than the default index.html file. This use case allows you to specify the file you want to serve using the --open argument.
Explanation: By specifying --open=about.html, the server will serve the about.html file instead of the default index.html file. This argument allows you to serve a different file from your project directory.
Example output: The server starts and displays the following message:
Serving "about.html" at http://127.0.0.1:8080
Ready for changes
Use case 4: Proxy all requests for ROUTE to URL
Code:
live-server --proxy=/:http:localhost:3000
Motivation: In certain situations, you may need to proxy specific requests to another URL, such as when you have an API server running on a different port or domain. This use case allows you to specify a proxy for all requests that match a specified route, redirecting them to the specified URL.
Explanation: The argument --proxy=/:http:localhost:3000 tells the server to proxy all requests for the root route (/) to http://localhost:3000. This means that any requests made to the server’s root route will be forwarded to the specified URL.
Example output: The server starts and displays the following message:
Proxying requests from / to http://localhost:3000
Serving "index.html" at http://127.0.0.1:8080
Ready for changes
Conclusion:
The ’live-server’ command is a handy tool for web developers, providing a simple development HTTP server with live reload capability. By knowing how to use different options, such as serving a specific file, specifying a different port, and setting up request proxies, developers can enhance their development workflow and see immediate changes as they work on their web projects.
