Deploy and Test Local Feature Branches Like a Pro with Vercel CLI - XM Cloud and Vercel

Hello everyone! In this blog, we'll explore how to use the Vercel CLI to deploy local branch changes to a Vercel Preview environment for quick verification and validation.

Ideally, we have a proper CI/CD pipeline in place to build and deploy changes to the appropriate Vercel environment. However, there are situations—such as urgent bug fixes—where you might need to quickly validate your changes without waiting for the full pipeline. In such cases, you can use the Vercel CLI to deploy your local changes directly, typically to a Preview environment. Even if something goes wrong, Vercel makes it easy to roll back: you can simply redeploy a previous build from the dashboard and restore the environment within minutes

Let's begin by setting up the Vercel CLI on your local machine. At this point, you should have already created a branch from your main or develop branch and pulled the latest commits. You've made your changes and tested them locally — now you're ready to deploy them to Vercel. A project is already setup in vercel as we will be requring the organization id and project id to connect our local repository for build and deploy.

Install Vercel Cli: We will install the cli globally.

       
       npm i -g vercel@latest

To get organization id you can navigate to Vercel dashboard -->select your Organization --> Settings --> General --> Team Id

To get project id you can navigate to Vercel dashboard -->select your Project --> Settings --> General --> Project Id

In our case, My repository is using Bitbucket for build and deployment. I will authenticate using bitbucket login.

Navigate to the root folder of your project and run the following command. If you're working with a single frontend application, this should be your project’s root. However, if you have multiple frontend applications, make sure you navigate to the specific application's root folder that you want to deploy to the corresponding project in Vercel.

       
       vercel login

This will ask you to select an authentication provider. In my case, I selected Bitbucket and once the authentication is done, you will find .vercel folder in your current repository with project.json file. This will include your priject id and organization id. Verify if it is exactly same to make sure the linking of your local branch is properly setup to vercel project.

Now its time for our local branch build and deployment. Run the below command

       
       vercel

You will be ask few things before actually the build and deployment is pushed to vercel. Select the appropriate options. Once done , you can navigate to vercel project dashboard and can see the build is triggered and deployment is taking place.

Once deployment is successful, you can preview the changes now by browsing.

Happy Learning!!

You can check my other blogs too if interested. Blog Website

Comments

Post a Comment

Popular posts from this blog

Sitecore XM Cloud Form Integration with Azure Function as Webhook

Image
Hello everyone, In this blog, we will see, how Azure Function can be used with Sitecore Forms. Before starting, I would request everyone to read my previous blog on XM Cloud Form as I am not going to go deep with how to create forms in XM Cloud. Creating Azure Function : Will serve as our Webhook Creating and Integrating Form : XM Cloud Form Creating An Azure Function I will not explain how you can create Azure Function with Http Trigger. You can check this youtube link here . Also in reference section, I will provide the link how you can connect and deploy your changes to azure function using Visual Studio. Azure Function Code : Its just a starter code which Azure function by default. Creating XM Cloud Form and Integrating with Azure Function Step 1 : Create a form from Form Editor and once form us published, you can see the below view in preview state. Here you can edit your form too. But it always recommended to use a version of that form as whatever changes is done will ...
Read more

Automate RSS Feed to Sitecore XM Cloud: Logic App, Next.js API & Authoring API Integration

Image
Hello everyone, In this blog, we will see a pratical use case of reading RSS feed and creating the respective items in Sitecore XM Cloud. To accomplish the task, we will use Logic App, an API created in Next JS and lastly calling the Authoring API to execute mutation query for Item Creation in Sitecore. Let's divide the process into 2 parts: Logic App : This will mostly focus on fetching the feed from RSS, performing transformation, storing the result in array of json object and pushing the data to next js api endpoint. Next JS API Development : This will take care of calling the authoring api of XM Cloud instance and performing the create item mutation query on the recieved data from Logic App. Logic App Azure Logic App is a cloud-based service provided by Microsoft Azure that allows you to automate workflows and integrate applications, data, services, and systems without writing complex code. It enables you to create automated workflows visually through...
Read more

Create and Fetch Content From Sitecore Content Hub One using GraphQL and React

Image
Hello everyone, In this blog, we will see overview of Sitecore Content Hub One product its benefits, features etc. This blog will walkthrough below listed points. Overview Features Content Hub One Dashboard Creating Taxonomy Creating Content Type Uploading New Media Creating Content Items From Content Type Getting GraphQL Token Creating Sample React Application To Read the Content from Content Hub One Overview Sitecore Content Hub One is a powerful platform. It is designed to centralize and streamline content creation, management, and distribution across various channels.Focuses on delivering content via APIs, enabling seamless integration with various front-end frameworks.Hosted in the cloud, offering scalability, automatic updates, and reduced infrastructure management.Provides flexible APIs and SDKs for developers to integrate and build custom solutions efficiently. Features Headless Content Management : Allows content to be delivered via APIs to any front-end or platfor...
Read more