Live Reload Sublime, Chrome, Anything - Fast and easy with Live-Server

596 ratings | 103135 views


Live Reload Sublime, Chrome, Anything - Fast and easy with Live-Server

With Live-server (), you can serve up html files with live reloading instantly! Simply type live-server from any folder and it will spin up a local node.js server with live-reload and automatically open the folder your in, or an index.html file if you have one.

Comments to the video: Live Reload Sublime, Chrome, Anything - Fast and easy with Live-Server

Yannick Vankerkhove 1 month ago
I'm a total noob at javascript and I got it to work somehow. For me the npm install worked fine, what doesn't work however is the main.css part, how do you get that to load? My page background won't turn pink like yours and I copied pretty much everything. xD Also, how do I change the browser that live-server uses? Right now it defaults to my Brave browser, but this browser sucks for javascript and I want it to use Chrome instead. How do I do that without having to delete Brave? Cheers!
Yannick Vankerkhove 1 month ago
Nvm found it! xD
playmaker forever 3 months ago
it does not work
Helios 3 months ago
it does not work with subfolders !!!!!
CAD HUT 4 months ago
installed node js. Then cloned and installed live-server from cmd. In my project directory when I open live-server from cmd it picks only html. It ignores javascript and css. Please help.
Nate 4 months ago
or just use brackets :)
Numan Ayhan 5 months ago
Thanks Bro
Jikson Joeda 5 months ago
Coooool. npm install -g live-server is working now perfectly. Go for it developers.
Gosn Ognjen Silni 6 months ago
EASIER METHOD : download wamp server And use chrome extension called auto refresh
Andres Borges 7 months ago
For those of you having trouble running the NPM line of code in Terminal add sudo to the beginning. You need admin privileges. It will ask for your password, then you're golden.
CHAMARA JAYAWARDENA 7 months ago
Great learning curve with you,   but little bit difficult to understand this video since your going so fast. Really appreciate if you can do a separate video inly for this.
jchewbaka 8 months ago
How do you pull up the folder?
MOTIVATION by Belhassen Chelbi 1 year ago
THANKS :D ♥
Geoffrey geo 1 year ago
I installed live-server using terminal and installed chrome plugin and then when I use the command live-server I am getting a msg :-bash: live-server: command not found any suggestion or help will be really appreciable :)
Reza Haghighi Osgouei 1 year ago
There is no need to install LiveReload extension for Chrome to use live-server, as Adam G mentioned. Just install the latest node.js first. Then in the command line check its version by executing this command: node -v. You can do the same for npm: npm -v. Then execute the following command to install live-server: npm live-server -g. After it is done, just go to the folder you have your index.html file. In the command line and inside that folder execute this command: live-server --port=8000. It will open a new Chrome tab with your index file reloading automatically. You can also simply execute live-server (without --port=8000), it will use the default port of 8080. This procedure worked fine for me in Windows 10, 64-bit. To stop the live-server, just press ctrl+c in the command line.
Hassan ali 25 days ago
plus there are many live server extensions for code editors and i use that.
Yannick Vankerkhove 1 month ago
Hey man, everything works fine for me, but how do I get to change browser? Right now live-server opens up my Brave browser (which sucks for Javascript atm) instead of my Chrome browser. Cheers
butah Scotch 1 year ago
Great vid. I can see the list of directories but my html/php /js files could not be seen even if i tries to move it in sysWOW64 in which the files that the directory is displaying.
Arbin Shrestha 1 year ago
Hey! I did this a few weeks ago and it was working fine even without installing the browser live-reload extension. But a few days ago it stopped working and says 'live-server' is not recognized as an internal or external command, operable program or batch file. when I try to run it. I have tried re-installing the live-server many times, I even installed the browser extension, but nothing is working now. Please help! (I am using windows 10.)
Johnny_GR 1 year ago
+LearnCode.academy Does it work with php files? All html files with all kinds of names (named index or not) and css files works fine. but when i click from browsing directory in web browser the only think it does is downloading the file but it doesnt open it as with html and css files
Kartik 1 year ago
ha i use brackets and its much faster than this i use an extension called autosaver and set auto save time to 50ms ans its just reload af
karan kemble 1 year ago
Its really awesome!
Alex Wang 1 year ago
I've been searching all over for a modern version app that does just this in 2017 and open source. Thanks for this video!
Noldy 1 year ago
What would have been better was if you did the tutorial on how to set it up.
宇超董 1 year ago
Man, this utility is great! I'm learning js from scratch and you helped me a lot! The terminal you've been using looks sick! what shell are you using?
宇超董 1 year ago
LearnCode.academy many thanks!
LearnCode.academy 1 year ago
Awesome to hear! I'm using bash, with bash-it
Versed 1 year ago
So I am new to using a MacBook Pro. However from what I understand trying to install this manually is to paste the code into the terminal. However I am unable to process these actions for terminal because I don't have the permissions. I am under the admin account and owner of the MacBook. I tried editing the terminal under command + I or get info and it still does not let me edit the app saying I even don't have permissions for that. I looked up this problem online and people said that I need to enter recovery mode in order to type in csrutil disable. However I am unable to still solve this and setup the live reload. Does anyone else know of any other methods I can use to install the live reload setup???
Versed 1 year ago
Appreciate the reply. This helped me a lot. Thank you!
LearnCode.academy 1 year ago
interesting? At what point are you running into a permissions error? - installing node.js? - installing live-server globally with npm? (prefix the command with sudo or see this if so ) - running live server? You can also use brackets.io editor, which has a live preview option built in.
Mike Putz 1 year ago
Will you make a video explaining what steps you took? You started the screen already on live server. I downloaded GitHub, but no idea what the next step is.
LearnCode.academy 1 year ago
- install node.js (nodejs.org.requires a reboot on windows) - run npm install -g live-server to install live-server command - run live-server command
King Louie 1 year ago
so every time i go live-server i get to a page called Index of/ Drop box/. why do i not see my atom file ?
Yannick Vankerkhove 1 month ago
Click on the folder where you have the.html file saved.
Noied Wavve 1 year ago
You using pycharm?
Alyssa Brownridge 1 year ago
Help!!! I'm on Windows. How do I access index.html?
saxon wynter 1 year ago
I'm on windows 10, i've installed the package and have gotten the server working, however the changes only show when I save my project and then refresh the webpage, I'm using the free version of sublime, is that the issue or? (just started trying to code so not really sure how to troubleshoot this)
Giorgi Gzirishvili 1 year ago
What theme are you using for ST?
Panther AnimationS 1 year ago
how do I clone the text
ZeroGD 1 year ago
I keep getting This site can’t be reached
Prabhas Joshi 1 year ago
this is awesome. no more grunt and then grunt-contrib-watch and stuff.
Martin Zachariassen 1 year ago
Great video with some good tips, love the live-reload. Instead of using the Chrome Dev. Tools (which can be infuriating sometimes), I came over this the other day - Responsive Web Design Tester (link below). This gives you your own pop-up window, kinda like the iOS simulator. And you can choose basically every device you would ever want to run tests on. I've only used it for a couple of days, but find it really helpful. What do you think? Link to Chrome extension:
Shankar Mahadevan 1 year ago
thanks mate. after many videos of nodejs and npm instalation, live reload works. Been watching your js videos. thanks again. ;)
Anon Anon 1 year ago
take very long for the changes to be detected
Sandy 2 years ago
DOn;t bother with all this - just go to Package manager and install Browser Refresh - Plugin - You can even set a cutomised hotkey
Josef Tinagan 2 years ago
Do I need a server for this? I don't get this, when i typed in live-server, it tells me its not an internal or external command. When I type in live-server in the live-server folder, It gives me an error, Windows Scripts Host. Error: Invalid Character, I feel like I'm missing something, maybe I should try to setup a localhost first?
Ryan Garant 2 years ago
Mad props! This is by far the best I've seen. Thanks :)
Trump supporter 2 years ago
is there a work around for PHP?
WzrLvDJ666 2 years ago
genial muchas gracias, porfin sin tanto dolor un verdadero servidor
chloe kim 2 years ago
Can't you let me know how to change the setting in Sublime Text to preview in chrome for mac. I can't see anything T.T
Moke & Eed 2 years ago
npm install -g live-server worked for me luckily :) thanks man
JOHN LI 2 years ago
why is my says permission denied when I try to install it
JOHN LI 2 years ago
+EinsameNudel now it says improper use command and shit. need me to type password and it doesn't work as well.
EinsameNudel 2 years ago
type sudo before. sudo means superuserdo , if you want to install programms global(-g) on your machine you need root rights
josue679 2 years ago
how do you run live-server and disabling live-reload
Swarnim Arun 2 years ago
if you guys are just using html and css then try auto-html-preview in atom it's my new fav text editor.
Aqeel Al-Abadi 2 years ago
I tried to install live-server and livereload but This site can’t be reached :refused to connect. any solution ?
Zac 2 years ago
███████████████████████████████████
Zac 2 years ago
:)
Shanmugam M 2 years ago
Really good video but final process u just go fast as like Barry Allen So can u explain me the final steps
Koustav Pal 2 years ago
Does it work on Windows? Please help.
GvendyCrap 2 years ago
does this work on windows? or what can i do?
Bosko Ivic 2 years ago
You can just put <meta http-equiv= refresh content= 0.1 > as auto refresher
Tomasu 2 years ago
+Super Horizont I advice do not use this line of code, your atom will start exit and restarting non stop right after you paste it. For your own sake, seeing your atom blinking like hell wasnt a good experience. My own word.
Bosko Ivic 2 years ago
Sweeet, tnx
Nguyễn Mạnh Trường 2 years ago
writing website like nodejs can I live-server then in another terminal I npm start , will live reload work ?
Erik Cohen 2 years ago
Thanks for the great videos! I am having an Issue that live-server starts and exits right away, on CMD in Windows 7. How do I keep the server running?
Adam G 2 years ago
IMPORTANT!!! @@ LiveReload @@ Chrome extension must be installed in Chrome for this to work. As of : sudo npm install -g live-server worked for the install. There is an auto-save package in Sublime Text package installer that will allow for changes to automatically push to any file you are editing if you want instantaneous updating. Thanks LearnCode.academy and tapio! This is a really fantastic little node package.
W_rk 1 year ago
Note that there's no sudo command in Windows cmd, the equivalent is right clicking on cmd.exe and choosing run as admin. Beginners should remember this because they're very important commands.
Tazza DK 1 year ago
ctrl-c
Jdms 8911 1 year ago
Thanks for the advice. Do you know if there is a command where I can stop live-server from running? I find that if I wanted to use the terminal again, I have to manually exit out of the terminal then re-open it for terminal usage. Is there a command where I can just disable it temporarily to do other stuff?
Younus Rahman 2 years ago
+Adam G thank you sir.
Marko Kovacevic 2 years ago
Idk, it worked for me before. After i installed XAMPP it decided to stop working. program 'live-server.cmd' failed to run.
shuaibird 2 years ago
excuse me. Another question here. My default browser is Safari. I want the live-server to load my page in chrome. I know there's an parameter, --browser=BROWSER could be used, but I couldn't get it work by trying --browser=CHROME/ --browser=Chrome/ --browser=chrome.
Yannick Vankerkhove 1 month ago
2 years old but I'll answer anyway. xD Open command window and type live-server --browser=CHROME without the quotation marks.
shuaibird 2 years ago
thanks a lot. it's really easy to setup and use with node.js installed. However, I'm thinking about whether there's another way that could automatically reload the page without saving the files - what I mean is that I don't even need to press the cmd+s to see the change. If there is, plz let me know. I'm just that lazy. LOL
Nathan Bethea 2 years ago
I have an asus laptop and i downloaded sublime text because I saw that u use that for editing your website , but i don't know how what u use to type in the code for live reload, in 9th grade and i trying to learn code
zea maize nunez 2 years ago
what about on windows?
Duh Real Ian 2 years ago
What is he doing? I understood nothing
Pedro Cruz 2 years ago
Can you make a more detailed tutorial of this? I´m new in this and i just can't get it to work.
Hesham Scorpe 2 years ago
+Pedro Cruz explain what problem do you have, when u tried doing what he is doing maybe i can help :)
bot06 2 years ago
try sudo npm install g liveserver on maclinux or run command prompt in Administrator mode on Windows. - via YTPak(.com)
Shohan 2 years ago
how to setup this config ?
Staine2009 2 years ago
Hi it works fine but how an I use it with my grunt workflow ? following your tuts I have to work in a separate way :(
Prabhu Ram Kumar Balasubramanian 2 years ago
But the changes i've made in CSS file is not reflecting even after saving..Any idea what i've missed ? But i can see a message CSS CHANGE DETECTED in terminal..
Yannick Vankerkhove 1 month ago
Same here, everything works except the.css part.
jasonc_tutorials 2 years ago
I got it working on windows. Thanks will.
Jalanie Pasague 2 years ago
I love learncode.academy, I'm verry blessed to watch many videos from! I wonder if I can a web designer/developer through learning online video tutorials. Sad to say that I cant go to university, but I really love this field. I hope it can be possible
Mark Ingle 2 years ago
Can live-server be used with a Chrome single page application?
Milan Nikolić 2 years ago
Thanks man, I'm very grateful.
cafeta 3 years ago
Very useful thank!!
OnesAndZeros 3 years ago
but nothing's working. I downloaded node.js and copied and pasted that block of text into cmd and it said a bunch of errors. I typed in live-server and it said it's not recognized. WHAT DO I DO?!?
zurak71 2 years ago
+OnesAndZeros You need node.js + npm. Additionally, u need the git client to clone the repository (the block of text u pasted). So once u installed git, u should be able to clone the repository and install it as described in the video. For the installation you need the NPM (means sth like node package manager or so) tho GL
OtanaAhana 3 years ago
Is there anything like this for php?
M.J. Tham 3 years ago
Hi, how to change the port number with this live server? And My live-server didn't live-reload well after I save my html, do you know whats wrong with it?
M.J. Tham 3 years ago
Sorry, I found the solution live-server --port=8085
[CLOSED DOWN] Enon Norsk Gaming/Underholdning (RandomEirik) [CLOSED DOWN] 3 years ago
I don't get it. Where do I type: git clone ?
[CLOSED DOWN] Enon Norsk Gaming/Underholdning (RandomEirik) [CLOSED DOWN] 2 years ago
+LearnCode.academy Sorry, but now I'm just confused. I have wamp running.
LearnCode.academy 2 years ago
Ah, yeah, you'd just want a php server then: php -S localhost:8000
[CLOSED DOWN] Enon Norsk Gaming/Underholdning (RandomEirik) [CLOSED DOWN] 2 years ago
+LearnCode.academy I know this is ages ago, but I decided to use live-server on my new laptop. I type live-server, chrome opens with a list of all the files in that directory, but when I click for example index.php it just downloads the file.
jelleAwEsOmE 2 years ago
+LearnCode.academy When I do that, it's still having errors. Is there another way to change the port? it's sayig that there is no such file or directory.
[CLOSED DOWN] Enon Norsk Gaming/Underholdning (RandomEirik) [CLOSED DOWN] 3 years ago
+LearnCode.academy Ahh, of course, running wamp on 8080, and Skype on 80, sorry for asking so much. :/
viktor1098 3 years ago
Thank you! Tried for days to get a livereload solution working. Got it in a matter of seconds when i tried this. To hell with livereload and all that.
LearnCode.academy 3 years ago
+viktor1098 Yeah, I hear you.this is by far the simplest solution for basic html sites.
孙悟空 3 years ago
but i still need to save it ,how can it refresh without saving file?
ThunderousGlare 3 years ago
is it possible to do it without saving.
livelifetothefull 3 years ago
+LearnCode.academy get this error on windows 8, do you know why ERR_CONNECTION_REFUSED
ThunderousGlare 3 years ago
+LearnCode.academy this is kinda bothersome there are things in sublime that i really like for example quick startup and plugin that automatically brings commas to outside. Brackets has even newer things like adobe extract which is just too good. Visual basic studio code new free version is just so fast. Never seen anything that fast. I wish i could merge them into one. I'm thinking of buying way better computer and use brackets mainly. Probably put raid of ssds and 32 gb ram. So brackets also becomes snappy.
LearnCode.academy 3 years ago
+answerOfstupids Brackets.io has a live-preview feature that does html+css without saving, but you still need to save for Javascript
Android Labs Montreal 3 years ago
hi there. great videos. thank you so much for sharing your knowledge. dumb question. I usually use xampp while in development. if i have a site that is mainly html5 but uses php for reusable headers and footers, can i use live-server?
Android Labs Montreal 3 years ago
+LearnCode.academy ah yes vagrant. I've played around with it and it's quite powerful. Also saw today your vid about grunt/gulp/brunch. Really like your channel.
LearnCode.academy 3 years ago
Live server is only for serving static content. You'd still wand to use xampp or, even better, look at using Vagrant to run your PHP code inside of a virtual machine:
Abhi Khatri 3 years ago
woaaaaah, another great video by steve i've been looking for. I just moved to linux so I was looking for this kind of video cause I've been using prepros on windows and have no idea for linux
TheNorwegianGuy 3 years ago
I don't understand. I downloaded github. And what so? You tell us to install node.js where shall I install node.js?.
chiz79 3 years ago
I cannot get this to work on windows 8.1. Have Node installed, have index.html in target directory. When I run live-server (using the node shell) in the target directory, it opens Chrome and I get this message: The webpage at might be temporarily down or it may have moved permanently to a new web address. Error code: ERR_ADDRESS_INVALID. Huh!?! Tried Googling with no joy. There is even a rather dismissive notice on the live-server github page saying, if you run into errors, deal with them. Wow. Thanks Tapio. Can anyone please help me?
N A 3 years ago
Same here. This webpage is not available
Craig Hollabaugh 3 years ago
Been watching your node videos and came across this one. How can I get live-server working without an index.html file? Your tutorial, exp2014, uses express with hogan. live server is working, it serves directory listings but I want to point it to my node app.js on a different port. Thanks.  
Tomas Papan 3 years ago
Could you please share your.bashrc file. I'm really interested in your PS1 (prompt). I'm sorry if I'm asking for something which is already somewhere on your channel, but I can't find it. Thanks a lot and keep doing this stuff :)
Frank Faustino 2 years ago
Scrolled all the way down here for this. Thanks! :)
LearnCode.academy 3 years ago
Yeah, it's a modified version of the zork theme for bash-it
NotYourOrdinaryNinja 3 years ago
This makes 0 sense to me
NotYourOrdinaryNinja 3 years ago
+LearnCode.academy thanks
LearnCode.academy 3 years ago
ah, if you're on mac, it will be in the terminal application (in applications>utilities) If on windows, start>run and run cmd
NotYourOrdinaryNinja 3 years ago
But what are you typing these commands in though? Also, i have node.js but thats all i understood how to do i just dont know where to type things i also have the chrome extension
LearnCode.academy 3 years ago
If you're starting out, this will probably be a bit over-the-head. So there's 3 things going on: - node.js installed on machine, using npm (node package manager).fancy way to install stuff from the command line i.e. the npm install live-server command - run the live-server tool once installed - free livereload extension installed on the browser - this listens for livereload signals and refreshes automatically If it's too much, use the brackets.io editor and use the live preview feature.
Bukajec 3 years ago
Is there a way to pass the port number when starting the live-server, so I can have more of them running at the same time?
Haseeb Mirza 3 years ago
+Bukajec You can configure the port to be used by the server by adding the --port=<number> runtime option when invoking live-server, or by setting the PORT environment variable prior to running live-server.
LearnCode.academy 3 years ago
hmm.good question.  Not sure, actually!
MisterBaseball200 3 years ago
I'm really confused. what's that program you're using to connect to server and enable Live Reload and set up that node thing?
MisterBaseball200 3 years ago
Ahh. I gotcha, that makes a little more sense now. I actually went about it in a slightly different manner, but it's still working the same way. Thanks!
LearnCode.academy 3 years ago
If you're starting out, this will probably be a bit over-the-head. So there's 3 things going on: - node.js installed on machine, using npm (node package manager).fancy way to install stuff from the command line i.e. the npm install live-server command - run the live-server tool once installed - free livereload extension installed on the browser - this listens for livereload signals and refreshes automatically If it's too much, use the brackets.io editor and use the live preview feature.
Imran Azam 3 years ago
Thanks, really useful :)
Galih Pratama 3 years ago
alternatively u can use livereloadx for compiling + create local server (y)
A. Ardy Nugraha 2 years ago
+Galih Pratama ajarin cara install step by step nya dong gan, udah install node sama npm nya tapi live server nya tetep ga jalan
alkolaqi83 4 years ago
again you rock 
Mitchel Epperly 4 years ago
Can I do this on windows?
LearnCode.academy 4 years ago
Yeah, it should work just fine on windows.should haha.
soyboy 4 years ago
Wow. I dont kow if this would be to much, but i know that many would appreciate if you did this. To show your won setup and different tools you use. Front end and back end wise.
LearnCode.academy 4 years ago
These days, it's about as complicated as sublime text (sometimes Atom.io) and terminal, actually!
Patrik Nygren 4 years ago
Great video! This async stuff that most JS programmers like to brag about, finally sunk in. Thanx
LearnCode.academy 4 years ago
OH awesome, glad to hear!  Yeah, it takes a bit to click for sure.
Peter Sr. 4 years ago
I have been trying for two days to figure this out and can not get server to refresh when i save my work unless i click refresh what am i doing wrong?someone please help.
Peter Sr. 4 years ago
can you tell me why my live server will not reload when I save file?
LearnCode.academy 4 years ago
Hmm.  Assuming you're running live-server in the same directory as your files are in, I'm not sure what might be wrong.  What's your OS?
Peter Sr. 4 years ago
+LearnCode.academy yes
LearnCode.academy 4 years ago
Do you have the live reload plugin installed in chrome?:  You might need that installed.
Ravian 4 years ago
Ok, I'm lost.  I have been watching your videos on web design with HTML and CSS and  i wanted to start experimenting on my own so i downloaded sublime text 2 and GitHub because i really like the setup you are using.  Now how do i get it setup like you have it?  Thanks in advance for your help.
Ravian 3 years ago
+Dav123xyz I gave up and found brackets.  similar setup, only have to download one thing though. no add-ons needed
Dav123xyz 3 years ago
+Nathaniel Fianchino Me too, how did you get on? 
LearnCode.academy 4 years ago
So yeah, I'll either use sublime, atom.io or brackets.io for coding, I'll install node.js on my machine and use yeoman.io or live-server to run a live-reload environment when I'm not using brackets.  I do install the live-reload plugin on Chrome. That's about it, really.  I'd say the rest is sublime plugins, I install sublime package manager, then the predawn and Emmet packages.
Ravian 4 years ago
+LearnCode.academy i would like the setup you are using in your video.  i downloaded sublime 2.  And  i would like the live reload, i thought i found it but didn't.   After looking through other comments i did download brackets.  It seems to work nice.  I am basically a virgin in the world of coding and programming.  I have gone back to college for my BS in IT and am only in my first year.
LearnCode.academy 4 years ago
What features of my setup are you seeing that you are wanting to duplicate on your machine?
Andre Romano 4 years ago
hmm for some reason css changes are being logged in the console but they dont cause a reload to the page, is this intended?
Francesco Farina 4 years ago
Great vid! What's your prompt customization? It's awesome.
LearnCode.academy 4 years ago
Thanks!  I'm using the zork theme of bash-it: I just adjusted it to take a little info out.
LazarRedDevil95 4 years ago
That's cool but Brackets has live preview.What's the difference?
LearnCode.academy 4 years ago
Brackets live preview mode is really great.  If someone's ever coding html/css, it's really the editor to use, even if you don't prefer it.  For me, I prefer sublime text & Atom editors, so this gives me that functionality on any editor.
Raphii Monteiro 4 years ago
Hey, what's this S chrome extension in your toolbar?
LearnCode.academy 4 years ago
It's Switcheroo, it allows you to point any source file (say main.js) on a page to a local version on your machine.that and Charles Proxy are super nice for debugging production bugs!