Skip to main content

​
CLI commands

​
Development commands

​
serve

Start a local development server with hot-reloading. 
maizzle serve [env]
​
env
string
default:"local"
An Environment name to use

​
Options

​
--bin
string
Short: -bPath to the Maizzle executable
​
--config
string
Short: -cPath to a config file to use
​
--port
number
default:"3000"
Short: -pPort number to run the server on

​
Examples

Serve with a specific environment: 
maizzle serve production
This will start a local development server using the settings from your project’s config.production.js. Serve with a custom config file: 
maizzle serve production --config /path/to/dev.config.js
The config file path takes precedence over the [env] argument, so dev.config.js will be used even if production is passed. Serve on a custom port: 
maizzle serve --port 8080
Specify path to Maizzle executable: 
maizzle serve --bin /path/to/@maizzle/framework/src

​
build

Compile your templates and output them to the destination directory. 
maizzle build [env]
​
env
string
default:"local"
An environment name to use

​
Options

​
--bin
string
Short: -bPath to the Maizzle executable
​
--config
string
Short: -cPath to a config file to use. The environment config will be computed based exclusively on the contents of the specified file, there will be no merging with config.js.
​
--summary
boolean
Short: -sShow a summary of the build process

​
Examples

Build with a specific environment: 
maizzle build production
Build with a custom config file: 
maizzle build --config /path/to/custom-config.js
Specifying a config file path takes precedence over the [env] argument. In this example, custom-config.js will be used even if production is passed: 
maizzle build production --config /path/to/custom-config.js
Build with a summary: 
maizzle build production --summary
This will output a list of all the templates that were built, their compiled file size, and how long it took to build each one: 
┌────────────────────────┬───────────┬────────────┐
│ File name              │ File size │ Build time │
├────────────────────────┼───────────┼────────────┤
│ confirmation.html      │ 5.07 KB   │ 432 ms     │
├────────────────────────┼───────────┼────────────┤
│ email-change.html      │ 5.07 KB   │ 79 ms      │
├────────────────────────┼───────────┼────────────┤
│ invitation.html        │ 5.08 KB   │ 81 ms      │
├────────────────────────┼───────────┼────────────┤
│ password-recovery.html │ 4.99 KB   │ 65 ms      │
└────────────────────────┴───────────┴────────────┘

✔ Built 4 templates in 698 ms

​
Scaffolding commands

CLI commands for creating new projects and scaffolding templates or config files.

​
make:config

Create a new Maizzle config file. 
maizzle make:config [env]
This command will start an interactive prompt that will guide you through the process of creating a new Maizzle config file.
​
env
string
Environment name to use for the config file name

​
Options

​
--full
boolean
Short: -fScaffold a full config instead of a minimal one

​
Examples

Create a minimal config file: 
maizzle make:config preview
This will output config.preview.js:
config.preview.js
/** @type {import('@maizzle/framework').Config} */
export default {
  build: {
    content: ['emails/**/*.html'],
    output: {
      path: 'build_preview',
    },
  },
}
Create a full config file: 
maizzle make:config preview --full

​
make:layout

Scaffold a new layout. 
maizzle make:layout [filepath]
Running it with no arguments will present an interactive prompt.
​
filepath
string
Full path of the file to create, including file name
If the file already exists, an error will be thrown. The file will not be overwritten.

​
Examples

Create a layout: 
maizzle make:layout layouts/layout.html
Paths may be relative to the project root: 
maizzle make:layout ../global-emails/layouts/layout.html

​
make:template

Scaffold a new template. 
maizzle make:template [filepath]
Running it with no arguments will present an interactive prompt.
​
filepath
string
Full path of the file to create, including file name
If the file already exists, an error will be thrown. The file will not be overwritten.
A minimal template structure will be output:
emails/my-template.html
---
preheader: "Sample preheader text"
---

<x-main>
  <!-- your HTML... -->
</x-main>

​
Examples

Create a template: 
maizzle make:template emails/my-template.html
Paths may be relative to the project root: 
maizzle make:template ../global-emails/my-template.html

​
make:component

Scaffold a new component. 
maizzle make:component [filepath]
Running it with no arguments will present an interactive prompt.
​
filepath
string
Full path of the file to create, including file name
If the file already exists, an error will be thrown. The file will not be overwritten.
A minimal component structure will be output:
components/my-component.html
<script props>
  module.exports = {
    greeting: props.greeting || 'Hello, World!',
  }
</script>

{{ greeting }}

<yield />

​
Examples

Create a component: 
maizzle make:component components/my-component.html
Paths may be relative to the project root: 
maizzle make:component ../global-emails/components/my-component.html

​
make:tailwind

Scaffold a new Tailwind CSS config. 
maizzle make:tailwind [filepath]
Running it with no arguments will present an interactive prompt.
​
filepath
string
Full path of the file to create, including file name
If the file already exists, an error will be thrown. The file will not be overwritten.
A minimal Tailwind CSS config will be output based on the one in the Starter:
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
    require('tailwindcss-preset-email'),
  ],
  content: [
    './components/**/*.html',
    './emails/**/*.html',
    './layouts/**/*.html',
  ],
}

​
Examples

Create a Tailwind config: 
maizzle make:tailwind config/tailwind.config.js

Build docs developers (and LLMs) love

Get started for freeTalk to us