Maizzle CLI

You can use the Maizzle CLI to:

• create new projects
• generate config files
• build your HTML emails
• scaffold templates or layouts

Before continuing, make sure that you have Git installed:

git --version

Installation

Install the CLI tool globally, so the maizzle executable gets added to your $PATH :

npm install -g @maizzle/cli

Creating a project

Scaffold a Maizzle project by opening a Terminal and running:

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

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

Simply running maizzle new without any arguments will bring up an interactive prompt which will guide you through the setup:

Create project immediately

You may skip the prompt and scaffold a project with dependencies installed:

maizzle new https://github.com/maizzle/maizzle.git

Create project immediately (no dependencies)

If you prefer to install dependencies manually, you can do so by running:

maizzle new https://github.com/maizzle/maizzle.git --no-deps

Create project from a Starter

With maizzle new you may 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

Development

The CLI tool provides commands for developing HTML emails with Maizzle.

serve

maizzle serve [env] --no-clear?

When you run this command:

1. a local development server will be started
2. maizzle build [env] will be called to compile your templates

[env] is optional, you can simply run maizzle serve and a local development server will be started using the settings from your project's config.js.

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

You can edit a Template in your code editor, save it, and the browser tab will automatically be refreshed. This is done with Browsersync, which you can fully configure.

serve [env]

You may specify which environment config file to use by passing an [env] argument:

maizzle serve production

In this example, a local development server will be started using the settings from your project's config.production.js.

Template rebuilds are fast: Maizzle will only re-compile that Template, so changes are usually reflected in under a second.

When making changes to files that have a global impact however, like Layouts, Components, or your Tailwind config, Maizzle will rebuild all Templates.

build

maizzle build [env] --bin?

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.js.

--bin flag

If needed, you may specify the path to Maizzle's executable by passing the --bin flag:

maizzle build --bin /path/to/@maizzle/framework/src

Scaffolding

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

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:

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

maizzle make:config [env] --full?

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

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

maizzle make:config preview

By default, a minimal config will be output:

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

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

maizzle make:config preview --full

make:template

maizzle make:template --directory?

Scaffolds a new Template.

Running it with no arguments will present an interactive prompt:

You may skip the prompt by passing in arguments:

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-template.html -d=src/templates/amp

Paths can be relative to project root, i.e. one level above:

maizzle make:template example.html -d=../parent-directory

make:tailwind

maizzle make:tailwind --directory?

Scaffolds a new Tailwind CSS config based on the one in the Starter.

Running it with no arguments will present an interactive prompt that lets you specify the file name and destination directory:

You can skip the prompt by passing in arguments:

Scaffold with a custom file name:

maizzle make:tailwind twconfig.js

Use a custom directory (relative to project root):

maizzle make:tailwind twconfig.js --directory=config

The above is the same as:

maizzle make:tailwind twconfig.js -d=config

Place config one level above project root:

maizzle make:tailwind twconfig.js -d=../global-configs