Connect your Hygraph project to Vercel

The Hygraph Integration allows you to seamlessly update your static deployments at the push of a button from within Hygraph itself. Not to be confused with triggered builds via webhooks, this integration allows you to install a button in the Hygraph sidebar of a content model for manual redeploys.

#What you can do with the Hygraph-Vercel integration

• Trigger Vercel builds from within your content view with a single click.
• Specify which content models display the button in the sidebar, giving you more control over how builds are triggered when there are changes to your content.

#Prerequisites to use this integration

• When using this integration, you should already have a static site deployed in an active Vercel project. Don't have one? Set up a free Vercel account or learn about other plans!
• You should have an existing Hygraph project. Sign up for a free Hygraph developer account.
• Your Vercel site should be configured to support continuous deployment.

#How to install the Vercel app

To install apps on Hygraph, you should go to our marketplace. Under the Hosting & Deployment category, you will find the Vercel app. Click on it to open the page.

1. Click on the Install Vercel for Hygraph button to start the installation flow.

2. In the dropdown, select which project you want to install the app in, then click on the Add App button. You should be redirected to your Hygraph project dashboard.

3. Click on the Connect to Vercel button to connect Hygraph to the project hosted on Vercel. You should be redirected to the Vercel website, where you can see information about the app and authorize the installation. Click on the Add Integration button to authorize the app.

4. In the dropdown, select the Vercel Account to add the integration to, then click on the Continue button. You will be redirected back to the Hygraph dashboard.

5. Now, select the Vercel project in the dropdown, enter the GitHub repository Branch name and the Display Name. Finally, click on the Save button.

Now that the app is installed, the next step is to add the Vercel build button to the sidebar of to one or more of your project's models, so that you can trigger builds from the content editor.

#How to add the build button to the sidebar

1. On the left side navigation, go to the Schema editor.

2. Under the Models section, click on the model you want to add the Vercel build button to.

3. Click on the Sidebar tab.

4. Under Sidebar Widgets, click on the Deploy to Vercel widget to add it to the sidebar.

   If you can't see the widget in the sidebar, you should do a hard refresh of the page by hitting Ctrl + R (Windows/Linux) or Cmd + R (macOS). Then, you should see it.

5. In the Add Widget pop-up, Display Name and Description fields will be pre-filled. You can edit them if you want. Otherwise, just click on the Create button to add it to the model sidebar.

6. Finally, you can drag and drop the widget by clicking on the six dots icon to reorder the sidebar widgets if you want.

Now, let's learn how to trigger builds from the content editor.

#How to trigger a build

1. Click on the Go to content editing link at the top right of the Schema editor. Alternatively, you can also click on the Content icon, in the left side navigation.
2. Click on the model you added the sidebar widget to.
3. Click on the Edit button of an existing entry. Or click on the Create Entry button.
4. Finally, click on the Start Building button, located in the sidebar. Once you do that, the button state changes and the build will start on Vercel. Under the button, you should see the last date a build has been triggered.

#Using our starter projects with Vercel

Follow these steps:

Hygraph starter - Documentation project used as example

1. Create a new project by selecting one of the starters in Hygraph.

2. Click on the Create project button. You will be redirected to your Hygraph project dashboard.

3. Access the starter's GitHub repository on a different tab, scroll down to visualize the README document contents, and click on the Deploy button.

   You can also alternatively skip steps 1 and 2, and clone the project directly from the GitHub repository mentioned in this step. The Clone project button is next to the Deploy button.

4. Create a GitHub repository for your project, and then provide the values for the required environment variables. Click here for information on how to configure your project easily.

Configure your Vercel Project

1. Click on the Deploy button.

#Environment variables

Use this information to configure your Vercel project.