Live preview of website when editing in Visual Studio Code

VSCode, being extremely lightweight (at least compared to Visual Studio), does not come with its own web server. This can be a bit confusing for those of us used to just hitting F5 in Visual Studio and getting our website launch in a browser.

When using VSCode, you have to rely on the power of Node.js instead.

This is a tutorial of how to start a really small project, containing only a single HTML file in VSCode and edit it with live preview in a browser.

The first part, installing VSCode and Node.js was also covered in my last tutorial, Getting started with TypeScript in Visual Studio Code, so if you have already done that, skip to Creating your project below.

Install Visual Studio Code and Node.js

First download VSCode and Node.js and install both.

Make sure npm, node.js’ package manager is added to path. Open a command window and enter

npm -v

npm -v

If you get an error, reboot. If you still get an error, make sure npm and nodejs have been added to your path:

How to check if something is included in path in Windows

Right-click My Computer
Select Properties
Select Advanced system settings
Select tab Advanced
Click on Environment Variables

There are two Paths, one for your user (at the top of the window) and one systemwide (at the bottom).

Select Path and click Edit. The path for your user should contain this:

C:\Users\[username]\AppData\Roaming\npm;

1	C:\Users\[username]\AppData\Roaming\npm;

The system wide path should contain this:

C:\Program Files\nodejs\;

1	C:\Program Files\nodejs\;

Creating your project

Create a new directory Demo and open this directory in VSCode. Create a file index.html with this content:

<html><body>Hello World!</body></html>

1	<html><body>Hello World!</body></html>

Installing a web server

The web server I recommend you install is live-server. You can run this server from any directory, and it detects changes to your files and reloads the page in the browser, which is really useful.

Open a command window and enter

npm install -g live-server

1	npm install -g live-server

Run live-server from VSCode

In VSCode, right-click on index.html and select Open in Command Prompt. In the console window, type

live-server

1	live-server

Live-server should now start and will keep running untill you close the command window. It will also automatically open your default browser.

You should see a website saying “Hello World!”

Live preview

To make sure that live-server is detecting changes, change the content of index.html. As soon as you hit Save, the page in the browser will reload.

If you set VSCode to auto save, you don’t even need to do that.

24 thoughts on “Live preview of website when editing in Visual Studio Code”

Pingback: Getting started with TypeScript in Visual Studio Code | A programmer's notebook
Stanny Nuytkens says:

2015-11-26 at 08:19

Amazing, will try this at home! Thank you.

Reply
brian says:

2016-01-24 at 09:12

Works great! Exactly what I needed.

Reply
Richard says:

2016-04-24 at 14:04

Does not do anything. I can see live server code injected into my test1.html page. But I have to reload the browser manually to see changes. Neither Chrome nor Firefox is working.

Live server cammand windows shows no error:
”
C:\Users\user1\Code\web\html>live-server
Serving “C:\Users\user1\Code\web\html” at http://127.0.0.1:8080
GET /favicon.ico 404 2.131 ms – 24
GET /favicon.ico 404 0.797 ms – 24
”

Any advice?

Reply
Bjarte Aune Olsen says:

2016-04-26 at 12:17

Does it make any difference if you call the file index.html instead of test1.html?

I’m just guessing here, I have not experienced your problem.

Since the live-server javascript is inserted, but not reloading the page, I’m guessing there is some kind of javascript error.

Does the console window in your browser display any error messages?

Reply
svrakata says:

2016-12-12 at 22:18

Thank you, works perfect!

Reply
Yasmin Zulfati Yusrina says:

2016-12-21 at 13:18

Great! Thank you sir.

Reply
Rajat says:

2016-12-25 at 06:03

Thanks for this …. I am just about to quit from vs code but you save me …. Thanks again 🙂 and Happy Xmas

Reply
J says:

2017-01-16 at 17:18

Followed your directions, yet when I “Open in Command Prompt”, I get the following error:

‘live-server’ is not recognized as an internal or external command, operable program or batch file.

Should I manually add it to my PATH as well?

Reply
1. J says:
  
  2017-01-16 at 17:49
  
  Ok, never mind. Just had to add C:/Program Files/nodejs to my PATH. Strange, I’d thought that was done when I installed.
  
  Anyway, it’s working now. Is there a way to save at every keypress?
  
  Reply
  1. Bjarte Aune Olsen says:
    
    2017-01-16 at 18:13
    
    Yes, you can set Visual Studio Code to autosave.
Jim Tryon says:

2017-02-18 at 06:53

Thanks, steps were easy to follow and now I have a web server!

Reply
hernan bogantes vargas says:

2017-04-06 at 06:23

Wow men.
God bless you . You save a lot of time and it will make people get closer to what they want and it aims to make a better world

Reply
mike says:

2017-04-19 at 17:03

It works but it does not host my style.css so I just see plain html. Any way to make it host the css and js files as well?

Reply
1. Bjarte Aune Olsen says:
  
  2017-04-19 at 21:13
  
  I think you should be able to see files in the directory you run the live-server command and below (subdirectories), but not outside the current directory.
  
  Is this true for your project?
  
  And have you made sure relative paths are still correct depending on where your HTML file is and the location of scripts and stylesheets?
  
  Reply
Alexander says:

2017-06-06 at 02:58

Thank u, man! its work!

Reply
Nnamdi Jideani says:

2017-08-09 at 07:36

Bjarte i followed all of the steps but the only one i have an issue with is “In VSCode, right-click on index.html and select Open in console. In the console window, type”

I don’t see this option to open in console when i right click.

Reply
1. Bjarte Aune Olsen says:
  
  2017-08-09 at 08:40
  
  The command has changed name to “Open in Command Prompt”.
  
  Reply
Leonardo Puga De Biase says:

2017-08-28 at 17:14

Awesome info! tested and working smoothly! really glad for this help!
Thank you!

Reply
Ricardo says:

2017-09-11 at 17:30

Excelent!! work good 😀

Reply
Diana says:

2017-09-29 at 14:13

Still works like a charm. Thank you!

Reply
Kelsey says:

2018-03-08 at 19:26

This post helped point me in the right direction; not exactly what I had to do but for the most part it helped me find what was going wrong with VSC. So thank you for that!

The link on this post for downloading node.js is sort of broken, so here it is: https://nodejs.org/en/
After installing the current version of node.js, I edited the environment variables on Path. I added both the location of where the node installed (which was C:\Program Files\nodejs for me) and also added: %USERPROFILE%\AppData\Roaming\npm.
Next after reopening VSC, in the command prompt/terminal (opened with CTRL + `):
1) I typed npm i -g npm to install the global node package manager.
2) Then I type npm i -g update to update the manager.
3) lastly I installed live-server by typing npm i -g live-server.

After all that live-server worked for me.
If you install node.js and still receive an error from the command prompt/terminal when you type npm i -g npm, I cannot say what is wrong but wish you luck in fixing your issue.

Again thanks to Bjarte Aune Olsen for opening the dialogue and for helping me figure this out.

Reply
1. Bjarte Aune Olsen says:
  
  2018-03-09 at 11:48
  
  Thanks for your feedback! I fixed the link to the node.js download page.
  
  Reply
Lauri says:

2018-04-02 at 16:04

It’s a shame you don’t have a donate button! I’d without
a doubt donate to this fantastic blog! I suppose for now i’ll settle
for book-marking and adding your RSS feed to my Google account.
I look forward to fresh updates and will talk about this blog with my Facebook group.

Chat soon!

Reply