Table of contents
This is a continuation of a previous article where we walked through setting up a multi-page form using Remix and Redis. Now, we will look at how you can deploy this basic application using Fly.io. To get started, make sure to install the flyctl on your computer, which you can do here.
To get this project working on Fly, we will need to create two applications. The first will be a Node instance running the Remix application. The second will be a Redis instance that we will then connect to. Let’s get started with the Remix application.
The code for the updated Remix project can be found on GitHub
Deploying Remix
Deploying Remix to Fly only requires running one command.:
flyctl launch
You can then set a name and region for the application. Make sure to note the region you select, since you will deploy the Redis instance in the same region. Don’t worry about setting up a Postgres database right now (unless you need that for your project). We will look at adding a database into this test project in a future article.
The last step will ask if you want to deploy. If you're ready, type in y and hit enter. The deployment process will then start. It uses Docker, so make sure to have the running on your machine. Install instructions can be found here if required.
Note: I was getting an error, and it wouldn’t deploy. I needed to update the fly command line tool using the command fly version update so if you run into a similar issue, try that out.
Once that is deployed, you can check the status by running fly status. This will show the instances that are running, along with the hostname near the top where the application is hosted currently. You can go and run the site, but will hit an error on the second page of the form, since we don’t currently have Redis setup.
Deploying Redis
Deploying Redis is also pretty simple using Fly. The setup comes from their excellent docs which I will repeat here, and then show how to get it setup with our Remix instance we just deployed.
To get started, navigate to a new empty folder that you create. I will just go up one directory, create a new folder called redis and then go into that folder.
_Note: if you are not familiar with the command line or terminal, that is totally fine. There are many helpful guides and videos online that can help. The command I ran to do what I explained above were cd .. then mkdir redis then cd redis._
Now, we will run a command in this new directory to get started:
fly launch --image flyio/redis:6.2.6 --no-deploy --name remix-redis
This launch command is getting an image from Docker Hub called “flyio/redis:6.2.6”, telling fly not to deploy and then setting a name of our choosing. In this case, I named my app “remix-redis”. Make sure to select the same region as your Remix instance after you click enter.
Note: Docker can be a pretty complicated subject for some. There are guides online that can help, and I am writing a few articles that will hopefully help grasp the concept as well.
We aren’t quite done yet because Redis will need somewhere to store the data it is caching. To get that setup, we can run this command:
fly volumes create redis_server --size 1
cat >> fly.toml <<TOML
[[mounts]]
destination = "/data"
source = "redis_server"
TOML
This will first create a new volume, then add a new file that adds configuration so that the Redis instance knows where to store the data. Again, make sure that you select the same region as before.
Finally, we will create a password for Redis. We can set that by running the command:
fly secrets set REDIS_PASSWORD=yoursecretpassword
Substitute your password, which you can generate through a password manager, or even openssl if you have that installed. (Run the command openssl rand -hex 12 to generate a random 12 character number). Make sure to save this password somewhere, since we will need to add it to the Remix instance in just a moment.
Before we do that, though, we need to deploy the redis instance. You can do that by running this command:
fly deploy
Once that is deployed, we are ready to connect our remote Remix instance to Redis to have our project fully deployed!
Connecting Remix to Redis
To get Remix connected to Redis, we need to go back to our application directory. We are going to set an environment variable into fly with our Redis URL, which will then be used in the application instead of our local environment variable that connects to Redis running on our local machine.
To accomplish this, again make sure that you are in the directory where your original Remix project is. Then, you can run the following command:
fly secrets set REDIS_URL=redis://default:<YOUR_SECRET_PASSWORD>@<REDIS_APP_NAME>.internal:6379
Make sure to replace <YOUR_SECRET_PASSWORD> with the password you set in the previous step, and <REDIS_APP_NAME> with the name you set on the launch command. The example name was remix-redis.
That should trigger a redeployment of your application. Once it is done, go back to the website where it is deployed and your application should be working! (If you don’t have the URL anymore, run fly status to see the hostname)
Conclusion
Remix, Fly, and Redis are a powerful combination. While our previous demo shows how you can use this to create a multi-page form, there are many other use cases. I hope to explore those in the future as well in upcoming articles, so follow and stay tuned for those.
The next planned update to this project is adding in a database and using Prisma as an ORM to add in the form data upon completion. We will then look at form validation and adapting our previous code to keep track of the form data ID through cookies instead of query params.
Please let me know if you have any question or run into any issue!