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 globally 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 Cosmos DB
- Via Vercel Integrations Marketplace
- Via Command Line
Integrate Cosmos DB with Vercel via Integration Marketplace
Use this guide if you have already identified the Vercel project(s) or want to integrate an existing vercel project with
Vercel Account with Vercel Project – Learn how to create a new Vercel Project
Some basic knowledge on Next.js, React and TypeScript
Steps for Integrating Azure Cosmos DB with Vercel
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
Choose All projects or Specific projects for the integration. In this guide we proceed by choosing specific projects, select continue
Next screen will show the required permissions for the integration, select Add Integration
Log in to Azure using your credentials to select the existing Azure Cosmos DB account for the integration
Choose a Directory, subscription and the Azure Cosmos DB Account
Verify Vercel Projects
Integrate Cosmos DB with Vercel via npm & Command Line
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
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
Push the changes to a GitHub repository.
Set up environment variables
COSMOSDB_CONNECTION_STRING - You need your Cosmos DB connection string. You can find these in the Azure portal in the keys section.
COSMOSDB_DATABASE_NAME - Name of the database you plan to use. This should already exist in the Cosmos DB account.
COSMOSDB_CONTAINER_NAME - Name of the container you plan to use. This 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. Click on Deploy to Deploy on Vercel and View Repo to view the source code.
Select the integration to set up Cosmos DB connection keys, these steps are described in detail in previous section.
Set the environment variables for the database name and container name, and finally select Deploy
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.