Posted in windows
2766
12:38 am, November 11, 2019
 

Using Node to get a Web Dev Environment with livereload up and running

this is how i get a live reloading dev environment up and running on my windows pc's using node , npm and browsersync.

install node js which comes with npm

run this command in your cmd window

[windows key + r] and type cmd

npm install -g browser-sync

this will install browser sync globally, allowing you to run websites from any directory on your pc

setting up a test site

create a directory in your local machine, for testing files it only really needs to contain an index.html file.

i created mine in D:\code est-webpack (even though its not actually webpack, i already had this one setup ;).

how to actually run the server

now we should have browser-sync installed globally, to run the server we have to use this command to bind it to our local ip address and custom port.

browser-sync start -s -f . --no-notify --host 127.0.0.1

once we run this windows firewall will probably popup and request access, i allow access to every network

now we can see that browser sync is running

you can now browse to http://localhost:3000/ and you should see your index.html file

if you make any changes in this file browser sync will automatically update the browser so you dont have to keep pressing F5 All the time!

everytime you change the file index.html or any other files under that directory, browser sync will reload the browser with the new files and changes.

you can see if its working by editing the index.html and saving a change and you should see the blue text saying "Reloading Browsers".

View Statistics
This Week
91
This Month
311
This Year
828

No Items Found.

Add Comment
Type in a Nick Name here
 
Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
For a long time it had seemed to me that life was about to begin - real life. But there was always some obstacle in the way, something to be gotten through first, some unfinished business, time still to be served, or a debt to be paid. Then life would begin. At last it dawned on me that these obstacles were my life.
Alfred D. Souza
Random CSS Property

min-inline-size

The min-inline-size CSS property defines the horizontal or vertical minimal size of an element's block, depending on its writing mode. It corresponds to either the min-width or the min-height property, depending on the value of writing-mode.
min-inline-size css reference