CLI Commands

The CLI tool includes commands for scaffolding, developing, and building your emails.

Development

CLI commands for developing HTML emails with Maizzle.

serve

maizzle serve

Use this command to develop emails locally:

  • a local development server is first created with Browsersync
  • maizzle build is then called to compile your templates

You can then preview your templates by visiting http‌://localhost:3000 in a browser.

You can edit a Template in your code editor, save it, and the changes will be almost instantly reflected in the browser. And, of course, you can also configure BrowserSync.

This command has the fastest build time, since most Transformers are disabled on purpose for local development, in the base config.js.

When developing locally, you have all classes generated by Tailwind CSS at your disposal, so you can rapidly prototype and style emails, right in the browser.

Also, if you're editing a Template, Maizzle will only re-compile that Template, so changes are usually reflected in under a second. This does not apply, however, when editing other files that have a global impact, like Layouts, Components, or your Tailwind config.

build

maizzle build [env]

maizzle build is used to compile your templates and output them to the destination directory. If [env] is specified, Maizzle will try to compute an environment config by merging config.[env].js on top of the default config.

ArgumentTypeRequiredDefaultDescription
[env]stringnolocalAn environment name to use

Scaffolding

CLI commands for creating new projects and scaffolding templates or configs.

new

maizzle new

The new command is used to scaffold and initialize a Maizzle project.

Run it with no arguments and you are presented with an interactive prompt:

Maizzle interactive prompt

Alternatively, you can add those arguments manually.

maizzle new <starter> [path] --no-deps?

As you can see, the arguments are similar to those in the git clone command.

ArgumentRequiredDescription
starterYesStarter name or a Git repository URL.
pathNoDirectory path to create the project into.

The --no-deps flag can be used to skip installing NPM dependencies:

FlagShorthandDescription
--no-deps-dDon't install NPM dependencies.

So you can basically clone any repo into any system path, which means you can use any starter project - not just ours - as long as you can clone it with Git.

Use one of the original starters:

maizzle new amp4email

Create from any GitHub repo:

maizzle new user/repo

Create from any Git repo:

maizzle new https://example.com/some-repo.git

Use a custom folder name:

maizzle new maizzle/starter-litmus folder-name

make:config

maizzle make:config [env] --full?

Scaffolds a new config.[env].js in the project root.

Simply running maizzle make:config will bring up an interactive prompt:

maizzle make:config

Of course, you can skip the prompt by passing in arguments:

maizzle make:config [env] --full?
ArgumentDescription
[env]Environment name to use for the config.
OptionShorthandDescription
--full-fScaffold a full config.

The [env] argument is an environment name, i.e. staging.

For example, let's scaffold config.staging.js:

maizzle make:config staging

By default, a minimal config is output:

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

If you want a full config, use the --full option:

maizzle make:config staging --full

make:layout

maizzle make:layout

Scaffolds a new Layout based on the Starter's default Layout.

Running it with no arguments will present an interactive prompt:

maizzle make:layout

You can skip the prompt by passing in arguments:

ArgumentDescription
filenameName of the file to create, including extension, i.e. layout.html
OptionShorthandDescription
--directory-dDirectory where Layout file should be output.

Examples:

# scaffold a Layout in src/layouts
maizzle make:layout my-layout.html

# use a custom directory
maizzle make:layout amp-layout.html --directory=src/layouts/amp

# the above is the same as
maizzle make:layout amp-layout.html -d=src/layouts/amp

# paths can be relative to project root, i.e. one level above
maizzle make:layout master.html -d=../global-layouts

make:template

maizzle make:template

Scaffolds a new Template.

Running it with no arguments will present an interactive prompt:

maizzle make:template

You can skip the prompt by passing in arguments:

ArgumentDescription
filenameName of the file to create, including extension, i.e. template.html
OptionShorthandDescription
--directory-dDirectory where Template file should be output.

Examples:

# scaffold a Template in src/templates
maizzle make:template my-template.html

# use a custom directory
maizzle make:template amp-template.html --directory=src/templates/amp

# the above is the same as
maizzle make:template amp-layout.html -d=src/layouts/amp

# paths can be relative to project root, i.e. one level above
maizzle make:template example.html -d=../parent-directory