Deploy a Remix Application with Production Database to the Internet Through Vercel

Instructor: [0:00] Now you have a minimum set of features on your app. It's time to deploy to production. There are many different platforms you can choose from, but I have used Vercel in the past. It has always fit my needs. All the lessons in this course are in this GitHub repository. You will want to deploy only the Remix Social folder. Head over to Vercel and create an account. Go ahead and create a new project. This is where you will link your Vercel project to a GitHub repository. I have to update my GitHub permissions to allow Vercel to import Remix Social. Here, you can update the project name to Remix Social. Vercel wasn't able to detect that this was a Remix project, so you can select "Remix" in the drop-down menu. You need to edit the root path of your project to point to the Remix Social folder. This initial Deploy will break because Prisma requires a database URL to be set. You can fix this by adding the PlanetScale integration to your project. Over in Settings, then Integrations, you can click the Marketplace button. Go ahead and search for PlanetScale and add the integration. This integration will connect Vercel to one of your PlanetScale databases. It will generate all the necessary environment variables to connect to the production PlanetScale database branch. Head back over to your Vercel project settings. You need to add an environment variable called DATABASE_URL. You can remember that this variable is in our local infile while in development. You can use the value in this PlanetScale-Prisma database variable. Head up and create a DATABASE_URL environment variable and set the variable to be available in production and preview environments. When you head back over to your deployed application, you can still see that the application is in a broken state. Even though you updated the environment variables, the application hasn't been redeployed with this new configuration. You can head over to Deployments and redeploy the code with the new .env variables. With the magic of editing, it's deployed. Let's visit and see our application. Now, everything's working. You just deployed a fully functioning application with a production database to the Internet. It has never been easier to build web applications than it is today. Head back to your code, and you can make a small change to get a feel for what the development flow looks like. Add a simple to the index route. Create a branch and push it up to GitHub. It's a good idea to take a screenshot of the UI change you've made so your team can easily see what changed. Next, I like to add a GIF to my pull request to spice it up. You can see that Vercel automatically added a preview deployment to this pull request. This is a nice way for your team to look at the changes you've made without having to pull the code down. Merge the branch and head over to Vercel. You can see that a Deploy to production has automatically been kicked off. Your application has been deployed. You can see that the has been added to the page. To review, you signed up for a Vercel account. Next, you linked your GitHub repository and added an integration for PlanetScale. The PlanetScale integration added a bunch of environment variables, which you used to create your database URL environment variable. Then, you made a simple change and merged it into the main branch on GitHub to get a feel for the development