Lesson 10

<- Back to previous lesson

The goal of this lesson is to deploy our completed project to Vercel.

Be sure to switch to the 10-lesson branch in your local environment.

If you don't already have a Vercel account, create one.

1. From the Vercel dashboard, create a new project.
2. Choose Continue with GitHub.
3. Find the social-app-demo repository in the list and choose Import.
4. Select Next.js as the framework.
5. Under Environment Variables, add all of your environment variables from your .env.local file.
6. Click Deploy.
   • This initail deploy will not really do anything since the main branch does not contain our final code.
7. Go back to the main dashboard and select your new project.
   • Take note of your custom domain. (Example: https://socialbutterfly.vercel.app)
8. From the Settings tab, click Git.
9. Change the Production Branch to 10-lesson and save.
10. Navigate to the Environment Variables tab.
11. Change AUTH0_BASE_URL to your custom Vercel domain noted earlier.
12. To redeploy, you'll need to make a new commit to the 10-lesson branch. You can simply open the README.md file, add a space somewhere, and make a new commit.

1. In your Auth0 application, update the following fields under Settings:

• Allowed Callback URLs: http://localhost:3000/api/auth/callback, https://*.vercel.app/api/auth/callback
• Allowed Logout URLS: http://localhost:3000, https://*.vercel.app, http://*.vercel.app
• Allowed Web Origins: https://*.vercel.app

Great job! Your application is now deployed and you can open it from the Overview tab in Vercel or by navigating to your custom Vercel domain.

Team up with someone and browse to each other's deployed applications. Leave some flutters to let them know it's working.