Browsersync configuration

When you run the maizzle serve command, Maizzle uses Browsersync to start a local development server and open a directory listing of your emails in your default browser.

You can then make changes to your emails, save them, and watch the browser automatically refresh the tab for you.

Maizzle sets some defaults for Browsersync, but you can customize them in your config.js file.

For example, here's how you'd use a custom port number:

module.exports = {
  build: {
    browsersync: {
      port: 8080,
    }
  }
}

These are the defaults that Maizzle uses:

directory

Type: boolean
Default: true

When running maizzle serve with directory: true, Browsersync will open a file explorer in your default browser, showing root of the build_local directory.

If you set directory: false, the page opened by Browsersync will be blank, and you'll need to manually navigate to your emails directory.

notify

Type: boolean
Default: false

Toggle Browsersync's annoying pop-over notifications. Off by default ✌

open

Type: boolean
Default: false

Decide which URL to open automatically when Browsersync starts.

Can be true, local, external, ui, ui-external, tunnel or false

See Browsersync docs for details.

port

Type: integer
Default: 3000

Set a custom server port number - by default, your local development server will be available at http://localhost:3000

tunnel

Type: boolean|string
Default: false

When set to true, Maizzle will enable localhost tunneling in Browsersync, so you can live-share a URL to an email that you're working on right now, with a colleague or a client. Under the hood, localtunnel.me will be used.

Both parties see the same thing, and scrolling is synced, too.

You can also use a string instead of a boolean - for example tunnel: 'mybrand'. In this case, Browsersync will attempt to use a custom subdomain for the URL, i.e. https://mybrand.localtunnel.me. If that subdomain is unavailable, you will be allocated a random name as usual.

ui

Type: object|boolean
Default: {port: 3001}

Browsersync includes a user interface that is accessed via a separate port, and which allows control over all devices, push sync updates and much more.

You can disable it by setting it to false.

watch

Array of additional paths for Browsersync to watch. By default, the following paths are watched for file changes:

• all files in your project's src folder
• tailwind.config.js
• config.*.js

You may define additional file and folder paths to watch when developing locally:

module.exports = {
  build: {
    browsersync: {
      watch: [
        './some/folder',
        'some-file.js'
      ]
    }
  }
}

When a file in any of these watch paths is updated, Browsersync will trigger a full rebuild and changes will be reflected in the browser.