Using BrowserSync during Development to Live Reload Changes

Brower Sync is a NodeJs based tool that can automatically reload the active page in the Web browser when you make a change to a file in your development Web folder. This is generally known as Live Reload for Web development.

If you have Browser Sync installed you can use it with the following commands:

*** For IIS
DO Launch with "BROWSERSYNC"

*** For IIS EXPRESS
DO Launch with "BROWSERSYNCIISEXPRESS" 

Browser Sync runs a command line application in a background console window. For more info on running Browser Sync with Launch.prg please see the Launch.prg topic.

What is Browser Sync?

The idea behind Live Reload is that you can much more quickly edit files in your site, and immediately see the change reflected in the browser without having to explicitly navigate or refresh the browser - the browser auto-refreshes after a saved change is detected. This works for all client resources including HTML, CSS, JavaScript and Web Connection Scripts.

You can basically have your code and a live browser window side by side and as you make changes and save, you immediately see the result of your change reflected in the browser. It's a very efficient way to work.

Requirements

In order to use Browser Sync you need to install it which involves a few bit of kit:

Check for Node and NPM

So you start by making sure that NodeJs is installed and working. You should be able to go to a Windows command prompt and type:

node --version
npm --version

Install Browser Sync

If these commands work, Node and NPM are installed. If not you'll have to install it. NPM is part of the Node Installation so it's a single install. You can then run:

npm install -g browser-sync

Running BrowserSync

Browser Sync is a command line utility but it's integrated into the Launch.prg functionality in Web Connection which makes it easier to launch.

Browser Sync acts like a Proxy in front of your IIS or IIS Express WebSite and then exposes a separate URL on localhost:3000 to access your Web site. Launch.prg handles loading your side (in the case of IIS Express), starting Browser Sync and then navigating the browser to the proper Web page at localhost:3000.

The easiest way to do this is to simply use the generated Launch.prg in your project and run one of the following commands:

*** For IIS
DO Launch with "BROWSERSYNC"

*** For IIS EXPRESS
DO Launch with "BROWSERSYNCIISEXPRESS" 

Once Browser Sync has been loaded you shouldn't load it again until you're ready to close it and restart it. Only one instance can run at a time. So if you need to restart your FoxPro server you can just do one of the following:

*** Traditional Server Launch
DO MyAppMain.prg   && or MyApp.exe if you run your project

*** Using Launch.prg
DO Launch with "NONE"

How does the FoxPro Integration work?

As mentioned Browser Sync is a standalone NodeJS executable that's executed from the Windows Command line and launch.prg simply automates that process. The code simply creates the desired command line to execute and then simply uses the FoxPro RUN command to execute it.

Note that Browser Sync will keep open a Windows Console window on the desktop. When you're done with it simply close the Windows Console window.

To get an idea what Launch.prg does here's the semi generic code to launch Browser Sync that gets generated into a typical project:

************************************************************************
*  BrowserSync
****************************************
***  Function: Live Reload of Web Browser on save operations
***            for files in the Web folder. Make a change,
***            save, and the browser reloads the active page
***            Typically runs on:
***            http://localhost:3000/<%= pcVirtual %> 
***    Assume: Install Browser Sync requires Node/NPM:
***            npm install -g browser-sync
***            https://browsersync.io/
***      Pass: lcUrl   -  your local Web url
***            lcPath  -  local path to the Web site
***            lcFiles -  file specs for files to monitor
***            llLaunchBrowser - if .T. launches the browser
***            all parameters are optional
************************************************************************
FUNCTION LaunchBrowserSync(lcUrl, lcPath, lcFiles, llLaunchBrowser)
LOCAL lcBrowserSyncCommand

IF EMPTY(lcUrl)
   *** Using IIS
   lcUrl = "localhost/MyApp"

   *** Using IIS Express
   lcUrl = "localhost:7000"
ENDIF


IF EMPTY(lcPath)
   lcPath = LOWER(FULLPATH("..\web"))
ENDIF
IF EMPTY(lcFiles)
   lcFiles = "**/*.tp, **/*.wcs,**/*.wc, **/*.md, css/*.css, scripts/*.js, scripts/*.ts, **/*.htm*"
ENDIF

lcOldPath = CURDIR()
CD (lcPath)

* start - removed auto-start
lcBrowserSyncCommand = "browser-sync start " +;
                       "--proxy " + lcUrl + " " + ;
                       "--files '" + lcFiles + "'"
                       
RUN /n cmd /k &lcBrowserSyncCommand

WAIT WINDOW "" TIMEOUT 1.5
CD (lcOldPath)

ENDFUNC
*   BrowserSync

Pretty simple, right?

How does BrowserSync work?

To work with Web Connection BrowserSync has to be used in Proxy mode, which means BrowserSync uses a custom URL (typically http://localhost:3000) and then forwards that request to your actual Web server on IIS or IIS Express. The proxy injects JavaScript into the page that lets the Browser Sync console app communicate with a small service inside of the JavaScript payload using WebSockets. When Browser sync detects a file change, it sends a message to the injected socket in the browser which then forces the page to get reloaded via a standard browser refresh.

The good news is that as a user you don't need to understand how it works - you can just partake in the magic of Live Browser Reload any time you make a change to a file on disk.

Troubleshooting

As cool as this tool is, it has a few issues that pop up infrequently.

Slow Downs or Pages not Refreshing

If you use BrowserSync for a while you may find that refreshing of pages - even manual refreshes - get really slow. This is usually caused by browser-sync getting out of sync with requests and failing to properly refresh pages. It doesn't happen often but it does happen.

To fix, shut down the Browser Sync command window and then restart it with DO Launch with "BrowserSync" again. Once you do this connections and refreshes should be quick again.

No Windows/Basic Authentication

Any pages that require Windows authentication don't work with Browser-Sync as it doesn't understand the protocol. This means you can't access Web Connection admin pages. However, if you use application authentication with standard Web Forms and cookies, those work just fine with Browser sync.

To get around this limitation, for admin pages use the 'real' Web site URL rather than the Browser-Sync proxy pages.

More Info in Blog Post

I wrote up a more detailed discussion on Browser-Sync and Web Connection in a blog post:

See also

Live Reload Server for Auto-Reloading when Code is changed

© West Wind Technologies, 1996-2019 • Updated: 05/06/19
Comment or report problem with topic