Skip to main content
Version: v2.x

Vercel Integration

Introduction

You can connect your front-end Vercel applications with a Hasura Cloud project.

This integration does the following:

  • Creates a new Hasura Cloud project which can serve as a unified back-end for one or more front-end applications i.e. Vercel Projects depending on the scope of the integration.

  • Configures necessary project settings i.e setting environment variables and exposing them on the client side. (Check the list of all environment variables set).

    Hasura Vercel Integration

Creating an Integration

You can configure the official Hasura integration with your Vercel account.

Hasura Official Integration page

Step 1: Prerequisites

This integration requires you to have a Vercel account along with existing Vercel applications.

Step 2: Initiate Integration

Step 3: Select Vercel account

  • Select the account (personal or team) you want to install the integration on and click Continue.

    Vercel Account Scope

Step 4: Select Integration Scope

  • Select the integration scope.

    ScopeDescription
    All ProjectsConfigures all Vercel applications in the account.
    Specific ProjectsConfigures only a subset of applications.
    Vercel selected projects
  • Click on Add Integration and a new window should pop up for the further steps specific to Hasura Cloud.

Step 5: Configure Hasura Cloud

  • You'll be directed towards a Hasura Cloud signup or login page. This is skipped if you are already logged-in to Hasura Cloud.

  • Once you are logged in, a Hasura Cloud project is created for the integration and the required environment variables are set for each Vercel project in the scope.

    Setup Progress
  • Click on the first link to navigate to your Hasura Cloud project Console to configure your GraphQL API and connect to a database. Check out the section on database setup on how to do this.

    Visit Console Button
  • Click on Install Integration to install your integration.

    Finish Setup Button
Note

Your integration will only be successfully configured upon clicking the Install Integration button.

Step 6: Check finished setup

  • The Integration is now complete. You'll be redirected to the Vercel Dashboard.

    Integration Complete
  • Click on Configure to navigate to Cloud Dashboard to see the latest project we created for you. This will be a project with the tag Vercel on it.

    Integration Complete
  • To change the scope of you integration, you can click on Manage Access to add/remove vercel applications from the integration. Check out the Adding and removing projects from the Scope of Integration section for more details.

Environment variables

  • List of Hasura Cloud environment variables configured by the integration for each Vercel application in the scope of the integration:

    TitleDescription
    HASURA_PROJECT_ENDPOINTGraphQL API endpoint of the Hasura Cloud project.
    NEXT_PUBLIC_HASURA_PROJECT_ENDPOINTGraphQL API endpoint to be exposed on the Next.js browser client.
    HASURA_ADMIN_SECRETAdmin secret key to access your GraphQL API.
    • You can check the environment variables configured by the integration for you in the respective Vercel Project's settings on Vercel dashboard. These are set up for Development, Preview and Production environments. Check the Vercel docs for environment variables for further reference.

      Environment variables
Note
  • If a custom domain is added to the Hasura Cloud project, you'll have to set this custom value to HASURA_PROJECT_ENDPOINT and NEXT_HASURA_PROJECT_ENDPOINT manually in the respective Vercel project's settings.
  • Similarly if the Hasura Cloud project's admin secret is changed, you will have to edit the HASURA_ADMIN_SECRET manually in the respective Vercel project's settings.

Adding and removing projects from the Scope of Integration

Once the integration is installed, you can change the scope of the integration.

  • Navigate to the installed integration page and click on Manage Access. This will show you the current status of the integration, i.e the projects that are currently configured.

    Manage Access Button
  • If the integration is installed for All Projects, you can change the scope to Specific Projects and select the projects from the dropdown you want to keep the integration on. If installed for Specific Projects, you can add individual projects from the dropdown or remove them from the list.

    Manage Access For Projects
  • Click on Save to save the changes.

Note

Hasura Cloud project's environment variables will be automatically set for the added projects and will be removed for the removed projects.

Removing an Integration

  • To remove the configured integration, navigate to the Integrations sections in Vercel Dashboard and spot the Hasura integration in the list. Click on Manage to navigate to the integration page.

    Vercel Integration Tab
  • Scroll down to the bottom of the page and click on Remove Integration. Vercel will remove the integration along with the set environment variables from the applications.

    Remove Vercel Integration

Your Hasura Cloud project will not be affected.

Support

File a support ticket by navigating to the Help & Support tab on the Hasura Cloud dashboard if you face any issues.