Environments

You might want to use different settings when developing locally versus when building production-ready emails.

For example, you don't need CSS inlining or code indentation when developing on your computer, but you'll most likely want both enabled for the final, production-ready emails.

Maizzle makes it easy to have as many build targets as you need by using distinct configuration files that enable their own build command.

We call these Environments.

Creating Environments

Think of Environments as 'build scenarios':

When I run maizzle build [environment], should X happen? Should CSS be inlined? Should my HTML be minified? Do I need some data to be available for the templates?

For example, let's define a production environment, by creating a new file named config.production.js, in the project root:

module.exports = {
  build: {
    templates: {
      destination: {
        path: 'build_production'
      }
    }
  }
}

This config.production.js file will be used when running maizzle build production.

Data merging

Any new Environment configuration file that you create will be merged on top of the base config.js when you run the build command for that particular Environment.

With the example above, when running the maizzle build production command, config.production.js will be merged on top of the base config.js: if the same key is present in both files, the value from config.production.js will be used.

Environment builds

To build your emails for a specific Environment, pass its name as an argument to the maizzle build command:

maizzle build production

The Starter's config.production.js is configured to output production-ready emails in a build_production folder at the root of the project.

Custom Environments

You may create as many Environments as you need, and name them as you like.

For example, you might create a config file named config.shopify.js that you would use to build only the templates from the src/templates/shopify folder:

module.exports = {
  build: {
    templates: {
      source: 'src/templates/shopify',
      destination: {
        path: 'build_shopify'
      }
    }
  }
}

The build command for it would be:

maizzle build shopify

Config variables

Maizzle exposes a page object that you can access through expressions in your HTML.

This object contains:

• your Template config (config.[env].js merged with Front Matter)
• the compiled Tailwind CSS (page.css)

This makes it possible to define variables in config.js:

module.exports = {
  doctype: 'html'
}

... and use them in your markup:

<extends src="src/layouts/main.html">
  <block name="template">
    <p>doctype is: {{ page.doctype }}</p>
  </block>
</extends>

Template variable

The Environment name is globally available under the page.env variable.

You can output content in your emails based on the Environment you're building for:

<if condition="page.env === 'production'">
  This will show only when running `maizzle build production`
</if>

Top-level variables

If you need to define variables outside of the page object, you can use the locals key in your config.js:

module.exports = {
  locals: {
    company: {
      name: 'Spacely Space Sprockets, Inc.'
    }
  }
}

Now, you can access company properties directly:

- Company name is {{ page.company.name }}
+ Company name is {{ company.name }}