Build configuration

Configure the paths where Maizzle should look for Templates to compile, where they should be output to, or what extensions they should use.

This is done under the build key of your config:

export default {
  build: {
    content: ['emails/**/*.html'],
  }
}

content

Type: String[]
Default: ['emails/**/*.html']

Define the source directories where Maizzle should look for Templates to compile.

This is an array of glob patterns, similar to how content sources are configured in Tailwind CSS. See fast-glob for how to write glob patterns.

The content key is unique to each config file - unlike other options in your config, it is not merged when using multiple Environments. This way, we avoid processing unwanted Templates when building for a specific Environment.

To illustrate this, imagine this is your config.js file:

export default {
  build: {
    content: ['emails/**/*.html'],
  }
}

... and this is your config.production.js file:

export default {
  build: {
    content: ['emails/transactional/**/*.html'],
  }
}

When running maizzle build production, only the Templates from the emails/transactional folder will be compiled, no matter if the emails folder contains other Templates.

File types

Specify which file extensions should be considered when looking for Templates to compile. For example, to include both .html and .blade.php files:

export default {
  build: {
    content: ['emails/**/*.{html,blade.php}'],
  }
}

Excluding files

You may exclude files from being compiled by prefixing the glob pattern with an exclamation mark !. For example, to exclude all files ending in -ignore.html:

export default {
  build: {
    content: [
      'emails/**/*.html',
      '!emails/**/*-ignore.html',
    ],
  }
}

Compute paths

If you need to compute the content source paths dynamically, you can use a function that returns an array of strings:

const sources = () => {
  return ['templates**/*.html', 'amp-templates/**/*.html']
}

export default {
  build: {
    content: sources
  }
}

Multiple sources

You may define multiple content sources:

export default {
  build: {
    content: [
      'marketing/**/*.html',
      'transactional/**/*.html'
    ]
  }
}

output

Type: Object
Default: { path: 'build_[env]', extension: 'html' }

Define the output path for compiled Templates, and what file extension they should use.

path

Type: String
Default: build_[env]

Directory path where Maizzle should output the compiled emails.

export default {
  build: {
    output: {
      path: 'build_production',
    }
  }
}

If you omit this key, a build_[env] directory name will be used, where [env] is the current environment, i.e. build_production or build_local.

extension

Type: String
Default: undefined

Define the file extension - without the leading dot - to be used for the compiled templates. For example, let's output Laravel Blade files:

export default {
  build: {
    output: {
      path: 'build_laravel',
      extension: 'blade.php'
    }
  }
}

The compiled Templates will be output as build_laravel/*.blade.php.

By default, Maizzle will use the extension of the source file.

permalink

Type: String
Default: undefined

Use the permalink Front Matter key to define a custom output path right in a Template:

---
permalink: output/this/template/here.html
---

<x-main>
  <!-- your email HTML... -->
</x-main>

This will override output.path from your config, but only for this Template.

You may use both relative and absolute file paths.

For example, output one level above project directory:

---
permalink: ../newsletter.html
---

<x-main>
  <!-- your email HTML... -->
</x-main>

Output at a specific system location:

---
permalink: C:/Users/Cosmin/Newsletter/2024/07/index.html
---

<x-main>
  <!-- your email HTML... -->
</x-main>

static

Type: Object
Default: { source: '', destination: 'assets' }

Source and destination directories for static asset files.

At build time, build.static.destination will be created relative to build.output.path, and files inside build.static.source will be copied into it:

export default {
  build: {
    static: {
      source: 'images/**/*',
      destination: 'images',
    }
  }
}

You can use it to store any files you might need, not just images.

spinner

Type: String|Object
Default: 'circleHalves'

Customize the spinner shown in the console during build.

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

See the ora spinners list for available options.

summary

Type: Boolean
Default: false

Show a summary at the end the build process. A table with the following information will be displayed:

• file name
• file size
• build time

You may also enable this option by passing the --summary or -s flag to the build command.

maizzle build --summary