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
- Type command on a
html file: Browser Sync: Server mode at side panel
- Right panel will be opened with a web page enabling browser sync
- 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
With opening a folder
- Type command on a
html file: Browser Sync: Server mode at side panel
- 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.
- Type command on any kind of file:
Browser Sync: Proxy mode at side panel
- Type in the URL of the original website, e.g.
http://localhost:8080, or 8080
With opening a folder
- Type command on any kind of file:
Browser Sync: Proxy mode at side panel
- Type in the URL of the original website, e.g.
http://localhost:8080, or 8080
- 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
- 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.
- 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.
- Once the file is saved, the server notifies the website embedded inside the iframe.
Proxy for dynamic site
- 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.
- 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.
- Once the file is saved, the server notifies the proxy server embedded inside the iframe.
Enhancement Planning
- Better resource management
- Provide Better message to end user
- Better error handling
