Live Server: Feature request

[ModernWebService]

This a feature request for a live server or live reload equivalent extension that can refresh or display love code without having to push cmd+r /ctr+r every time.

[mjbvz]

Closing as a duplicate of #15614

[schmuli]

@mjbvz If I understand correctly, this is not related to #15614, the OP is asking for a Hot Reload/Live Reload extension in VSCode, useful when working with JS, CSS and HTML in a browser.

For example: https://www.google.com/#safe=off&q=hot+reloading

I don't know if this is something that the VSCode team is interested in, but please re-evaluate closing this issue if so.

[mjbvz]

@schmuli Thanks for the clarification. Reopening as this is a different use case.

[kieferrm]

@ModernWebService @schmuli you are talking about extension development, correct? I.e. I launch a new instance from the workspace that contains the code for my extension. When I now make changes to the code, you want the launched instance to pickup those changes without the need to reload the window.

[ModernWebService]

Thank you @schmuli. @kieferrm @weinand What I mean in the initial post was an extension (whether it be in the side bar with the debugger, file search, etc. That when called, you can have a server started that will display your code in the browser and then once you save changes, the browser is forced to refresh. Other editors achieve this by using a plug named atom-live server in Atom and browser sync or livereload in sublime text, or there is Brackets live preview.

Granted this is not a make or break feature for me cause I can use gulp live reload, it is a feature I feel would benefit most developers when working on things like the UI. As of now I know of express server in the extensions market but that only host your project on a random port and does not provide a refresh or live preview.

Hope that clarifies the request more.

[weinand]

This feature does not seem to be related to extension development.
@roblourens Is this feature just live edit for the "Debugger for Chrome"?

[roblourens]

I think this is not 'live edit', just reloading the page when a file is changed. You can use browser-sync or any other similar tool which is what I would recommend. It could also be covered by an extension, live atom-live-server.

[ModernWebService]

Yes Rob, I was trying to refer to atom live server. It literally serves your html is php etc in a local a server and then reloads/refreshes anytime you save a change. Cuts down time of having to click refresh or keyboard commands. And like I said before while you can use gulp to load a live server script it isn't always as fast. I've used express server from the marketplace with vs code and enjoy using that however that doesn't have the refresh option. It is one thing I think vs code users could benefit from. On Dec 19, 2016 20:49, "Rob Lourens" <notifications@github.com> wrote: I think this is not 'live edit', just reloading the page when a file is changed. You can use browser-sync or any other similar tool which is what I would recommend. It could also be covered by an extension, live atom-live-server. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#17081 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AXJrhE2qbhHOhNo7XNtVwaIftgmqK2Vcks5rJzQ-gaJpZM4LKs4U> .

[roblourens]

It sounds like atom-live-server just gives you a keyboard shortcut for live-server https://www.npmjs.com/package/live-server which you can use on its own with vscode too.

[ModernWebService]

I will try this once I'm back in front of the computer. My intentions of this post was to raise the idea of integrating it into the editor as a suggestion to further the project and add to the user experience. I will definitely take a look at that combination though and see how it works in my development On Dec 19, 2016 21:14, "Rob Lourens" <notifications@github.com> wrote: It sounds like atom-live-server just gives you a keyboard shortcut for live-server https://www.npmjs.com/package/live-server which you can use on its own with vscode too. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#17081 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AXJrhAstZ-WlNxmlfVxCp_gvcFnnK8eRks5rJzohgaJpZM4LKs4U> .

[Fred-Vatin]

I seems #12080 is a duplicate of this one.

Live Reload feature is a must have when you design a site and the competitors have it.

Since Code wants to stay light, I would suggest the team produce an extension that may embed BrowserSync. It would add at least 3 commands:

1. Open the current project on the server
   • If the project have an index.html file, go for it
   • Else if there is only one other html file, take it
   • Else throw error
2. Open the current html file and automatically add its ressources (CSS, JS) to the files list survey.
3. Stop server

[architchandra]

Any update on when this would be implemented or any alternatives? I use Browser-Plus for this in Atom. Any similar extensions for VSCode? I tried to find but couldn't.

[jonaskuske]

Interested in updates on this as well, having to open Dreamweaver for easy-to-use live preview is quite cumbersome...

[ritwickdey]

An extension 'Live Server'. Please give a try 😄.
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

[amc123-glitch]

@ritwickdey That is a nice extension, would still be nice to have something like live reload that I can use when needing to use a server or command line tool to run the project. Example, Laravel has php artisan serve and then you can add browser sync but you can also just turn on liverload in other editors and your browser and it'll do it without any configuration required.

[ritwickdey]

Hi, @AnthonyMichaelc. That is on the way 😃.

Demo:

I'm testing a normal php project.

[amc123-glitch]

@ritwickdey Would definitely like to know more about that extension. Let me/us know how it goes. Like if it loads its own server or it will work on something like mamp, php artisan serve, npm server command, etc

[vscodebot]

This issue has been closed because it is not within the scope of the core product, but could be addressed by an extension. The VS Code Marketplace shows all existing extensions and you can get started writing your own extension in a few simple steps. See also our issue reporting guidelines.

Happy Coding!