Posted in windows
2263
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
47
This Month
214
This Year
325

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
“If you just sit and observe, you will see how restless your mind is. If you try to calm it, it only makes it worse, but over time it does calm, and when it does, there’s room to hear more subtle things. You see so much more than you could see before. It’s a discipline; you have to practice it.”
Steve Jobs
Random CSS Property

@viewport

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
user-zoom (@viewport) css reference