HQ Live Server

💫 One tool to rule them all

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

Live Server Demo VSCode

Features

A Quick Development Live Server with live browser reload.
Quick start with any framework: Polymer, Svelte, Vue, React, Angular or plain js.
Supports metalanguages: typescript, coffeescript, sass, scss, less and pug.
No configuration is required.
Production build with a single click.
Start or Stop server by just a click from status bar or touch bar.
Hot Key control.
HTTP2/HTTPS support.
Customizable preferred Port Number and/or default browser.
Support for any browser (Eg: Firefox Nightly) using advance Command Line.
Support for Chrome Debugging Attachment (More Info).
Remote Connect through WLAN (E.g.: Connect with mobile)
Multi-root workspace supported.

Shortcuts to Build and Start/Stop Server

Open a project and click to Go Live from the status bar to turn the server on/off. Click Build button to make a production build.
Right click on a project file from Explorer Window and click on Serve project. .
Open a project file and right-click on the editor and click on Serve project.
Open a project and build it or start/stop server from a touchbar.
Hit (alt+H, alt+O) to Open the Server, (alt+H, alt+C) to Stop the server (alt+H, alt+B) to Build the Project and (alt+H, alt+R) to Build specific resource (You can change the shortcut form keybinding) [On MAC, cmd+H, cmd+O, cmd+H, cmd+C and cmd+H, cmd+B]
Open the Command Pallete by pressing F1 or ctrl+shift+P and type HQ Live Server: Serve project to start a server, type HQ Live Server: Stop Server to stop a server, HQ Live Server: Build project to make a production build or HQ Live Server: Build resource to make a production build of specific resource.

Installation

Open VSCode and type ctrl+P, type ext install hqjs.hq-live-server.

Note that you should have nodejs >= 12.10.0 installed as default in your system. You can do it with nvm

nvm i 12
nvm alias default 12

FAQs

How to access the server from Mobile?

After you pressed Go Live button server address will appear follow this address on your mobile device within your local network.
Are Multi-root workspaces supported?

Yes, you can run separate server instance for every project in your workspace.
Do I need to configure webpack or babel to start development?

No, you can press Go Live button and start development immediatly. Extension will take care of everything else.
Can I create production build without any configuration?

Yes, you can press Build button and production build will be created in a dist folder (please, note: all previous content of dist folder will be erased).
How to run server in HTTP2/HTTPS mode?

Create pair of certificate and a key in .pem format and put them somewhere inside your project. Server will automatically recognise them and start in HTTP2/HTTPS mode. For generating self signed certificates check this tool.

Settings

hqServer.defaultPort: Preferred Port Number for your Live Server.
- Default value is 8080.
hqServer.showOnStatusbar: Display Go Live button on the statusbar.
- Default value is true.
hqServer.browser.useBuiltinBrowser: Open in Browser Preview extension inside VS Code, instead of default browser.
- _Default value is false.
hqServer.browser.preferredBrowser: To change your system's default browser.
- Default value is "". (It will open your system's default browser.)
- Available Options :
  - chrome
  - chrome:PrivateMode
  - firefox
  - firefox:PrivateMode
  - safari
  - microsoft-edge
  - blisk
Not enough? need more? open an/a issue/pull request on github. For now, use hqServer.browser.browserCmdLine settings (see below).
hqServer.browser.browserCmdLine: To set your any favorite browser (Eg: Chrome Canary, Firefox Nightly) using advance Command Line. (You can specify full path of your favorite custom browser).
- This setting will override Preferred Browser and Attach Chrome Debugger settings.
- Default Value is ""
- Examples:
  - chrome --incognito --headless --remote-debugging-port=9222
  - C:\Program Files\Firefox Developer Edition\firefox.exe --private-window
hqServer.browser.attachChromeDebugger: To Enable Chrome Debugging Attachment to Live Server.
- NOTE: You must have to install Debugger for Chrome.
- If the value is true, Start Live Server and select 'Attach to Chrome' from Debug Window to start debugging. Debugger for Chrome Extension will inject debugging feature into running instance of browser window.
- Default value is false.

LICENSE

This extension is licensed under the MIT License