Build an Email demo

Build an Email demo

A Hello World tutorial to quickly get familiar with Magic. šŸš€

#Build Locally

The fastest way to get started with Magic is to bootstrap your project using make-magic, an easy-to-use CLI tool that generates a fully-working application with Magic auth built-in. You can start from any of the included base templates and customize the technology stack through a series of interactive prompts; kind of like a choose-your-own-adventure story. To get started, use the following command in your preferred shell:

01npx make-magic

To create your application in a specific folder, you can set the --project-name or -p flag. For example:

01npx make-magic --project-name my-app

This would create a project with the following structure:

02ā””ā”€ā”€ /my-app/
03    ā””ā”€ā”€ ...

If you already know an ID for the base template you'd like to use, you can indicate so with the --template or -t flag. Try this:

01npx make-magic --template hello-world

#Templates to try first

The following is a (non-exhaustive) list of base templates you are encouraged to try with make-magic first:

  • hello-world
  • hello-world-react
  • hello-world-social-login

#hello-world example

  1. To create a new Magic project from scratch, run: npx make-magic --template hello-world
  2. You'll be guided through some presets:
  3. At the end, you'll have a working Magic app!


make-magic supports the following options for every template:

  • --project-name, -p - The name of your project. A top-level directory will be created from this value. If omitted, the project name will be prompted for interactively.
  • --template, -t - The base template to use. If omitted or invalid, the template will be prompted for interactively. Templates are being added all the time, so if you're curious to try something new, simply use npx make-magic without any flag arguments and you'll asked to choose a template during the flow.
  • --branch, -b - The remote Git branch of make-magic from which to source templates. Only advanced use-cases should require this option, or if you're curious to try an upcoming template before its mainstream release.
  • --help, -h - When this flag is present, documentation will be printed to the console (no project is generated). You can pair this the --template option to see template-specific options and documentation.

#Interactive Flow

Using npx make-magic without flag arguments defaults to an interactive experience. Different templates may request different data to get your project off the ground. For example, the hello-world-social-login template requires a list of social login providers. You can define the providers for your app using the --social-login flag, or you can let the CLI prompts guide you. Use the --help flag and --template flag together to learn more about template-specific options.

Did you find what you were looking for?

Build an Email demo

Did you find what you were looking for?