Frontend Deployment

In this section we will deploy our frontend code to a hosting provider. Our frontend is developed using ReactJS and NextJS, so we need a NextJS compatible hosting provider.

info

There are 2 ways to deploy frontend.

• Managed frontend hosting providers like Vercel, Netlify, Render etc. It's very easy to use, and most provider offers free option.
• Self managed hosting, where you can deploy the build file directly.

Managed NextJS Hosting Using GitHub

• Create a private repository in Github: Follow https://docs.github.com/en/repositories/creating-and-managing-repositories/quickstart-for-repositories
• Upload your frontend code to your GitHub private repository. Follow official github guideline: https://docs.github.com/en/repositories/working-with-files/managing-files/adding-a-file-to-a-repository#adding-a-file-to-a-repository-using-the-command-line
• After successfully uploading you frontend code to GitHub, go to your hosting provider and connect your github account.
• Then allow access to your private repository to your hosting provider.
• Remember to add Environment variables , without environment variables, frontend will fail to connect with backend.

Self-Managed Hosting

• Run build command in your frontend code next build
• It will provide you with a build file.
• Then follow your hosting providers guideline to deploy the build file.