Deployment

Overview

Deploying to Vercel is supported, with dedicated buttons for the Frontend and Backend applications. Both require specific configurations during and after deployment to ensure proper functionality.

---

Frontend Deployment

• Click the Frontend button above to start the deployment process.
• During deployment, you will be prompted to set the API_BASE_URL. Use a placeholder value (e.g., https://) for now, as this will be updated with the backend URL later.
• Complete the deployment process here.

Backend Deployment

• Click the Backend button above to begin deployment.
• First, set up the database. The connection is automatically configured, so follow the steps, and it should work by default.

• During the deployment process, you will be prompted to configure the following environment variables:

• CORS_ORIGINS

  • Set this to ["*"] initially to allow all origins. Later, you can update this with the frontend URL.

• ACCESS_SECRET_KEY, RESET_PASSWORD_SECRET_KEY, VERIFICATION_SECRET_KEY

  • During deployment, you can temporarily set these secret keys as plain strings (e.g., examplekey). However, you should generate secure keys and update them after the deployment in the Post-Deployment Configuration section.

• Complete the deployment process here.

CI (GitHub Actions) Setup for Production Deployment

We provide the prod-backend-deploy.yml and prod-frontend-deploy.yml files to enable continuous integration through Github Actions. To connect them to GitHub, simply move them to the .github/workflows/ directory.

You can do it with the following commands:

 mv prod-backend-deploy.yml .github/workflows/prod-backend-deploy.yml
 mv prod-frontend-deploy.yml .github/workflows/prod-frontend-deploy.yml

Prerequisites

1. Create a Vercel Token:
2. Generate your Vercel Access Token.

3. Save the token as VERCEL_TOKEN in your GitHub secrets.

4. Install Vercel CLI:
   

   pnpm i -g vercel@latest
   

5. Authenticate your account. bash vercel login

Database Creation (Required)

1. Choosing a Database

   • You can use your database hosted on a different service or opt for the Neon database, which integrates seamlessly with Vercel.

2. Setting Up a Neon Database via Vercel

   • In the Projects dashboard page on Vercel, navigate to the Storage section.
   • Select the option to Create a Database to provision a Neon database.

3. Configuring the Database URL

   • After creating the database, retrieve the Database URL provided by Neon.
   • Include this URL in your Environment Variables under DATABASE_URL.

4. Migrating the Database

   • The database migration will happen automatically during the GitHub action deployment, setting up the necessary tables and schema.

Frontend Setup

1. Link the nextjs-frontend Project

2. Navigate to the nextjs-frontend directory and run:

   cd nextjs-frontend
   vercel link
   

3. Follow the prompts:
4. Link to existing project? No

5. Modify settings? No

6. Save Project IDs and Add GitHub Secrets:

7. Open nextjs-frontend/.vercel/project.json and add the following to your GitHub repository secrets:
   • projectId → VERCEL_PROJECT_ID_FRONTEND
   • orgId → VERCEL_ORG_ID

Backend Setup

1. Link the fastapi_backend Project

2. Navigate to the fastapi_backend directory and run:

   cd fastapi_backend
   vercel link --local-config=vercel.prod.json
   

3. We use a specific configuration file to set the --local-config value.
4. Follow the prompts:
5. Link to existing project? No

6. Modify settings? No

7. Save Project IDs and Add GitHub Secrets:

8. Open fastapi_backend/.vercel/project.json and add the following to your GitHub repository secrets:
   • projectId → VERCEL_PROJECT_ID_BACKEND
   • orgId → VERCEL_ORG_ID (Only in case you haven't added that before)

Notes

• Once everything is set up, run git push, and the deployment will automatically occur.
• Please ensure you complete the setup for both the frontend and backend separately.
• Refer to the Vercel CLI Documentation for more details.
• You can find the project_id into the vercel web project settings.
• You can find the organization_id into the vercel web organization settings.

Post-Deployment Configuration

Frontend

• Navigate to the Settings page of the deployed frontend project.
• Access the Environment Variables section.
• Update the API_BASE_URL variable with the backend URL once the backend deployment is complete.

Backend

• Access the Settings page of the deployed backend project.

• Navigate to the Environment Variables section and update the following variables with secure values:

  • CORS_ORIGINS

  • Once the frontend is deployed, replace ["*"] with the actual frontend URL.

  • ACCESS_SECRET_KEY

  • Generate a secure key for API access and set it here.

  • RESET_PASSWORD_SECRET_KEY

  • Generate a secure key for password reset functionality and set it.

  • VERIFICATION_SECRET_KEY

  • Generate a secure key for user verification and configure it.

• For detailed instructions on setting these secret keys, please look at the section on Setting up Environment Variables.

Fluid serverless activation

Fluid is Vercel's new concurrency model for serverless functions, allowing them to handle multiple requests per execution instead of spinning up a new instance for each request. This improves performance, reduces cold starts, and optimizes resource usage, making serverless workloads more efficient.

Follow this guide to activate Fluid.