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
|
1 |
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:
|
1 |
C:\Users\[username]\AppData\Roaming\npm; |
The system wide path should contain this:
|
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:
|
1 2 3 |
<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
|
1 |
npm install -g live-server |
Run live-server from VSCode
In VSCode, right-click on index.html and select Open in console. In the console window, type
|
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.
Amazing, will try this at home! Thank you.
Works great! Exactly what I needed.
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?
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?
Thank you, works perfect!
Great! Thank you sir.
Thanks for this …. I am just about to quit from vs code but you save me …. Thanks again 🙂 and Happy Xmas
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?
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?
Yes, you can set Visual Studio Code to autosave.
Thanks, steps were easy to follow and now I have a web server!
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
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?
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?
Thank u, man! its work!