Posted in windows
2802
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
73
This Month
347
This Year
864

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

caret-color

The caret-color CSS property sets the color of the insertion caret, the visible marker where the next character typed will be inserted. This is sometimes referred to as the text input cursor. The caret appears in elements such as <input> or those with the contenteditable attribute. The caret is typically a thin vertical line that flashes to help make it more noticeable. By default, it is black, but its color can be altered with this property.
caret-color css reference