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.

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.