ritwickdey / vscode-live-server

Launch a development local Server with live reload feature for static & dynamic pages.

[Wanna try LIVE SERVER++ (BETA) ? It'll enable live changes without saving file. https://github.com/ritwickdey/vscode-live-server-plus-plus ]

Live Server

Live Server loves 💘 your multi-root workspace

Live Server for server side pages like PHP. Check Here

[For 'command not found error' #78]

Launch a local development server with live reload feature for static & dynamic pages.

Shortcuts to Start/Stop Server

[NOTE: In case if you don't have any .html or .htm file in your workspace then you have to follow method no 4 & 5 to start server.]

1. Open a project and click to Go Live from the status bar to turn the server on/off.

2. Right click on a HTML file from Explorer Window and click on Open with Live Server. .

3. Open a HTML file and right-click on the editor and click on Open with Live Server.

4. Hit (alt+L, alt+O) to Open the Server and (alt+L, alt+C) to Stop the server (You can change the shortcut form keybinding). [On MAC, cmd+L, cmd+O and cmd+L, cmd+C]

5. Open the Command Pallete by pressing F1 or ctrl+shift+P and type Live Server: Open With Live Server to start a server or type Live Server: Stop Live Server to stop a server.

Features

• A Quick Development Live Server with live browser reload.
• Start or Stop server by a single click from status bar.
• Open a HTML file to browser from Explorer menu.[Quick Gif Demo].
• Support for excluding files for change detection.
• Hot Key control.
• Customizable Port Number, Server Root, default browser.
• Support for any browser (Eg: Firefox Nightly) using advance Command Line.
• Support for Chrome Debugging Attachment (More Info). [Quick Gif Demo].
• Remote Connect through WLAN (E.g.: Connect with mobile) [Need Help? See FAQ Section]
• Use preferable host name (localhost or 127.0.0.1).
• Customizable Supporting Tag for Live Reload feature. (Default is Body or head)
• SVG Support
• https Support.
• Support for proxy.
• CORS Enabled
• Multi-root workspace supported.
• Support for any file even dynamic pages through Live Server Web Extension.

Installation

Open VSCode and type ctrl+P, type ext install ritwickdey.liveserver.

Settings

All settings are now listed here Settings Docs.

FAQs

All FAQs are now listed here FAQ Docs

What's new ?

• Version 5.6.1 (17.04.19)

  • Fixed Extension host terminated unexpectedly [#431]

• Version 5.6.0 (17.04.19)

  • [NEW] Intregation of Browser Preview with Live Server [#352 - Thanks to Kenneth Auchenberg]
  • [NEW] Fallback to random port If given port is busy. [#330 - Thanks to Ali Almohaya ]
  • [FIXES] Moved to vscode-chokidar lib for #285.
  • Doc Fixes [#388 - Thanks to Ted Silbernagel]

• Version 5.5.1 (12.02.19)

  • [Fixes] Fixed Extension host terminated unexpectedly for MacOS. [#285]

• Version 5.5.0 (12.02.19)

  • [Fixes] Fixed ignoreFiles settings [#255]
  • Attempt to fix high cpu load [#278]

Changelog

To check full changelog click here.

Special Thanks To Maintainers

A special thanks to Max Schmitt, Joydip Roy & Ayo Adesugba for contributing their valueable time on this project.

LICENSE

This extension is licensed under the MIT License

vscode-live-server's Issues

Can I do a URL rewriting?

Hi I am using this plugin and it has saved me a lot of troubles. Thanks.
I want to know if there is a way to do a URL rewriting so that my app can always be run through the index.html like .htaccess in apache server

Live Server Extension should prompt a message if no body or head or other supporting tag is detected in HTML.

If there are no body or head or other supporting tag in html, live-server will not able to inject the extra javascript code (for live reloading). In that case, this extension should prompt a message.

Enable setting of launch switches on the browser

Hi there,

I commend your effort on creating this v nice/useful extension. Hey, can you consider allowing users to set launch switches on the custom browser setting? i.e. "liveServer.settings.CustomBrowser": "chrome --remote-debugging-port=9222". This will add further usefulness, as it will now also enable chrome debugging from within VSCode via attaching to the running Chrome browser (as supported by the VS Code debugger for Chrome). What do you think?

Support for Multiroot-Workspace

I have two folders (slide by side). D;/www/WorkBench and D:/www/WebView
They are both part of the same VSCODE Workspace (VS code V 1.18.1)

When I press The status bar "Go Live) it always starts me out in the WorkBench folder.

If I right click on the HTML file for www/WebView/webview.html

spawns chrome in the WorkBench folder.

How to change Port from 127.0.0.1:5500 to localhost

Where is the settings to change port from 127.0.0.1:5500 to localhost

Is it possible to preview HTML within vscode side-by-side

That will be very convenient.

Is there anyway to set delay before reload?

Awesome plugin!
I face a problem, I use webpack to generate js file, and the html use its budled js. but I find I should reload twice to see the changes, I think live-server reload when bundle.js deleted. Is there anyway to set delay before reload? like 1s.
Thanks a lot.

Cannot GET/

Hi, I seem to be having problems previewing my files located in subfolders. I always get this message:

However, I don't have any problems opening html files which is located directly inside the main folder.

Startup page

Even if I have a html page opened in the acive editor form an other folder, "Go Live" will serve the file with the same name from workspace root.

appModel.ts (114): let rootPath = WorkSpacePath ? WorkSpacePath : documentPath;
Will WorkSpacePath ever be null?

Seeing CPU Spike for code helper once clicking go live

Code helper cpu % goes from a calm idle to 140-160%

• Running latest vscode on Mac OS High Sierra.

• Seeing this on both a laravel and node js project.

• turn off the extension and cpu drops immediately

• vscode without using live server does not use much resources

live server issue

First i open my html file.
click on live
opens 5500
but my html file is not there .Whenever i click on live it goes to same location . I dont know what to do.

Live Server does not display graphics

When I open the server, and let the settings untouched or set the root of the server it is not displaying images an graphical elements.

CSS File Doesn't Update Even After Reloading

CSS only updates if it's used inside html file.
if css file is in another folder, live-server doesn't see it. The first time I put the css file in the same folder with html, it updated the browser but later making changes in css file didn't take effect. Looking in the chrome dev-tools, there was no change in the css.

Win10
VS Code 1.14.2
Chrome 60
Chrome Canary 62

Browser page up(move to the top) after update.

Hi there.

Every time i save the css file, the browser update and page up to the top, losing focus of editing area. E.g. i'm working on the footer, save the css file and the browser move to the top.
I'm using no settings.json configuration file.
Probably there is something wrong in my side, but i don't know where it is.

Thanks.

My setup: Windows 10, VS Code 1.18

Use more specific `activationEvents`

This extension is activated all the time. As a result, the status bar item is always visible.

I think we can use multiple activationEvents like "workspaceContains: **/*.html", "workspaceContains: _config.yml" and something else.

LiveServer running really slow on website root and won't close down

I have a QNAP NAS which I use as a webserver.
I have a number of projects under the main root folder
VSCode and live server runs fine if I open a project under the root folder.

However when I used the root folder as the vscode folder and on the root folder I created an index.html file , when I launched this it took ages to load, doesn't respond to changes (or if it is it is taking forever) and I couldn't stop the live server. I closed down Chrome and still couldn't close the server down.

An error bar popped up: Running the contributed command:'extension.liveServer.goOffline' failed.

Very helpful, not.

Now the NAS is open to the internet, but I can't understand why it is fine on sub folders, but not on the rootfolder.

I have rebooted my laptop and tried again, I have cleared the cache in chrom (I use an extension to do this as well).

Any thoughts or suggestions as to what I could look at.

It's not a deal breaker as I can run the page the old fashioned way. Oh I am using index,html (there is also an index.php there - but it's a QNAP thing?) uhmmm?

Using Chromium and Chrome Debugger On Linux

UPDATE! I got your extension to open Chromium OK and connect to the debugger :):

Maybe you could comment if I did this the best way, and also if there is a way for the Chromium tab to close when the live-server connection is closed? THANKS.

"liveServer.settings.AdvanceCustomBrowserCmdLine": "/usr/bin/chromium-browser --remote-debugging-port=9222"

{
    "version": "0.1.0",
    "configurations": [
        {
            "name": "Attach",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "url": "http://127.0.0.1:5500/",
            "webRoot": "${workspaceRoot}"
        }
    ]
}

Hello,

I am trying to use live-server and chrome debugger on Linux with Chromium. If I want to use Chromium rather than Chrome in the debugger my settings used to look something like:

{
    "version": "0.2.0",
    "configurations": [{
        "type": "chrome",
        "runtimeExecutable": "/usr/bin/chromium-browser",
        "runtimeArgs": [
            "--remote-debugging-port=9222"
        ],
        "request": "launch",
        "name": "Chromium against localhost",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceRoot}",
        "sourceMaps": false,
        "smartStep": false
    }]
}

but in live server when I try to make it open changing the preferences to:

"liveServer.settings.ChromeDebuggingAttachment": true,
"liveServer.settings.CustomBrowser": "chrome",

then nothing happens as live-server can't know to open Chromium.

Can you add an option for Chromium, or is there something I can do? If I type 'chromium' on my command line it does not run at the moment as it's not in the PATH. I can fix that if needed, but being able to point to the executable in your extension could be cool too.

Cheers!

live server ' freezes' after update vscode 1.18

HI,

Love the live server. The best preview option for vscode. Only after the latest update of vscode, the server freezes. It happens after 2 or three times I save a file. I also can't stop the server and need to close vs code and choose an other port. Because the original one is occupied.

I am working with windows 10.

Do you know about this issue?

thnx Daniel

Possibility of add custom host

Would be nice to have a possibility of add custom host. E.g you can access to the Mac from other by using a hostname which ends with '.local' e.g. 'http://my-mac.local:5500'. Right now you also can do this, but you cannot set the custom hostname in settings 'liveServer.settings.host' as default.

Is it possible to make the server available ouside?

Is there any way to make Live Server available to other computers in my network? Supplying a "0.0.0.0" setting, maybe?

How to remove Live reload enabled from console?

Hi men this is a awesome extension but where I do remove Live reload enabled? every time I save my js file that message shows in the console

support path/file/extension/regexpr based exclusion

due to some files(scss) are complied outside of vscode
once we change a scss file then Koala(http://koala-app.com/) will compile scss to target css
but vscode-live-server monitoring every file changes,
so browser will refresh twice, one for scss the other for compiled css

NOTE:
we did try your Live Sass Compiler to compile https://github.com/Dogfalo/materialize/releases/download/v0.100.1/materialize-src-v0.100.1.zip
but it gave me a syntax error

Basic Routing

Replicating ritwickdey/live-server-web-extension#5 as I originally created it in the wrong repo:

If I were to use this to develop a SPA, I would need to be able to ensure all routes are redirected to index.html (unless the file otherwise exists, i.e. for stylesheets and js files). Then I can use something like page.js (or whatever framework is the flavour of the month) to handle routing.

Error on port 5500

I've only been using vs code for about a week now. Just when I've started to get used to it I'm getting a error on port '5500 please change in settings' alert when I attempt to use the live server extension.

Getting error, if we double click very fast on "Go Live" button

As of the current implementation, if we double click on the "Go Live" button very fast. Two async process starts immediately and causes error.

Always show "Live Reload is not possible as body or head tag or defined tag is missing in HTML"

When I save the file, it always shows "Live Reload is not possible as body or head tag or defined tag is missing in HTML"

browsersync browser not open..

[12:43:47] Starting 'js'...
[12:43:47] Starting 'sass'...
[12:43:47] Starting 'fa'...
[12:43:47] Starting 'fonts'...
[12:43:47] Finished 'fa' after 232 ms
[12:43:47] Finished 'js' after 317 ms
[12:43:48] Finished 'fonts' after 502 ms
[12:43:49] Finished 'sass' after 1.51 s
[12:43:49] Starting 'serve'...
[12:43:49] Finished 'serve' after 139 ms
[12:43:49] Starting 'default'...
[12:43:49] Finished 'default' after 40 μs
[Browsersync] Access URLs:

   Local: http://localhost:8080
External: http://192.168.1.101:8080

---

      UI: http://localhost:8081

UI External: http://192.168.1.101:8081

[Browsersync] Serving files from: ./src

browser not open...

when i made changes

**
* Decide which URL to open automatically when Browsersync starts. Defaults to "local" if none set.
* Can be true, local, external, ui, ui-external, tunnel or false
* @Property open
* @type Boolean|String
* @default true
*/
open: ""local",

TO

**
* Decide which URL to open automatically when Browsersync starts. Defaults to "local" if none set.
* Can be true, local, external, ui, ui-external, tunnel or false
* @Property open
* @type Boolean|String
* @default true
*/
open: false,

Multi-root Workspace support

When running multi-root workspaces with 2 or more folders, launching Live Server would only display files from the 1st folder. How can we access the other folder directory to view a file?

How to force opening a static page over https?

Hello and thanks for your nice extension.
I needed to open a HTML file with some WebRTC functionality but that needs serving the page over HTTPS or functionality is refused by browser.
How to do that?

Code Helper Overloads CPU

Hi! Your plugin causes cpu overload in this code https://github.com/user921/live-server-cpu-overload.

• vscode 1.16.1 (1.16.1)
• macOS Sierra 10.12.6

Process "Code Helper" begins to overload just right after I press "go live".
Looks like this is similar to microsoft/vscode#11096

Bug in `ChromeDebuggingAttachment` settings

Very nice tool.

Is it possible to use the VSCODE attach to the live server? Or to Launch the Live server from the launch.json . If so , how does one do that? Or is there a fundamental limitation that I have to use the Chrome Debugger (which I really don't mind, I just wanted to see if I could use the VSCODE debugger also).

Launch.json

{
    "version": "0.2.0",
    "configurations": [

        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Live Server",
            "url": "http://localhost:5500/WorkBench/Workbench.html",
            "webRoot": "${workspaceRoot}"
        },
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Live Server",
            "port": 5500,
            "webRoot": "${workspaceRoot}"
        }
    ]
}

showing this error in vscode live server

live server doesnt update changes to the browser result

Hi, Im able to view the html page on my browser when I start the server. However, when Im starting to edit the html file, the changes were not reflected on the browser on live basis.

Am I doing it wrong? Or am I missing any other extensions that are required to make the live update works?

Background:

• OS: OSX Sierra
• Live Server Preview 0.0.4
• Safari browser
• Port: 3500

live server issue

How can I open liverServer.settings.port
Whenever i go live on a particular HTML file it goes to some directory that i don't know.

Add browser support for Blisk

https://blisk.io/

I am not affiliated with Blisk.

I've been using it for a day and really appreciate it's features. It's a Chromium based app so there shouldn't be any compatibility issues.

Browser Does Not Open After Going Live

I am running Ubuntu on Virtual Box. After installing the extension on VS Code and hitting Go Live,
it prompt me with two messages: one is: "Server is started", the other is: "Error to open browser. See error on console".
Please note that the server is successfully started and I verified that it is working by typing the IP Address on my Google Chrome.

Support for Live Reload feature if there are no body or head tag in HTML

Currently Live Reload feature can't be possible if there're no <body> or <head> tag.

Exclamation point in anywhere in the path name will prevent reloading

This seems to be a general issue with all (at least with the ones I've tested) of the live preview extensions for VS Code, so it's not directly related to this extension in particular.

If you remove all exclamation points in any of the folders containing your files, live preview works fine.

Just wanted to let you know, because it took me a good portion of time to find out why none of the live preview extensions, including yours, didn't work for me.

Can you set up live reload for websites that are already hosted on a remote server?

Let's say I am using a server for development that is hosted with Bluehost etc. The domain pointing to it is 'abc.xyz'. Can I set up the live server such that my browser reloads every time I save the file in VSCode (I am using ftp-simple to edit files directly on the server)?

Thanks in advance.

Add Shortcut on Explorer Context Menu.

Ability to open a html file directly from Explorer window .

Launch with Firefox Developer Edition? [Bug in AdvanceCustomBrowserCmdLine]

Hi.
Is it possible to launch the Live Server browser with Firefox Developer Edition?
Maybe it would be nice if the extension could parse the settings string and just launch the exe if an exe location is specified instead of a browser name.

Error to open browser

Hello, thank you for your hard work! I am having a minor issue, with Live Server 1.6.5. When I open live server it gives me the "Error to open browser" It does work, just does not open the window like it should. I have to open the browser of my choice manually and go to the http://localhost:5500/. I am on Chromium Version 59.0.3071.109 (Developer Build) Built on Ubuntu , running on Ubuntu 16.04 (64-bit).
Making a .vscode folder with settings.json file to Firefox has the same result. index.html is at the root of the folder and not inside any other folders.
{
"liveServer.settings.CustomBrowser" : "firefox"
}

About of 'gbk' charset

while the html is 'gbk' charset, the preview will not work well, the chinese word do not display correctly;

php file not working live

every time I click php file , it starts download on windows in liveserver

https://imgur.com/stJzoBS
and also open with live server option is not coming
https://imgur.com/Vi6NsFx

"Live Reload is not possible as body or head tag or defined tag is missing in HTML" warning shows on every reload

Every time I save a watched file, my page reloads, but in VS code the warning appears "Live Reload is not possible as body or head tag or defined tag is missing in HTML". I have to close the warning every time (very annoying) and there is no option to disable this warning.

Why there are injected codes in my files?

It is strange there are some codes changed my page.
And they are commented with
<!-- Code injected by live-server -->
Why there is code injection？
How can I fix it？

alt+l key binding breaks '@' symbol on German keyboards

This extension is the one I was looking for so long 😃 Very excellent and it works seamlessly. Thanks a lot!

Unfortunately the default keybindings to start and stop the server break the @ symbol on German keyboards - which is located on alt-l. I had to counter the bindings in my settings with:

[
    {
        "key": "alt+l o",
        "command": "-extension.liveServer.goOnline",
    },
    {
        "key": "alt+l c",
        "command": "-extension.liveServer.goOffline",
    }
]

As I am working mostly with Students new to the field this is rather cumbersome. Would there be a way to introduce the keybindings as optionally?

How do I change default directory of Live Server?

When I run the live server, it basically points to the default directory instead of letting me choose on which file to run the live server. I need a way such that i can get to choose which file to run on the live server(ie it may be saved anywhere on my computer and I should be able to run it!).

How to serve from the folder root but update ONLY when files in /dist are updated?

**UPDATE! I forgot the obvious, which was to exclude the source directory!

"liveServer.settings.ignoreFiles": [
        "src/**"
    ]

Thanks for the amazing work you have done!

My root directory contains index.html, so live-server is working fine with defaults BUT I only want to trigger live-server when my bundler has finished compiling the files.

My problem is that I am using rollup which has it's own watch mode. When I update a file then it triggers rollup to start compiling my files into dist/bundle.js and dist/bundle.css. These are the files I want to be served while I program:

<link rel="stylesheet" href="/dist/bundle.css">
<script src="/dist/bundle.js"></script>

The initial file change of the source file triggers live-server and it serves the OLD version of the bundle file before it is compiled!

I want to keep my root where it is, but ignore everything apart from the contents of /dist. That way when the compilation is finished then live-server can serve the correct files.

I can see in the preferences:

// To ignore specific file changes
  "liveServer.settings.ignoreFiles": [
    ".vscode/**",
    "**/*.scss",
    "**/*.sass"
  ],

but i don't want to have to manually type in every directory that is not /dist in every project. How do I ignore all files and folders APART from the contents of /dist?

Many thanks!

Runs nicely but wont to refresh changes in live(

I trying start server and instance runs good) also for smartphone but i cant to use all of features provided because it DONT WANT to refresh instantly and in-live my changes into project... and also i see the (maybe, im not sure of "FORBIDDEN" icon like circle with diagonal line) in status line on bottom of workspace.
What can i do to fix this?

Pretty thanks you! However, u made nice addon and cured my brain-pain.

P.S. Wrote offhand. Have without no doubts ugly english skills. But if not, u can assure me with this youself.