WhatsApp Web Clone Part 3: Deploying Our Code

1 min read

Now that we’ve created all this wonderful code, let’s deploy our WhatsApp web clone to Vercel.

Jeroen L.
Jeroen L.
Published September 27, 2023

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_URL
  • NEXT_PUBLIC_SUPABASE_ANON_KEY
  • NEXT_PUBLIC_REACT_APP_STREAM_KEY
  • REACT_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:

decorative lines
Integrating Video With Your App?
We've built an audio and video solution just for you. Launch in days with our new APIs & SDKs!
Check out the BETA!