How to Run a Live Server on Ubuntu: Quick Guide
Streamline Web Development: Setting Up and Running a Live Server on Ubuntu for Real-Time Previews
As a web developer and a user of Vim (Neovim) text editor, running a live server optimizes your workflow allowing for real-time previews and updates during project development.
This comprehensive guide will lead you through understanding what a live server is, configuring and activating a live server on Ubuntu, and enabling the seamless creation, modification, and instant visualization of changes within your web applications.
Let's get to it.
What is a Live Server?
When creating a web page, you use a web browser for code preview and debugging. After saving code modifications, manually refreshing the web browser is needed to see the updated page.
Well, a live server is a tool that facilitates web development by creating a local server environment that automatically refreshes the web page upon detecting code modifications, and offering real-time updates to developers as they work.
Installing Live Server
To configure live-server for HTML auto-reloading in Ubuntu, follow these steps:
Install Node.js
Live-server is built on the Node.js platform, fully depending on its functionality to operate. Consequently, to utilize live-server, Node.js installation is required as it functions as a Node.js package/module.
Run the following command to install Node.js:
sudo apt update && upgrade
sudo apt install nodejs npm
Install live-server
After installing Node.js, you can install "live-server" globally using npm (Node Package Manager).
Run the following command to install live-server:
sudo npm i -g live-server
Starting the Live Server
After successfully installing the live server, navigate to the directory where your HTML files are located and use this command to start the live server:
live-server .
After 'live-server' in the above command, the full stop (.) denotes 'all.' You can either specify a particular file using the command live-server + <filename> or activate the live server for the entire directory using live-server .
In the image above, the live server has been activated and can easily be deactivated at any time with ctrl + c.
The local server for the hotel_website project is at https://127.0.0.1:8080 on my Ubuntu.
After achieving the same result, you can now copy and paste the link into your web browser, confirming the successful activation of your live server, as seen below:
Wrapping Up
Utilizing a live server on Ubuntu empowers web developers with real-time updates and previews, enhancing the efficiency of development.
Opening a second Ubuntu page in your Windows terminal allows you to edit your HTML file while running the live server.
Follow this guide to effortlessly set up and run a live server, streamlining your workflow and boosting productivity in web development.
Experience the benefits and optimize your development process today!
For More Resources
If you found this article helpful, feel free to leave a comment and share it with other aspiring developers.
Happy coding!