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 Dedicated Wallet built-in. You can customize the technology stack included in your project 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

#Configure Your Project Interactively

When the tool launches, it’ll ask you for your project’s name. This will end up being the name of the directory created for your project.

You’ll then be asked to choose between two starting configurations:

  1. Quickstart
  2. Custom Setup

To use Dedicated Wallet, you’ll need to select Custom Setup.

Next, you’ll be asked which wallet type to use in your project. Select Dedicated Wallet.

Once you’ve chosen Dedicated Wallet, you’ll be presented with a number of login options to enable for your customers. Email OTP is enabled out of the box, and you can also include SMS OTP and social login options with a small amount of setup in your Magic Dashboard.

Use spacebar to select one or more login options and then hit return to continue.

You’ll then be presented with the option to choose a blockchain network.

Finally, you’ll be asked for your Magic publishable API key. You can find this in your Magic Dashboard.

And that’s it! The CLI tool will scaffold your app, install dependencies, and launch it, if possible. Additional directions may be provided in the console depending on your selections.

#Configuration 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 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.
  • **[...]** - Additional CLI flags are given as data to the chosen template. Data provided as CLI flags will not be prompted for interactively.

#CLI Flags vs Interactive Flow

Using npx make-magic without flag arguments defaults to an interactive experience. While make-magic allows for the use of flags, each flag added may change which additional flags are supported. This makes the tool ideal for the interactive flow when you don’t know precisely which flags you should add to configure your project properly.

Build an Email demo