Vercel Integration

Available on: Cloud Free, Cloud Professional, Cloud Enterprise

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).

  

Creating an Integration

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

Step 1: Prerequisites

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

Step 2: Initiate Integration

• Navigate to the official Hasura integration page and click on Add Integration.

  

Step 3: Select Vercel account

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

  

Step 4: Select Integration Scope

• Select the integration scope.

  Scope	Description
  All Projects	Configures all Vercel applications in the account.
  Specific Projects	Configures only a subset of applications.

  

• 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.

  

• 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.

  

• Click on Install Integration to install your integration.

  

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.

  

• 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.

  

• 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:

  Title	Description
  HASURA_PROJECT_ENDPOINT	GraphQL API endpoint of the Hasura Cloud project.
  NEXT_PUBLIC_HASURA_PROJECT_ENDPOINT	GraphQL API endpoint to be exposed on the Next.js browser client.
  HASURA_ADMIN_SECRET	Admin 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.

    

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.

  

• 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.

  

• 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.

  

• 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.

  

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.