LIVE SERVER package installations through npm(node package manager)
Tags: javascript, webdev, node, programming
Published: 2023-07-28 02:36:32


Live Server is a local development tool that automatically reloads your web applications when you make changes to your codebase. The live server package is installed either through ``npm`` or as an ``extension``, depending on your specific requirements and the development environment you are working with. **In this article you will learn**:

- How to install live server package through ``npm``.
- Modes of installing live server package.
- Why you should consider installing live server package through ``npm``.

##1.<u>How to install live server package through npm</u>
Before you begin with the installation of live server package, make sure you have ``Nodejs`` installed on your system 💻.
**Nodejs** is a run-time environment  that allows you to run javascript on both frontend and backend.
You can download and install Node.js from the official website: https://nodejs.org. and select the installer  for your operating system, (you probably want the ``.msi`` for Windows and the ``.pkg`` for Mac. While **Nodejs** is been  installed, an additional command line is also installed along with it, known as **NPM**;
[Npm](https://docs.npmjs.com/) is a package manager for the Javascript programming language, mainly for managing and installing packages  in Node.js projects.  
>NB: Live Server is one out of the many javascript packages, so we need ``npm`` to install it.


Once **Nodejs** is installed on your system💻, you can proceed with the installations of live server package following the steps below 👇. However, You must have **Created** and **Opened** a project folder 📂 from your preferred code editor e.g. [Vs Code](https://code.visualstudio.com/docs/setup/setup-overview) , in other to follow the steps below.

![vscode editor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1bbuc6w5ava2dcn6nwtn.png)

a. **Open** your terminal and navigate to your project folder 📁.

![vscode editor navigating to the folder created](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vc1okdhukdownpqqeiag.png)

b. **Run** ``npm init –y `` to initialize your project folder 📁. 

![run npm init to initialize project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/atsimubzarb5pwqqfvq6.png)
c. **Run** ``npm install live-server -D`` to install Live Server in the development phase of your project. 

![Installing live server package](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rab7le2wvgz0ybxi4mt5.png)
d. After the installation is completed, it's time to **Start** the live server.

> i. Firstly, navigate and add a start command to the **scripts section** of the package.json file of your project folder 📁. 

 > ![added a start command](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n8o34lp4blzv9ri2k7yt.png)
> ii. Save and close the package.json file.

> ![save the file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v1t7teqjiovi1pc03n48.png)

> iii. Run ``npm start`` to start the live server.

> ![start command](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7mpemza5dx9uh1f9t5r6.png)
`npm start` command starts the live server, and make your web application accessible throughout the local server, and automatically reloads your WEB BROWSER whenever you make changes to the HTML, CSS, AND JAVASCRIPT FILE.

> ![live server in the browser](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t5kx5evuk9pyitg92mj1.png)

##2.<u>Modes of installing live server package</u>
Live server package can be installed in one of the two methods listed below:
- global
- development

Let's discuss the difference between these two methods

###<u>Global installation </u>

Global installation simply means the live server package is  installed globally on your machine rather than installed locally within a specific project. This mode of installation allows you to run live server from any folder 📁 on your machine.

Below **is the command to install live server globally** 👇

```
npm install live-server –g
```
The ``-g`` option stands for global, and when it is specified, the live server package is installed globally and  made available as a global command line tool on your system 💻.

###<u>Development installation</u>

Development mode installation means the package is installed locally within a specific project. Development mode installation ensures that  your project has it’s own version of live server and makes it very easy for other developers  to collaborate with you on the same project , by simply installing all the required packages listed in your project.

Here is the command line to install live server in development mode 👇
```
npm install live-server -D
```
``-D`` is known  as development dependency. Set ``-D`` option only when you need to install live server in the development phase of your project .

###3.<u>Why you should consider installing the Live Server package through npm?</u>
 
Installing a Live Server package using npm offers a variety of benefits including:
 
- **<u>PORTABILITY</u> :** when you install a live server package through npm, you can easily set up your project on any machine that has Nodejs installed, Also when you share the project with other developers, all the dependencies listed in your project are easily installed using npm.

- **<u>DEPENDECIES HANDLING</u> :** Your project dependencies are easily managed in a package.json file when you installed live server package through npm. This makes team collaboration easier and ensures consistent environments across different development setups.
- **<u>VERSION CONTROL</u>:** By relying on npm, you can specify the  exact version of live server you want to use in your project. This helps in maintaining consistency across different development environments and ensures that all team member uses the same version of live server.

- **<u>BACKEND FUNCTIONALITY</u>:** If you are working on a web development project that requires backend functionality, such as handling API requests. Interactions with database and server-side rendering. you should consider installing live server using npm in other to get the live preview of your project in the front end. This is something a live server extension is not capable of handling.

- **<u>COMPACTIBILITY</u>:** Npm is supported by a wide range of operating systems, including Windows, macOS, and Linux. Installing live server using npm ensures cross-platform compatibility across different development environments.

##<u>Summary</u>
**Live Server** package is a  local development tool with live reload capability for HTML, CSS and JavaScript files. Live Server package is installed either globally or in development mode. However, before installing a live server package using npm , your system 💻 must have Node.js installed. Installing live server  package through npm offers variety of benefits including dependencies handling, version control, compatibility e.t.c