Deploy a Remix Application to Vercel from a GitHub Repository
Using a GitHub repo to deploy our application to Vercel, keeps our code and live production site in sync. In this lesson we look at using the GitHub CLI tool to create a public repo, and adding it as a remote origin for our project.
Additionally, we create a new Vercel project from this GitHub repo, add our Supabase environment variables, and deploy. Lastly, we update the Homepage URL in our GitHub OAuth app to be our new Vercel URL, and set our Supabase project's Authentication Site URL to our new live application URL.
Extension ideas
- Style the app using Tailwind CSS (or another method of choice)
- Implement the ability for a user to
updateanddeletetheir own messages - Add the option to set a username and display this alongside messages
- Add separate message threads/chat rooms
- Implement private messages/chat rooms
Resources
Instructor: [0:00] In order to deploy our application with Vercel, we need a GitHub repo. I'm going to use the GitHub CLI tool to say GitHub repo. Create the name of this repo is going to be chatter and I want this to be public. [0:11] I then want to initialize this project as a Git repository and then add my new GitHub repo as my remote origin by saying git remote, add origin and then Git at github.com: my username. In this case, Dijon Masters/ the name of my repo so chatter.git. I can confirm this work by saying git remote-V and I can see that's been set up for both fetch and push.
[0:37] I can now add all of my changes by seeing git add . and I can check what stage by saying git status. It looks like everything's been added correctly there so I can now say git commit and specify a message for init project. Now, I can say git push origin main to push all of those files up to GitHub.
[0:57] Now, if I come across to Vercel, I can add a new project. I can import this one from a Git repository.
[1:03] I'm going to continue with GitHub. We can then see my new Remix project is here, Chatter. I'm going to say import. We need to remember to add our environment variables for our project. And so, we can copy those from our .env file in our project. We want a Supabase URL which we want to be set to this value here.
[1:21] Then we can click add to create that environment variable and then we want another one for Supabase anon key, which can be set to this value. Now, we can click deploy.
[1:35] Once this is finished, we're seeing that beautiful confetti, we can click here to go to our page and copy this live URL for our project and head over to GitHub to update our home page URL for our OAuth application, and then click update application.
[1:50] We also want to revoke all user tokens that we're using during development and then head over to our Supabase dashboard, and go to authentication, and then URL configuration and also update our site URL here. Then click save.
[2:03] Now, if we go back to the live version of our application and refresh, we should be able to log in and go through that authentication flow with GitHub and then be redirected back to our application where we can start sending messages. With multiple users, they can send each other messages in real time.