Commands for Building and Previewing

Maizzle comes with three commands for building your templates.

Each one is for a specific environment provided, and shorter aliases are also included.


Local

npm run local

This command will build your emails in the development environment. It's meant for quick local development, and there's almost no post-processing (like inlining) going on. This means you have all Tailwind classes at your disposal, so you can tinker right in the browser if you need to.

Your emails will be compiled into the /build_local directory (configurable). This folder is .gitignored by Maizzle, so you don't commit emails that are not production-ready to your repo.

The command is also used when Webpack is watching files, and it has the fastest build time.

Alias: npm run dev

Staging

npm run staging

Using this command with the default Maizzle config.staging.php settings will generate production-ready emails that have transformations applied, but are not minified.

By default, resulting HTML files in the /build_staging directory have CSS inlined, no unused CSS, and various code fixes (like HTML attributes preferred over inline CSS).

Alias: npm run stage

Production

npm run production

Use this command to generate the production-ready HTML emails that you will use to send from your ESP. By default, it does the same things as npm run staging, but it will also apply minification to the resulting HTML in the /build_production directory.

Alias: npm run prod

Watch

npm run watch

Using this command will do the following:

  1. Browsersync will start a local server, accessible by default at http://localhost:3000

    It will automatically open that URL (in your default browser), which is a directory listing where you can see all folders and HTML files generated.

  2. Webpack will watch for any changes you make to files in the /source directory. When you edit and save a file there, the server will refresh the page so you can immediately see your changes.

This command simply triggers the local script, and is the same as doing npm run local -- --watch

It doesn't have an alias, but you can change its name in package.json if you'd like to.

Screenshots

npm run screenshot file=path/to/file.html

Maizzle provides a command for generating browser screenshots of your emails, using Puppeteer.

The only argument is the path to an HTML file, which must be relative to your project's root.

A screenshots directory will be created in your project's root, and it will have the same structure as the default build_local.

Images are named after the original file, and include the device name plus a timestamp. For example, letter-ipad-mini-1532978719202.png.

NPM Scripts

All these commands are NPM scripts, defined in package.json :

"scripts": {
    "local": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --env=local --config=node_modules/laravel-mix/setup/webpack.config.js",
    "staging": "cross-env NODE_ENV=staging node_modules/webpack/bin/webpack.js --progress --hide-modules --env=staging --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --env=production --config=node_modules/laravel-mix/setup/webpack.config.js",
    "dev": "npm run local",
    "stage": "npm run staging",
    "prod": "npm run production",
    "watch": "npm run local -- --watch",
    "screenshot": "node ./tasks/js/screenshot.js"
},

If you create additional environments, this is the place where you register new build commands for them.