Deploy a Remix Application to Fly.io

Kent C. Dodds: [0:00] You can deploy Remix to pretty much anywhere and the Remix Indie stack has been pre-configured to deploy to Fly. That's where we're going to deploy.

[0:10] One thing that we need to do though because we have made some changes from the Indie stack like changing our Prisma schema, we need to create a migration for the Prisma schema.

[0:20] So that we have, in addition to the initial migrations, the changes that we have as well. Let's run npx prisma migrate dev, and that will give us an opportunity to reset all of our data and everything, which is fine.

[0:34] It also is going to ask us for a name for the migration, and we will just put posts. That's going to run RC generator and everything. We are all set with a migration that includes our posts and everything. Now that we've got that in place, we can get to deploying.

[0:52] We'll come down here to the deployment steps. Here first, we're going to want to install Fly. Then you'll want to log in. I have both of those steps complete already and now we're going to create an app on Fly.

[1:04] There is a staging environment all set up and configured for you. If you follow all the instructions, you should be able to push to a Dev branch and have a staging environment.

[1:14] We don't really need that for a blog. I'm just going to create this one and I'll skip all of the staging specific instructions. Here, we'll run fly create onewheel-blog, and we'll create it on my personal account and then we'll initialize this as a git repository.

[1:34] We'll create a new repository on GitHub. This is our onewheel-blog, and we'll come down here and create that repository. Now, we can copy this URL and run git remote add origin with that URL, as instructed here.

[1:52] Now, we need to create a Fly API token. We'll follow the instructions by going to this page. We'll say Onewheel Blog is the name of our token and that will give us a token, which we can then go into the new GitHub repo we made.

[2:07] Go to the settings, go down to secrets, and actions and make a new repository secret for that, we'll grab the Fly_API_TOKEN name here and add that secret so that we can deploy to Fly from GitHub actions.

[2:23] Now, our application needs a couple of environment variables. Those are called secrets. We're going to create a session secret, and this script will actually generate one on the Fly.

[2:34] You can also use 1password or some other password generator to generate a secret, but this is for encoding and decoding your cookie.

[2:42] Then we also have a special environment variable for the admin email. Let's say, "Fly secrets, set ADMIN_EMAIL to kent@remix.run." Now, we're just going to create the volume where our data will be stored. This creates a volume called data.

[3:01] We'll choose the Dallas, Texas for me. That's the one that's closest to me. You can choose the one that's closest to you. This creates a volume called data with the size of one gigabyte for the app that we are working with.

[3:14] After that is finished, we are ready to commit everything and push it up. Let's look at our git status. We have a bunch of stuff to add. Let's add everything. We'll commit this with "init", and then we'll push.

[3:28] With that pushed, we can go over to our GitHub repo, look at the code. Here's all of our code and everything for our blog. We can go to the Actions. Our Action has been kicked off because of the workflow that was generated for us when we initialized the repo.

[3:46] Because this is our first run, we don't have a cache in place, so this is going to take a little bit of time. I'll speed this up for you so you don't have to sit around and wait. Awesome. With that now done, we can go take a look at the deployed app by grabbing our app ID, and going to that .fly.dev.

[4:06] Here we are. I can sign up with my admin email, kent@remix.run with a super secure password. I can go to blog posts and admin, create a new blog post. My first post. My-first-post. This is my first post.

[4:27] Hooray! Let's put in some markdown in here and make sure that markdown parsing is working. Create post, creating, sweet. I'm on my first post. I can edit that. Yes, and update. If we go to our posts page, my first post, here we are.