Install npm lite-server for automatic update in your browser

This is a basic step by step on how to install npm lite server.


Requirements: create a project and open it in vsc or atom.
node and npm installed.

Open power shell and access the folder were your project is,
and check the current node and npm version by typing the command prompt 

node -v and npm -v


To start, we are going to create a package.json file, type the command prompt

npm init


press enter and fill in all the info. asked (description, name, author etc...):



when you about to finish it will show you something like this:

 press enter

and you can now check what is in the folder by using the command prompt

 ls


you see now a package.json folder, awesome! 

after this, you are going to type the command prompt to install the lite-server. (This can take a few minutes)

npm install lite-server --save-dev
yarn add lite-server --dev # or yarn



go now to vsc, in your project you will found a new document called package.json  


double click to see the content. you will find something like this:



right on "scripts" type: 
"dev": "lite-server",

you should have something like this:

ok. last part. go to power shell and type 

npm run dev


and your good to go! now, any modification you do in your project (in vsc) you will see it directly updated in your browser.

try by adding new elements to your code and see. Once you finish, the browsers reloads and is show in your PowerShell window. As a reference, looks like this:





for documentation please refer to: https://github.com/johnpapa/lite-server



Comentarios

Entradas más populares de este blog

Leveling Up with Angular: Intermediate Concepts for Scalable Applications

Mastering CSS3: The Pinnacle of Modern Web Styling