Dev server

Maizzle includes a dev server for local email development. It can watch your Templates and other files, and immediately update them in the browser as you make changes.

hmr

Type: Boolean
Default: true

Enable Hot Markup Replacement™ for the dev server.

When true, changes you make to Templates, Components, config files etc. will be instantly reflected in the browser without a full page reload.

You may disable HMR and force a page reload by setting this to false:

export default {
  server: {
    hmr: false,
  }
}

watch

Type: Array
Default: []

An array of paths (which can be globs) to watch for changes. When a file in one of these paths changes, the dev server will update the preview in the browser.

By default, Maizzle watches these paths:

• all Template, Component, and Layout paths
• config*.js
• maizzle.config*.js
• tailwind*.config.js
• **/*.css

You may add more paths to watch:

export default {
  server: {
    watch: ['./src/example/**/*'],
  }
}

port

Type: Number
Default: 3000

Port number for the dev server.

export default {
  server: {
    port: 8080,
  }
}

The server will now be available at http://localhost:8080.

maxRetries

Type: Number
Default: 10

Number of times to retry starting the dev server if the port is already in use.

export default {
  server: {
    maxRetries: 5,
  }
}

scrollSync

Type: Boolean
Default: false

Scrolling in one browser tab will be synchronized across all other browser tabs that are viewing the same Template. This works across devices too.

Enable synchronized scrolling:

export default {
  server: {
    scrollSync: true,
  }
}

You can now open the same Template on both your laptop and your phone, and scrolling on one will be mirrored on the other.

reportFileSize

Type: Boolean
Default: false

When enabled, the dev server will report the size of the compiled HTML file in the console. This number will be color-coded based on how close the file size is to the 102KB limit for Gmail.

Enable it by setting this to true:

export default {
  server: {
    reportFileSize: true,
  }
}

Less than 50KB:

Between 50KB and 102KB:

More than 102KB:

spinner

Type: String|Object
Default: 'circleHalves'

Customize the spinner shown in the console when compiling a Template.

export default {
  server: {
    spinner: 'dots'
  }
}

See the ora spinners list for available options.