Vercel integration with Azure Cosmos DB

  • Applies to: ✅ NoSQL, ✅ MongoDB

Vercel offers a user-friendly and robust platform for web application development and deployment. This new integration improves productivity as developers can now easily create Vercel applications with a backend database already configured. This Integration helps developers transform their creative ideas into reality in real-time.

Getting started with Integrating Azure Cosmos DB with Vercel

This documentation is designed for developers seeking to effectively combine the robust capabilities of Azure Cosmos DB - a multiple-regionally distributed, multi-model database service - with Vercel's high-performance deployment and hosting solution.

This integration enables developers to apply the benefits of a versatile and high-performance NoSQL database, while capitalizing on Vercel's serverless architecture and development platform.

There are two ways to integrate Azure Cosmos DB.

Integrate Cosmos DB with Vercel via Integration Marketplace

Use this guide if you already know which Vercel projects to integrate or want to connect an existing Vercel project with Azure Cosmos DB.

Prerequisites

Steps for Integrating Azure Cosmos DB with Vercel

  1. Select Vercel Projects for the Integration with Azure Cosmos DB. After you have the prerequisites ready, visit the Cosmos DB integrations page on the Vercel marketplace and select Add Integration

    Screenshot shows the Azure Cosmos DB integration page on Vercel's marketplace.

  2. Choose All projects or Specific projects for the integration. In this guide, we proceed by choosing specific projects. Select Install to continue.

    Screenshot shows how to select vercel projects.

  3. Sign in to your existing Microsoft account, or if you don’t have one, create a new account as depicted in next step.

    Screenshot shows how to sign-in to Azure account.

  4. Select 'create one' to create a new Microsoft account.

    Note

    A Microsoft account is different from an Azure Cosmos DB account. We're creating an Azure Cosmos DB account in the following steps.

    Screenshot shows how to create new Microsoft Account.

  5. If you want to use an existing Azure Cosmos DB account, choose the existing Directory, subscription and the Azure Cosmos DB Account, and then skip to step 9. To create a new Azure Try Cosmos DB account, select Create new account.

    Screenshot shows how to create new Azure Try Cosmos DB Account.

  6. Select API type (currently only NOSQL and MongoDB API are supported) and Select Create Account.

    Screenshot shows how to select the type of API of the Azure Cosmos DB account.

  7. After the successful Try Azure Cosmos DB account creation, Select Continue.

    Screenshot shows how to continue with the integration.

  8. Select Accept in the pop-up to access the Try Azure Cosmos DB account.

    Screenshot shows how to accept the access.

  9. Select Integrate and you're done.

    Screenshot shows how to confirm the integration.

Integrate Cosmos DB with Vercel via npm & Command Line

  1. Execute create-next-app with npm, yarn, or pnpm to bootstrap the example:

    npx create-next-app --example with-azure-cosmos with-azure-cosmos-app

yarn create next-app --example with-azure-cosmos with-azure-cosmos-app

pnpm create next-app --example with-azure-cosmos with-azure-cosmos-app

  2. Modify pages/index.tsx to add your code. Make changes to pages/index.tsx according to your needs. You could check out the code at lib/cosmosdb.ts to see how the @azure/cosmos JavaScript client is initialized.

  3. Push the changes to a GitHub repository.

Set up environment variables

  • COSMOSDB_CONNECTION_STRING - You need your Cosmos DB connection string. You can find this credential in the Azure portal in the Keys section.

  • COSMOSDB_DATABASE_NAME - Name of the database you plan to use. This value should already exist in the Azure Cosmos DB account.

  • COSMOSDB_CONTAINER_NAME - Name of the container you plan to use. This value should already exist in the previous database.

Integrate Cosmos DB with Vercel using marketplace template

We have an Azure Cosmos DB Next.js Starter, which a great ready-to-use template with guided structure and configuration, saving you time and effort in setting up the initial project setup. Select Deploy to Deploy on Vercel and View Repo to view the source code.

  1. Choose the GitHub repository, where you want to clone the starter repo. Screenshot to create the repository.

  2. Select the integration to set up Cosmos DB connection keys, these steps are described in detail in previous section.

    Screenshot shows the required permissions.

  3. Set the environment variables for the database name and container name, and finally select Deploy

    Screenshot shows the required variables to establish the connection with Azure Cosmos DB.

  4. Upon successful completion, the completion page would contain the link to the deployed app, or you go to the Vercel project's dashboard to get the link of your app. Now your app is successfully deployed to vercel.

Next steps

  • Last updated on