ColdBox Elixir
v2.x
v2.x
  • Introduction
  • Overview
  • Changelog
  • Installation
  • Running Elixir
  • Configuration Options
  • Working With Stylesheets
  • Working With Scripts
  • Versioning Cache Busting
    • ColdBox Helper Methods
  • Mixing in tasks from ColdBox Modules
  • Copying Files & Directories
  • Deleting Files & Directories
  • Executing Command Line Binaries
  • Calling Gulp Tasks
  • Custom Watchers
  • BrowserSync
  • Vue.js Integration
  • Writing Elixir Extensions
Powered by GitBook
On this page
  • Specifying a Proxy
  • Custom Options
Edit on Git

BrowserSync

PreviousCustom WatchersNextVue.js Integration

Last updated 6 years ago

automatically refreshes your web browser after you make changes to your front-end resources. You can use the browserSync method to instruct Elixir to start a BrowserSync server when you run the gulp watch command:

elixir( function( mix ){
    mix.browserSync();
});

After running this command you will see directions to add a script tag to the bottom of your website like this:

[BS] Copy the following snippet into your website, just before the closing </body> tag
<script id="__bs_script__">//<![CDATA[
    document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.2.12.5.js'><\/script>".replace("HOST", location.hostname));
//]]></script>

Add that snippet to your layouts/Main.cfm file and reload to enable BrowserSync!

Specifying a Proxy

Instead of copying the script tag into you app, you can tell BrowserSync to proxy your existing CFML server:

elixir( function( mix ){
    mix.browserSync( {
        proxy : 'localhost:50608'
    } );
} );

Running gulp watch will now open up localhost:3000 which proxies to your app! No need for that BrowserSync script tag anymore!

Custom Options

In addition to the proxy option, you may pass any BrowserSync option here as the first argument. A list of the BrowserSync options can be found .

BrowserSync
here