# Vercel

> Source: https://agilitycms.com/docs/developers/vercel

1. Deploy instantly
2. Preview with ease
3. Scale automatically
4. Serve your content around the world with its global CDN

## Agility CMS and Vercel

Vercel offers an extremely helpful marketplace that allows you to extend and automate your workflow by integrating with your favorite tools, such as Agility CMS!

Our integration with Vercel will set the environment variables that allow you to connect to your data from Agility CMS in your Vercel applications. In addition, it will also configure your Agility CMS instance with a preview and production domain, which enables direct links for your editing team.

## Deploy from the Content Manager

You can deploy our template starters using the Vercel integration built-in to the Agility CMS Manager.

### Step 1: Deployment Settings

Start by heading into **Settings > Sitemaps**, then clicking **Setup Deployment.**

![](https://cdn.aglty.io/agility-cms-docs/block-editor/developerarticles/Screen-Shot-2021-03-11-at-12.57.25-PM-09292021142839-11112021185354.png)

### Step 2: Vercel Automated Deployment

Select the Vercel Automated Deployment option to connect to Vercel and deploy your website.

![](https://cdn.aglty.io/agility-cms-docs/block-editor/developerarticles/Screen-Shot-2021-03-11-at-12.58.19-PM-09292021142900-11112021185506.png)

### Step 3: Create Git Repository

First, create a Git Repository for your project to ensure you can easily update your project after deploying it.

![](https://cdn.aglty.io/agility-cms-docs/block-editor/developerarticles/Screen-Shot-2021-07-13-at-12.49.54-PM-09292021142919-11112021185555.png)

### Step 4: Add Agility CMS Integration

Next, Install the Agility CMS integration that will authorize access between Vercel and your Agility CMS content so that we can automatically configure your **Production** and **Preview** domains, as well as set up your **Environment Variables**.

![](https://cdn.aglty.io/agility-cms-docs/block-editor/developerarticles/Screen-Shot-2021-07-13-at-12.51.04-PM-09292021142944-11112021185731.png)

### Step 5: Deploy

Lastly, Vercel will fetch the source code for the template starters and it will be cloned into your Git repository. Vercel will also build your project and upload/deploy your build output.

![](https://cdn.aglty.io/agility-cms-docs/block-editor/developerarticles/Screen-Shot-2021-07-13-at-12.51.49-PM-09292021143030-11112021185937.png)

Once deployed you will be taken back to your Agility CMS Manager, and you will see that your Production and Preview domains have been set. You can click on the link to view your live site.

![](https://cdn.aglty.io/agility-cms-docs/block-editor/developerarticles/Screen-Shot-2021-03-11-at-1.01.26-PM-09292021143042-11112021190000.png)

## Deploy from GitHub Repo

On the GitHub repositories for our starter templates, you will notice a **Deploy to Vercel** button. This button will *create an instance* in Agility, and automatically *deploy* it to **Vercel**, also configuring the necessary environment variables for you.

Vercel provides a frictionless experience that handles all of the hard things for you:

Vercel is an all-in-one platform for frontend frameworks, supporting the best of both worlds with static and hybrid deployment options, as well as providing dynamic computations with the use of serverless functions.

![How to deploy Vercel with Agility CMS](https://cdn.aglty.io/agility-cms-docs/block-editor/developerarticles/Screen_Shot_2021-10-04_at_12.37.19_PM-10132021184955.png)

Upon clicking the button, you will be taken into the deployment flow.

### Step 1: Create Git Repository

First, to ensure you can easily update your project after deploying it, a Git repository must be created. 

![Create Git Repository to deploy Vercel with Agility CMS](https://cdn.aglty.io/agility-cms-docs/block-editor/developerarticles/Screen_Shot_2021-10-04_at_12.38.57_PM-10132021185025.png)

### Step 2: Add Agility CMS Integration

Next, you'll need to add the Agility CMS Integration.

![CMS integration to deploy Vercel with Agility CMS](https://cdn.aglty.io/agility-cms-docs/block-editor/developerarticles/Screen_Shot_2021-10-04_at_12.43.42_PM-10132021185036.png)

### Step 3: Authenticate with Agility CMS

When you add the integration, you'll be prompted to sign in or sign up.

![Authenticating Agility CMS](https://cdn.aglty.io/agility-cms-docs/block-editor/developerarticles/Screen_Shot_2021-10-04_at_12.44.07_PM-10132021185050.png)

### Step 4: Create a New Agility CMS Instance

After creating a new account or logging into your existing account, you will be able to create a new Agility CMS Instance.

![Creating new instance in Agility CMS](https://cdn.aglty.io/agility-cms-docs/block-editor/developerarticles/Group_2-10132021185102.png)

When your Agility CMS Instance is created, you will be able to click to open your new Instance or click **OK** to continue with the deployment process.

![Open a new blog with Agility CMS](https://cdn.aglty.io/agility-cms-docs/block-editor/developerarticles/Group_2_copy-10132021185113.png)

Once the Agility CMS Integration has been added successfully and your instance has been created, Vercel will deploy your project, automatically configuring any necessary environment variables.

![New blog started with Agility CMS](https://cdn.aglty.io/agility-cms-docs/block-editor/developerarticles/Screen_Shot_2021-05-26_at_5.25.02_PM-10132021185122.png)

## Adding the Agility CMS Integration from Vercel Marketplace

To add our Integration, search for the Agility CMS Integration in the [Vercel Marketplace](https://vercel.com/integrations/agility-cms), then click on **Add Integration**.

![Add Agility CMS integration from Vercel marketplace](https://cdn.aglty.io/agility-cms-docs/block-editor/developerarticles/Screen_Shot_2021-10-05_at_10.17.41_AM-10132021185203.png)

### Step 1: Select your Vercel Scope

You will then be asked to select a Vercel Scope to add the Integration to, select your Personal Account or your Vercel Team.

![Add Agility CMS to a Vercel scope](https://cdn.aglty.io/agility-cms-docs/block-editor/developerarticles/Screen_Shot_2021-10-05_at_10.20.26_AM-10132021185214.png)

### Step 2: Project Selection

Next, select the Projects to which the Integration will be added.

![Add Agility CMS to Vercel project&nbsp;](https://cdn.aglty.io/agility-cms-docs/block-editor/developerarticles/Screen_Shot_2021-10-05_at_10.31.15_AM-10132021185228.png)

### Specific Projects

Selecting **Specific Projects** will apply the environment variable values from a **Single Instance** to the **Selected Project**. You will most likely want to select this option.

### All Projects

Selecting **All Projects** will configure and apply the environment variable values from a **Single Instance** to **ALL** of your Vercel projects. This will *overwrite* any existing Agility CMS environment variables that you may have already set on these projects.

This option may be useful if you plan on using multiple environments, e.g. *DEV, QA, UAT, PROD*.

### Step 3: Authenticate with Agility CMS

Login or Sign Up to Agility CMS.

![Verifying Agility CMS integration&nbsp;](https://cdn.aglty.io/agility-cms-docs/block-editor/developerarticles/Screen_Shot_2021-10-04_at_12.44.07_PM-10132021185336.png)

### Step 4: Select Your Agility CMS Instance

After authenticating with Agility CMS, select an Instance to apply environment values from.

![Blog with Agility CMS and Next.js](https://cdn.aglty.io/agility-cms-docs/block-editor/developerarticles/Group_3-10132021185347.png)

## Managing Access and Permissions

![Managing Agility CMS permissions&nbsp;](https://cdn.aglty.io/agility-cms-docs/block-editor/developerarticles/Screen_Shot_2021-10-05_at_11.20.03_AM-10132021185409.png)

After adding the Agility CMS Integration to your Vercel project(s), you will be able to manage the Integrations access and permissions from your [Vercel Dashboard](https://vercel.com/dashboard/integrations).
