> For the complete documentation index, see [llms.txt](https://coldbox-elixir.ortusbooks.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://coldbox-elixir.ortusbooks.com/browsersync.md).

# BrowserSync

[BrowserSync](https://www.browsersync.io/) 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:

```javascript
const elixir = require("coldbox-elixir");

module.exports = elixir(mix => {
    mix.browserSync();
});
```

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

```bash
[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:

```javascript
const elixir = require("coldbox-elixir");

module.exports = elixir(mix => {
    mix.browserSync({
        proxy: "localhost:50608"
    });
});
```

Running `webpack -w` will now open up `localhost:3000` which proxies to your app! No need for that BrowserSync script tag anymore!

## Default Options

We define a number of default options for BrowserSync:

```javascript
{
    host: "localhost",
    port: 3000,
    proxy: "http://localhost:8888",
    files: "**/*"
}
```

The can be overridden by passing in an options object as the only parameter (as seen above with `proxy`).

## Custom Options

In addition to the `proxy` option, you may pass any BrowserSync option here as the only argument. A list of the BrowserSync options can be found [here](http://www.browsersync.io/docs/options/).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://coldbox-elixir.ortusbooks.com/browsersync.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.