Contentstack's Integration with Vercel

Vercel is a cloud-based platform for static sites and frontend frameworks that enables developers to build, host, and instantly deploy Jamstack websites or frontend apps. Vercel seamlessly integrates with Contentstack offering frictionless developer experience and enhancing end-user performance.

The Contentstack Vercel integration lets you easily deploy your Contentstack-powered website using Vercel.

The integration helps you link your Contentstack’s stacks with the Vercel project allowing you to instantly fetch, create or update data of your Contentstack project in Vercel.

Now lets understand in detail how to install and use this integration.

Firstly, login to Vercel, goto Vercel’s Integrations Marketplace and navigate to Contentstack’s integration page.
Now, follow the instructions given below to use the Contentstack + Vercel integration.

1. On the Contentstack’s integration page click the Add Integration button.
2. Select a Vercel scope for your integration from the pop-up window and click Continue.
3. Now, select the Vercel projects that will be integrated. Here, you can either choose the All Projects to select all your Vercel projects or some Specific Projects to be integrated.
   Select the required projects to be integrated if you choose the Specific Projects option and click the ADD INTEGRATION button.
4. As shown below, a new window will appear, where you can select your data center:
   Click to enlarge
   
   
5. Login to your Contentstack account and choose the Contentstack organization that you will be connecting with Vercel to link your projects.
   Click to enlarge
   
   
6. After selecting the organization, proceed to link Vercel projects with your stacks and environments.
   From the Vercel projects dropdown, select a project and map it with a stack from your organization. From the list of environments associated with your stack, select one as shown below:
   Click to enlarge
   
   
7. Alternatively, you can add a new project by clicking on the + Add another Vercel Project button or delete your linked projects if you no longer need them.
   

   Note When selecting Vercel projects in step 3, you must select the All Projects option in order to add multiple projects.

8. Finally, click + Add Integration to complete the configuration.

This will successfully install the Contentstack integration for Vercel.
In case you want to configure your integration’s settings, you can click the Configuration button on the integration’s page or click the Manage access button to configure access settings.

Once the integration is completed, you can find your project’s information used as environment variables in Vercel.

In our case, the following environment variables are used in Vercel’s project as shown below:

CONTENTSTACK_API_KEY
CONTENTSTACK_DELIVERY_TOKEN
CONTENTSTACK_ENVIRONMENT
CONTENTSTACK_API_HOST

Here is an example of our SDK function. This function will help you to fetch data from Contentstack to render the Starter Apps pages on Vercel.

import * as contentstack from "contentstack";
import * as Utils from "@contentstack/utils";
const Stack = contentstack.Stack({
api_key: process.env.CONTENTSTACK_API_KEY,
delivery_token: process.env.CONTENTSTACK_DELIVERY_TOKEN,
environment: process.env.CONTENTSTACK_ENVIRONMENT,
});
export default {
/**
*
* fetches all the entries from specific content-type
* @param {* content-type uid} contentTypeUid
* @param {* reference field name} referenceFieldPath
* @param {* Json RTE path} jsonRtePath
*
*/
getEntry({ contentTypeUid, referenceFieldPath, jsonRtePath }) {
return new Promise((resolve, reject) => {
const query = Stack.ContentType(contentTypeUid).Query();
if (referenceFieldPath) query.includeReference(referenceFieldPath);
query
.includeOwner()
.toJSON()
.find()
.then(
(result) => {resolve(result);
},
(error) => {
reject(error);
}
);
});
},

Additional ResourceRead in detail about installing Contentstack integration on Vercel.