Skip to content

Latest commit

 

History

History
121 lines (77 loc) · 4.71 KB

README.md

File metadata and controls

121 lines (77 loc) · 4.71 KB
Raw

Objective

Some of my friends ask me for similar requrest so I create this extension. It aims to integrate browser sync with VSCode to provide live preview of website.

Requirement

It can run without installing browser-sync and Node.js runtime becasues the extension containing the codes of browser-sync is running on a separated extension host node process.

Features

Although many enhancements can be done, the basic functions are finished. For any issue, you can leave a comment below or leave a issue at github.

Behaviour

The preview can be opened at the right panel and in the default browser in different command, and there are two modes: Server mode and Proxy mode.

  • Server mode: static html file
  • Proxy mode: dynamic website that has its own web server, such as php, jsp, asp etc ...

With opening or Without opening folder

  • With opening folder: watch the files you input in inputbox relative to the root folder
  • Without opening folder: watch all files with the same extension at the parent folder of opening document

Server Mode

Without opening a folder

server open at panel

  1. Type command on a html file: Browser Sync: Server mode at side panel
  2. Right panel will be opened with a web page enabling browser sync
  3. Once you save your change, the right panel will be changed. This feature also works if you enable auto save feature in VSCode.

You can also try the browser mode by command: Browser Sync: Server mode in browser

server open at browser

With opening a folder

server open at panel

  1. Type command on a html file: Browser Sync: Server mode at side panel
  2. Type the path of files you want to watch relative to the root folder

Proxy Mode

Without opening a folder

The image below is a Laravel web application hosted on a docker machine, the guideline don't just applies for Laravel, this also applied for other web application.

proxy open at browser

  1. Type command on any kind of file: Browser Sync: Proxy mode at side panel
  2. Type in the URL of the original website, e.g. http://localhost:8080, or 8080

With opening a folder

  1. Type command on any kind of file: Browser Sync: Proxy mode at side panel
  2. Type in the URL of the original website, e.g. http://localhost:8080, or 8080
  3. Type the path of files you want to watch relative to the root folder

Refresh Side Panel

Run command Browser Sync: Refresh Side Panel which acts like F5 in browser to refresh the side panel

Sometimes the page may crash and no <body> tag is returned, then the script of the browser sync cannot be injected and the codeSync will stop. In this situation,

Configuration

Add setting as JSON format into user setting or workspace setting to override default behaviour. The setting options come from here, please use the option for Browser Sync version 2.18.13

Example setting (different browser)

  • Open in different browser: chrome and firefox
  • Without code sync.

Note from issue: Use "google chrome" under window, "chrome" under Mac

{
    "browserSync.config" : {
        "browser" : ["chrome", "firefox"],
        "codeSync" : false
    }    
}

Example setting (relative path)

  • Relative path of the watching files to the workspace root
  • Can mix with absolute path
{
    "browserSync.config": {
        "files": ["*.html", "*.log", "C:\\Users\\jason\\Desktop\\db.txt"]
    }
}

How it works

Static HTML file

  1. Once the command is typed, a Node.js server will be started, it handle request of the HTML file, and listen to the changes of files.
  2. The right panel is a static HTML page but it looks like an embedded browser by containing an iframe with src pointing to the URL of the HTML file.
  3. Once the file is saved, the server notifies the website embedded inside the iframe.

Proxy for dynamic site

  1. Once the command is typed, a Node.js proxy will be started, it forward your request to the target URL with injecting the script in the returned HTML.
  2. The right panel is a static HTML page but it looks like an embedded browser by containing an iframe with src pointing to the URL of the proxy server.
  3. Once the file is saved, the server notifies the proxy server embedded inside the iframe.

Enhancement Planning

  1. Better resource management
  2. Provide Better message to end user
  3. Better error handling