In the previous two parts of this article series, we created a NextJS project using Stream Chat and Video. Authentication was done using Supabase’s authentication feature. In this final part of the article series, we will deploy our results to Vercel. Vercel is the maintainer of the NextJS framework, and our entire codebase is NextJS-based, so with Vercel, we have the quickest and most seamless deployment option for NextJS at our fingertips.
If you are reading this article series and you would like to deploy the sample codebase, you will need to have credentials available for a Supabase account and a Stream account.
Next, you will need access to Vercel account. You can sign up with Vercel using this link.
If you followed along with the earlier parts of this series, you already have a Supabase and Stream account available. If not, in part 1 of this article series you can read more about the process of signing up for a Supabase account and a Stream account.
Make sure you have your Supabase and Stream API credentials available on hand when you want to deploy to Vercel. The deployment will ask for these environment values:
NEXT_PUBLIC_SUPABASE_URLNEXT_PUBLIC_SUPABASE_ANON_KEYNEXT_PUBLIC_REACT_APP_STREAM_KEYREACT_APP_STREAM_SECRET
Now either click on the deploy to Vercel button on the Github project’s readme page or do a manual deployment using Vercel’s dashboard.
Once deployment is complete, you should be able to see the location where your code is running by looking at the Domains of your deployment.
And that’s it. We now have everything we created in this article series running on Vercel. Our codebase is now available online and is interacting with Supabase for authentication and Stream’s Chat and Video infrastructure.
The complete codebase of this project is available on GitHub repository, and while you are there, please add your ⭐️ star ⭐️.
To learn more about the product used in this article series, please visit these links:
- Stream Chat
- Stream Video
- Vercel for deployment
- Supabase authentication (Make sure to check their other offerings as well!)