Getting Started

Maizzle 5 Beta

The next version of Maizzle is here! 🥳

Try it out now by running npx create-maizzle and selecting the 5.0.0-beta Starter:

npx create-maizzle

┌   create-maizzle
│
◇  Where should we create your project?
│  ./maizzle-5
│
◆  Select a Starter
│  ● 5.0.0-beta
│  ○ Default
│  ○ Custom
└

Or, if you'd like to try it out on an existing v4 project, check out the upgrade guide - upgrading to v5 takes less than 10 minutes for most projects.

We would greatly appreciate it if you could test it out and provide feedback through GitHub Discussions or by opening an issue. Thanks!

Video Tutorials

If you prefer to watch a video, check out the Maizzle Series on Laracasts.

They were originally made for Maizzle 4.x, but the same concepts apply in v5 and only some configuration options are different (see our upgrade guide).

Requirements

You'll need Node.js installed first (comes with NPM included).

Use this command to check the version:

node -v

Create a project

The fastest way to get started is with the official Starter.

Run this command in your terminal to create a new Maizzle project:

npx create-maizzle

In the interactive setup wizard, specify the directory name to create the project in, i.e. ./my-project, select the Default Starter, and choose Yes to Install dependencies.

Installing the dependencies will take a while, but usually under a minute.

Next, switch the current directory to my-project:

cd my-project

If you didn't install dependencies in the interactive setup, do so now:

npm install

Manual setup

Alternatively, you may create a new project manually.

First, you'll need to download a Starter project - the following command will create a new project using the official Starter in a directory called my-project:

npx degit maizzle/maizzle my-project

Next, change the current directory to my-project:

cd my-project

Finally, install the project's dependencies:

npm install

Development

Maizzle includes different commands for developing locally on your machine and for building production-ready emails.

Local

You can start a development server that watches for file changes and automatically updates a preview in the browser.

Start local email development by running the dev npm script:

npm run dev

This will start the local server at http://localhost:3000

Navigate to one of the Templates there, make a change to it in your editor and save it: your changes will be injected and the page will reflect them almost instantly.

Production

Build production-ready emails that have inlined CSS and many other optimizations, by running the following command:

npm run build

This will use settings in your project's config.production.js to compile email templates that you can use with your ESP or in your application.

Updating

Maizzle is listed as a dependency in your project's package.json file:

"dependencies": {
  "@maizzle/framework": "next",
}

With the v5 Beta Starter, the next version will be installed. To use a specific version, first change the value to the desired release number:

"dependencies": {
  "@maizzle/framework": "next",
  "@maizzle/framework": "5.0.0-beta.23",
}

Then, re-install dependencies by running npm install in your project's root folder.

Clean update

If for some reason you're not getting the correct version or are running into installation issues, delete your node_modules folder and your package-lock.json file from the root of your project and then run npm install again.

This will do a fresh install of all dependencies.