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
Step 3: Select Vercel account
Select the account (personal or team) you want to install the integration on and click
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.
Add Integrationand 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.
Install Integrationto install your integration.
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.
Configureto navigate to Cloud Dashboard to see the latest project we created for you. This will be a project with the tag
To change the scope of you integration, you can click on
Manage Accessto add/remove vercel applications from the integration. Check out the Adding and removing projects from the Scope of Integration section for more details.
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
Productionenvironments. Check the Vercel docs for environment variables for further reference.
- If a custom domain is added to the Hasura Cloud project, you'll have to set this
custom value to
NEXT_HASURA_PROJECT_ENDPOINTmanually 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_SECRETmanually 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 Projectsand 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.
Saveto save the changes.
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
Integrationssections in Vercel Dashboard and spot the Hasura integration in the list. Click on
Manageto 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.
File a support ticket by navigating to the Help & Support tab on the Hasura Cloud dashboard if you face any issues.