#24 Deploy to Vercel

You will learn how to host your application in a production URL. To achieve this you will setup a production MySQL database, use your Stripe live API Keys and finally deploy your app to Vercel.

Prerequisites

Since the app depends on both a database URL and Stripe API Keys, you will make sure you have both of them before deploying your app.

Database URL

You need a MySQL database that will be reachable by the deployed application. Planetscale is the database host we used while developing this course, it provides a great developer experience and a generous free plan to try things around.

Once you have created an account, install Planetscale's command line and login.

pscale auth login

After logging in, create a new database and a default main branch.

pscale database create <DATABASE_NAME>

Finally generate database credentials with the password create command. Replace <DATABASE_NAME> with the name you used on the create command, <BRANCH_NAME> could be the default main branch, and <PASSWORD_NAME> is your password identifier since you can have many per database branch.

pscale password create <DATABASE_NAME> <BRANCH_NAME> <PASSWORD_NAME>

Keep the generated username, password and URL values handy because you will need them on the deploy step. Also head over to Planestcale's NextJs docs if you get stuck or want to learn more about how Planetscale works.

Also keep in mind that the main thing you need is a MySQL compatible API URL, so feel free to try other providers. Heroku and Supabase also offer free plans and a great setup experience.

Stripe API Keys

Up until this point you've been using Stripe's Test mode API Keys, but before you deploy your application you need to get Stripe live API Keys. Live mode is what you want before you launch your app, otherwise users won't be able to use their real accounts and cards.

Head over to your Stripe dashboard, on the API Keys section. Reveal your secret key and store it in a secure place since you'll need to set it up as environment variable on the hosting provider. Keep that small key safe! Learn about API Key and secrets management at the excellent Stripe API Keys docs.

You will also need to create a Webhook secret to handle order fulfilment, so head over to the Webhooks section of your dashboard and generate a secret there.

Deploy to Vercel

Before you setup your project in Vercel, make sure you push your code to a Git provider. Vercel supports Github, Gitlab and Bitbucket, so any of them will do.

Create an account at https://vercel.com if you haven't yet. Go to https://vercel.com/new to start the deployment process.

Select the Git repository you'd like to deploy from the dropdown list and click import to go to the "Configure project" step. In here you will setup your project name, framework preset which would be NextJs for this course, and root directory.

Make sure you add DATABASE_URL, STRIPE_SECRET_KEY and STRIPE_WEBHOOK_SECRET on the environment variables section.

Once you've filled all configuration options, hit the big "Deploy" button to make vercel build your project and finally deploy it. Once it's done, you will have a production URL with your working project.