Vercel

Deploying both frontend and backend to Vercel involves deploying the projects separately as they are usually distinct applications with different requirements.

1. Setting Up Vercel

• Sign Up/Login to Vercel:

  • Visit https://vercel.com and sign up using your GitHub, GitLab, or Bitbucket account.

• Create a New Project:

  • After logging in, click on the "Add New..." button and select "Project" to start a new deployment.

2. Preparing Your Frontend and Backend Projects

Make sure your projects are set up correctly:

• Frontend (e.g., React, Next.js) Project:

  • Should have a package.json file with a build script ("build": "next build" for Next.js).

  • Make sure your frontend is ready for production (environment variables, API URLs, etc.).

• Backend (e.g., Node.js/Express) Project:

  • Should also have a package.json file with a start script ("start": "node index.js").

  • Add a Vercel configuration (vercel.json) to specify the serverless functions.

3. Deploying the Frontend on Vercel

Step-by-Step Deployment:

1. Connect to Git Repository:

   • Connect your frontend repository to Vercel.

   • Select your Git provider (GitHub, GitLab, Bitbucket) and pick the repository for the frontend.

2. Configure Project Settings:

   • Set the framework preset to your frontend framework (e.g., Next.js).

   • Configure the Environment Variables if needed, such as API URLs.

3. Deploy Frontend:

   • Click "Deploy" and wait for Vercel to build and deploy the frontend.

   • Once deployed, Vercel will provide you with a URL (e.g., your-project.vercel.app).

4. Deploy Backend on Vercel 🌐

Vercel treats backend projects as serverless functions.

Step-by-Step Deployment:

1. Connect to Git Repository:

   • Connect your backend repository to Vercel.

   • Select your Git provider and pick the repository for the backend.

2. Add vercel.json Configuration:

   • Create a vercel.json file in the root of your backend project to specify the serverless functions configuration:

     {
       "version": 2,
       "builds": [
         { "src": "api/**/*.js", "use": "@vercel/node" }
       ],
       "routes": [
         { "src": "/api/(.*)", "dest": "/api/$1" }
       ]
     }

   • Place your backend code in the /api directory (e.g., /api/index.js). Vercel will treat these files as serverless functions.

3. Configure Environment Variables:

   • Set environment variables like database URLs, API keys, etc., in the Environment Variables section.

4. Deploy Backend:

   • Click "Deploy" and wait for Vercel to build and deploy the backend.

   • Once deployed, Vercel will provide a URL for your backend endpoints (e.g., your-backend.vercel.app/api).

5. Setting Up Environment Variables

• Frontend Environment Variables:

  • In Vercel, go to your frontend project settings.

  • Under "Environment Variables", add variables like NEXT_PUBLIC_API_URL to point to the backend deployment URL.

• Backend Environment Variables:

  • In Vercel, go to your backend project settings.

  • Add variables for database connection strings, secret keys, etc.

6. Setting Up a Custom Domain in Vercel🌍

You can set up a custom domain to make your frontend and backend accessible through your own domain name.

Step-by-Step Process:

1. Add Domain to Vercel:

   • In the Vercel dashboard, go to your frontend or backend project.

   • Click on "Settings" and then "Domains".

   • Click on "Add Domain" and enter your custom domain (e.g., www.example.com).

2. Verify Domain Ownership:

   • Vercel will provide you with DNS records that you need to add to your domain registrar.

   • Typically, you need to add an A record or CNAME record pointing to Vercel's servers.

   For Main Website:

   • Add an A record pointing to the IP address given by Vercel.

   For Subdomain:

   • Create a CNAME record pointing to your Vercel project URL (e.g., your-project.vercel.app).

3. Wait for Propagation:

   • DNS changes can take some time (up to 24-48 hours) to propagate, though it's usually much faster.

4. Configure HTTPS:

   • Vercel automatically provides an SSL certificate for your domain. You don’t need to configure SSL manually.

   • Once the domain is verified, Vercel will enable HTTPS by default.

7. Connecting Frontend to Backend

• Update the API URLs in your frontend code to point to the backend endpoint deployed on Vercel.

  • For example, set NEXT_PUBLIC_API_URL=https://your-backend.vercel.app/api in your environment variables.

Example Command Summary 📝

• Install Vercel CLI (Optional but Recommended for Local Testing):

  shCopy codenpm install -g vercel

• Deploy Frontend Locally:

  shCopy codevercel --prod

• Deploy Backend Locally:

  shCopy codecd backend
  vercel --prod

8. Summary 🚀

• Frontend Deployment:

  • Connect to Vercel -> Configure -> Deploy -> Get URL.

• Backend Deployment:

  • Connect to Vercel -> Add vercel.json -> Configure -> Deploy -> Get URL.

• Domain Setup:

  • Add domain -> Verify with DNS -> Wait for propagation -> HTTPS enabled by Vercel.

This setup ensures that your frontend and backend are deployed separately on Vercel but can work together seamlessly through the use of environment variables and domain configuration.