Build an Email demo
Build an Email demo
A Hello World tutorial to quickly get familiar with Magic. 🚀
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:
To create your application in a specific folder, you can set the
-p flag. For example:
01npx make-magic --project-name my-app
This would create a project with the following structure:
03 └── ...
If you already know an ID for the base template you'd like to use, you can indicate so with the
-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
- 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!
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-magicwithout any flag arguments and you'll asked to choose a template during the flow.
--branch, -b- The remote Git branch of
make-magicfrom 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
--templateoption to see template-specific options and documentation.
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.