In this lecture, we are going to deploy our app live to a production environment hosted on Versel. To begin, we need to create a GitHub repository to host our code. Head over to github.com and create a new repository. Give it a name and choose whether to make it public or private. Once the repository is created, navigate to the main page and add the code to the repository. If you have used Create Next App and the boilerplate starter repo, the Git setup is already done for you. Copy and paste the provided lines of code into your terminal to link your repository to the new URL. Next, go to the Source Control tab and commit your code to the repository. Finally, sync your code to the repository by clicking the sync button.
Now, let’s set up our Versel project. Log in to your Versel account and create a new project. Import your GitHub repository into Versel. Add the environment variables from your .env.local file to the project settings. Deploy your project and wait for it to finish building. Once the build is complete, go to the Domains section in Versel and copy the domain name assigned to your project. Go back to your Auth0 dashboard and update the allowed callback and logout URLs with the production domain name. In the Versel settings, update the Auth0 base URL to the production domain name as well. Save the changes and redeploy your project.
Make sure to set the function region in Versel to be in the same region as your MongoDB Atlas database. This ensures optimal performance. Once everything is set up, test your app on the production environment to ensure everything is working as expected. Log in, create a new chat, and verify that the functionality is working correctly. Congratulations, your app is now deployed to a production environment!
