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:
01.
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
- To create a new Magic project from scratch, run:
npx make-magic --template hello-world
- You'll be guided through some presets:
- At the end, you'll have a working Magic app!
#Options
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 usenpx make-magic
without any flag arguments and you'll asked to choose a template during the flow.--branch, -b
- The remote Git branch ofmake-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.