Need Help? Watch Video Tutorial

[HELP! NEEDS A GOOD DOCUMENTATION #4]

A browser extension that helps you to live reload feature for dynamic content (PHP, Node.js, ASP.NET -- Whatever, it doesn't matter).

This extension is for Live Server (VSCode Extension - required v3.0.0+).

[all through you can use the npm package live-server]

• Firefox : https://addons.mozilla.org/en-US/firefox/addon/live-server-web-extension/

• Chrome : https://chrome.google.com/webstore/detail/live-server-web-extension/fiegdmejfepffgpnejdinekhfieaogmj/

It is a simple PHP project.

There are two ways to setup Live Server Web Extension.

[Note: live Server will not able to compile you dynamic pages, you've to use the existing server, live server will help you to reload the pages when you made any change on your code, so that you have not to reload manually browser on every changes]

1. Direct Setup (Easy One, stright-forword)
2. Proxy Setup

Watch Video Tutorial or follow the steps below

• Install the extension on your browser.

• Install VSCode Editor & Live Server Extension.

• Start Live Server (assuming the port of live server is 5500). This server will be used by the extension to know, if any of the files have changed.

• Open a terminal and navigate to the folder your project lives in (generally index.php lives here..) Start a web server by running php -S localhost:8000

• Now open pop-up menu of Live Server Web Extension and check the option I don't want proxy setup. Follow the screenshot.

• Now at the Actual Server add http:https://localhost:8000/.

• Now at the Live Server add http:https://localhost:5500/.

• Now open up http:https://localhost:8000/ in your browser. On every changes, your page will be refreshed automaticly.

• Install the extension on your browser.

• Install VSCode Editor & Live Server Extension.

• Confiure Live Server settings (.vscode/settings.json) as follows :

  //.vscode/settings.json
  
  {
      // Mainly for static files
      "liveServer.settings.useWebExt": true,
  
      /*
          If you have dynamic pages (PHP), you have to setup proxy - it's pretty easy. 
  
          In easy word, it means you're shifting your real url (actual PHP url) 
          to another url (which LiveSever will start).
      */
      "liveServer.settings.proxy": {
          "enable": true, //switch on :)
          "baseUri": "/", //from where you want to proxy (live server).  
          "proxyUri": "http:https://127.0.0.1:80" //the actual server url (NOT live server).
      },
  }

  • ...And you're done! Just Open Live Server (ctrl+shift+p > "Open Live Server") and don't forget to turn on live reload from your browser.
  • Note: You have stay on the new url that will be given by Live Server.

• Verision 1.0.0 (26.10.17)

  • [New Feature] No need to setup proxy. There is now a way to setup - that is pretty easy & straight-forward.

  • [Enhancement] Pop-up window is redesigned.

  • [Bug Fixes] Small bug fixes related to the turn on/off switch.

  • No BETA. General Release.

• Version 0.0.1 (22.10.17)

  • Initial Release under BETA.

This extension is licensed under the MIT License