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.
- Just VSCode
- A web server supports proxy, php -S seems to has some issues with localhost
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.
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.
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
htmlfile - Proxy mode: dynamic website that has its own web server, such as
php,jsp,aspetc ...
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
Without opening a folder
- Type command on a
htmlfile: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
htmlfile:Browser Sync: Server mode at side panel - Type the path of files you want to watch relative to the root folder
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:https://localhost:8080, or8080
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:https://localhost:8080, or8080 - 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,
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
- 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
}
}- 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"]
}
}- Once the command is typed, a
Node.jsserver 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
srcpointing to the URL of the HTML file. - Once the file is saved, the server notifies the website embedded inside the iframe.
- Once the command is typed, a
Node.jsproxy 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
srcpointing to the URL of the proxy server. - Once the file is saved, the server notifies the proxy server embedded inside the iframe.
- Better resource management
- Provide Better message to end user
- Better error handling