Deploying Sitecore XM Cloud & JSS Apps to Vercel with Azure DevOps Pipeline: A Step-by-Step Guide

Deploying Sitecore XM Cloud or JSS (headless) applications to Vercel using Azure DevOps Pipelines is an efficient way to streamline your continuous integration and deployment processes. By leveraging the Vercel Deployment Extension and Vercel CLI, you can ensure rapid and reliable updates to your production environment. This guide will walk you through the steps to deploy your applications, covering different deployment methods, verifying successful deployments, and passing required parameters via Azure DevOps environment variables. By the end, you'll have a clear understanding of how to automate and optimize your deployment workflow for seamless integration with Azure DevOps Pipelines.

Why Use Azure DevOps Pipeline with Vercel?

Azure DevOps Pipeline is a strong CI/CD tool that works well with Vercel, a modern platform for front-end deployment. By using these tools together, you can:

• Automate deployments to Vercel with little manual work.

• Use Vercel CLI for more advanced deployment settings.

• Send environment variables safely to Vercel through Azure DevOps.

• Check deployments to make sure they work.

This setup is perfect for Sitecore XM Cloud or JSS applications, allowing for quicker and more reliable deployments. 🔝

You can find more information about Azure DevOps here

Prerequisites

Before starting, ensure you have the following:

1. Sitecore XM Cloud or JSS Application: A fully developed application ready for deployment. Here, I am using the Sitecore Demo XM Cloud Verticals GitHub repository. 🔝

2. Access the Sitecore XM Cloud Deploy App to get the environment variable details for the site you plan to deploy. In this article, I am using the PREVIEW context of the XM Cloud Site:

3. Vercel Account: Sign up at Vercel.

4. Azure DevOps Account: Sign up at Azure DevOps. You need to have an Azure DevOps Project and upload your codebase to the Azure Repo. If your code is in a GitHub Repo, you can also clone an existing GitHub repo to the Azure Repo.

Step 1: Obtain Necessary Credentials and Tokens

1. From Sitecore XM Cloud

Log in to the Sitecore XM Cloud Portal and access the Sitecore XM Cloud Deploy App to obtain the environment variable details for the site you plan to deploy. In this article, I am using the PREVIEW context of the XM Cloud Site. 🔝

2. From Vercel

Log in to the Vercel Portal

Create a Personal Access Token (PAT) in Vercel

Go to your Vercel account settings and create a new token by following the steps mentioned at Creating an Access Token. Set the access scope to the team where your Vercel project is located. This token will be used to authenticate the connection between Azure DevOps and Vercel.

Create a empty Vercel Project

Make sure you have a blank Vercel project set up without Git integration. There are three ways to create empty Vercel project: 🔝

1️⃣ Use the Vercel CLI commands: Run these commands from the main folder of your project. If your Next.js folder is inside another folder, you don't need to run these commands from that inner folder. For example, use \Sitecore.Demo.XMCloud.Verticals.

# To download and install Vercel CLI, run the following command:
> npm i -g vercel
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.        
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated uuid@3.3.2: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.

added 244 packages in 44s
npm notice
npm notice New major version of npm available! 10.9.0 -> 11.1.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.1.0
npm notice To update run: npm install -g npm@11.1.0
npm notice

# To verify if the Vercel CLI was installed successfully, check the Vercel CLI version.
> vercel --version
Vercel CLI 41.1.1
41.1.1

# Log in to Vercel: This will prompt you to log in using your 
# Vercel account (you can log in via browser or email)
> vercel login

# When you run vercel in a directory for the first time, 
# the Vercel CLI needs to know which scope and Vercel Project 
# you want to deploy your directory to. You can either link to an existing
# Vercel Project or create a new one.
> vercel
? Set up and deploy "C:\Amit\Sitecore.Demo.XMCloud.Verticals"? [Y/n] y
? Which scope do you want to deploy to? amitkumar-team
? Link to existing project? [y/N] n
? What’s your project’s name? amitkumar-azuredevops
? In which directory is your code located? ./
Local settings detected in vercel.json:
No framework detected. Default Project Settings:
- Build Command: `npm run vercel-build` or `npm run build`
- Development Command: None
- Install Command: `yarn install`, `pnpm install`, `npm install`, or `bun install`
- Output Directory: `public` if it exists, or `.`
? Want to modify these settings? no
🔗  Linked to amitkumar-team/amitkumar-azuredevops (created .vercel and added it to .gitignore)

2️⃣ Login to Vercel and go to your team and click on Add New Project 🔝

On the add new project screen, use V0.dev, an AI-powered tool by Vercel. Enter the prompt empty vercel project or new blank project and it will create a empty Vercel project without Git (code repo) integration:

If you go to the Vercel project screen, you will see the new empty project: 🔝

With the screenshot above, you can easily see that there is no Git repository integrated with the Vercel Project. 🔝

Now, you need to run the following Vercel CLI commands from the root of the project folder to get the Project ID and Organization ID:

# Log in to Vercel: This will prompt you to log in using your 
# Vercel account (you can log in via browser or email)
> vercel login

# When you run vercel in a directory for the first time, 
# the Vercel CLI needs to know which scope and Vercel Project 
# you want to deploy your directory to. You can either link to an existing
# Vercel Project or create a new one.
> vercel
? Set up and deploy "C:\Amit\Sitecore.Demo.XMCloud.Verticals"? [Y/n] y
? Which scope do you want to deploy to? amitkumar-team
? Link to existing project? [y/N] y
? What’s the name of your existing project? v0-new-project-8icygpvyfrv
🔗  Linked to amitkumar-team/v0-new-project-8icygpvyfrv (created .vercel and added it to .gitignore)

3️⃣ You can remove the Git repository from the current Vercel project. To do this, go to your Vercel Project > Settings > Git, and click the Disconnect button next to the linked Git repository. 🔝

In all three methods mentioned above to create the empty project, we always need the Vercel Project ID and Organization ID. 🔝

We can easily find the Vercel Project ID by logging into Vercel, going to your Vercel Project, and looking for the Project ID there.

To find the Vercel Organization ID, we need to run the Vercel CLI command vercel, just like in Option ONE and Option TWO. This will create a .vercel folder with a project.json file inside. We don't need to include this file in the code repository for this Vercel CLI will add it to the .gitignore file. This file contains both the Vercel Project ID and Organization ID: 🔝

// C:\Amit\Sitecore.Demo.XMCloud.Verticals\.vercel\project.json
{
    "projectId": "prj_lFKba",
    "orgId": "team_m8Oxxx"
}

// C:\Amit\Sitecore.Demo.XMCloud.Verticals\.gitignore
.vercel

Step 2: Creating an Azure DevOps Pipeline for Vercel

Option 1: Deploying from Azure DevOps to Vercel using Azure DevOps Extension (Vercel Deployment Extension)

To start, install the Vercel Deployment Extension from the Visual Studio Marketplace. This extension allows you to automatically deploy your Azure DevOps projects to Vercel. The Vercel CLI is a powerful tool that makes it easy to deploy your applications to Vercel. Here’s how you can use it in your Azure DevOps Pipeline: 🔝

Install Vercel Deployment Extension

• Navigate to your Azure DevOps project.

• Open the Vercel Deployment Extension from the Marketplace

• Install the extension in your Azure DevOps organization.

Validate Vercel Deployment Extension Installation

• To check if the Vercel extension is installed, go to your Azure Projects > Pipelines > click New pipeline > Azure Repos Git > Select Your Repository > Select Starter Pipeline > Show assistant > Search vercel: if you see the task for Vercel, it means the installation was successful. 🔝

  

Create a new New Pipeline File

• Navigate to root of your code repository in Azure Repo. 🔝

• Create a new pipeline file and name it vercel-deploy-using-vercel-extension.yml.

• Add a deployment task using the Vercel Deployment Task (refer to step 5 in the screenshot above) to deploy to Vercel.

    # Azure Pipeline to deploy Next.js code from Azure Repo to Vercel using 
    # Vercel Deployment Extension
  
    # Trigger the pipeline on changes to the feature/VERCEL-ADD-ON branch
    trigger:
    - feature/VERCEL-ADD-ON
  
    # Use the latest Ubuntu image for the build agent
    pool:
      vmImage: ubuntu-latest
  
    steps:
    # Step to deploy the project to Vercel using the Vercel Deployment Extension
    - task: vercel-deployment-task@1
      inputs:
        vercelProjectId: $(VERCEL_PROJECT_ID)  # Vercel project ID
        vercelOrgId: $(VERCEL_ORG_ID)          # Vercel organization ID
        vercelToken: $(VERCEL_TOKEN)           # Vercel token for authentication
        production: true                       # Deploy to production environment
  

  In the pipeline above, I am passing the environment variables to the Vercel Deployment Task. You can find the values for these variables as explained in the earlier step (2. From Vercel). 🔝

You can add these as variables in your Azure DevOps pipeline variables:

Now, we need to use the new pipeline file vercel-deploy-using-vercel-extension.yml in Azure Pipeline. To do this, go to Azure Projects > Pipelines > click on New pipeline > Azure Repos Git > Select Your Repository > Select Existing Azure Pipelines YAML file and choose your YAML Pipeline file vercel-deploy-using-vercel-extension.yml > click on Validate and save. 🔝

Execution of Azure Pipeline to deploy to Vercel

• Once you execute this pipeline, it will initialize the job, check out your code repository, and execute the Vercel-Deployment-Task. This task will verify the token, and we are providing the token from both the vercelToken input and the VERCEL_TOKEN environment variable, but the input field vercelToken will be used here. 🔝

> This information is used to shape the CLI roadmap and prioritize features.
> You can learn more, including how to opt-out if you'd not like to participate in this program, by visiting the following URL:
> https://vercel.com/docs/cli/about-telemetry
Retrieving project…
> Downloading `production` Environment Variables for amitkumar-team/amitkumar-azuredevops
Downloading
Created .vercel/.env.production.local file  [217ms]

> Downloading project settings
Downloaded project settings to ~/work/1/s/.vercel/project.json [0ms]
/usr/local/bin/vercel deploy --prod --token=xxx --cwd=/home/vsts/work/1/s
Vercel CLI 41.1.4
Retrieving project…
Deploying amitkumar-team/amitkumar-azuredevops
Inspect: https://vercel.com/amitkumar-team/amitkumar-azuredevops/xxxx [2s]
Production: https://amitkumar-azuredevops-preview-xxxx.vercel.app [2s]
Queued # ****>> At this point deployment start at vercel side <<****
Building
Completing
Successfully deployed to https://amitkumar-azuredevops-preview-xxxx.vercel.app
Finishing: verceldeploymenttask

The Vercel-Deployment-Task will also download the production environment variables for your vercel project, amitkumar-team/amitkumar-azuredevops, which you have set up in the Vercel Project

Additionally, the root directory details of your Sitecore XM Cloud Next.js codebase (src/sxastarter) will be retrieved from your Vercel project:

Depending on your Vercel project setup, you need to specify the environment type for the vercel-deployment-task. Make sure to define all the environment variables your code requires in the Vercel project, as I haven't found a way to pass them from the Azure Pipeline. 🔝

In our case, we plan to use the PREVIEW context of the XM Cloud Site, so we need to set the environment variables PUBLIC_URL, SITECORE_EDGE_CONTEXT_ID, SITECORE_SITE_NAME, and JSS_EDITING_SECRET in the Vercel project

• On the Vercel side, the vercel-deployment-task will start the build and deployment, and the build log details are: 🔝

    Running build in Washington, D.C., USA (East) – iad1
    Retrieving list of deployment files...
    Downloading 2156 deployment files...
    Restored build cache from previous deployment (GhvGCyL1bHFMcQNrgwYL85cD3QBc)
    Running "vercel build"
    Vercel CLI 41.1.3
    Installing dependencies...
    changed 1 package in 4s
    320 packages are looking for funding
    run `npm fund` for details
    Detected Next.js version: 14.2.8
    Running "npm run build"
    > sxastarter@22.2.0 build
    > cross-env NODE_ENV=production npm-run-all --serial bootstrap next:build
  
    > sxastarter@22.2.0 bootstrap
    > ts-node --require dotenv-flow/config --project tsconfig.scripts.json scripts/bootstrap.ts
    Registering generate-component-builder plugin component-builder
    Registering generate-component-builder plugin components
    Registering generate-component-builder plugin feaas
    Registering generate-component-builder plugin packages
    .
    .
    .
    .
    ▲ Next.js 14.2.8
    - Environments: .env
    Linting and checking validity of types ...
    Creating an optimized production build ...
    ✓ Compiled successfully
    Collecting page data ...
    Generating static pages (0/6) ...
    Generating static pages (1/6)
    Generating static pages (2/6)
    Generating static pages (4/6)
    .
    .
    .
    .
    Traced Next.js server files in: 33.768ms
    Created all serverless functions in: 762.373ms
    Collected static files (public/, static/, .next/static): 5.915ms
    Build Completed in /vercel/output [53s]
    Deploying outputs...
    Deployment completed
  

  Once the deployment at Vercel is successful, it will display a snapshot of your Sitecore XM Cloud Website, which was deployed using the Sitecore Demo XM Cloud Verticals GitHub repository: 🔝

  

  💡

  In the above screenshot, you can clearly identify that deployment happened to Vercel using Azure DevOps Pipeline marked as vercel deploy and deployment which trigger from the your Code Repository marked with your code branch name and here it’s feature/SITECORE-SEARCH.

  Option 2: Deploying from Azure DevOps to Vercel using Vercel CLI Commands

  To begin using the Vercel CLI commands to deploy your Sitecore XM Cloud codebase stored in the Azure Repo and incorporate them into your Azure Pipeline, you need to have all the necessary environment variables ready, such as VERCEL_ORG_ID, VERCEL_PROJECT_ID, and VERCEL_TOKEN. Here's how you can use them in your Azure DevOps Pipeline:

  Create a new New Pipeline File

  • Navigate to root of your code repository in Azure Repo.

  • Create a new pipeline file and name it vercel-deploy-using-vercel-cli.yml and trigger the pipeline on changes to the feature/VERCEL-CLI branch 🔝

      # Deploying Next.js code from Azure DevOps to Vercel using Vercel CLI
    
      name: Deploying to Vercel
    
      # Trigger the pipeline on changes to the feature/AZURE-DEVOPS branch
      trigger:
      - feature/VERFCEL-CLI
    
      # Use the latest Ubuntu image for the build agent
      pool:
        vmImage: 'ubuntu-latest'
    
      steps:
      # Step to install the Vercel CLI globally
      - script: |
          npm install -g vercel
          vercel --version
        displayName: 'Install Vercel CLI'
    
      # Step to pull the Vercel project configuration and adjust the workingDirectory path to 
      # match your project structure
      - script: |
          vercel pull --yes --environment=production --token=$VERCEL_TOKEN --debug
        displayName: 'Pull Vercel Project'
        timeoutInMinutes: 5
        workingDirectory: 'src/sxastarter'
    
      # Step to check the Vercel configuration and adjust the root folder of your Next.js codebase
      - script: |
          ls -la $(System.DefaultWorkingDirectory)/src/sxastarter/.vercel
          cat $(System.DefaultWorkingDirectory)/src/sxastarter/.vercel/project.json
        displayName: 'Check Vercel Configuration'
    
      # Step to verify and set up the Vercel configuration if not already set
      # Check if the `.vercel` folder exists and contains the correct `project.json` file
      - script: |
          echo "Checking Vercel configuration..."
          if [ ! -f $(System.DefaultWorkingDirectory)/src/sxastarter/.vercel/project.json ]; then
            echo "Vercel project configuration not found. Creating new link..."
            vercel link --token $VERCEL_TOKEN --yes
          else
            echo "Vercel project configuration found."
          fi
        displayName: 'Check and setup Vercel configuration'
        env:
          VERCEL_TOKEN: $(VERCEL_TOKEN)
    
      # Step to deploy the project to Vercel
      - script: |
          echo "Deploying to Vercel..."
          DEPLOY_URL=$(vercel deploy --token $VERCEL_TOKEN --prod --yes)
          echo "Deployment URL: $DEPLOY_URL"
          echo "##vso[task.setvariable variable=DEPLOY_URL;]$DEPLOY_URL"
        displayName: 'Deploy to Vercel'
        env:
          VERCEL_TOKEN: $(VERCEL_TOKEN)
          VERCEL_ORG_ID: $(VERCEL_ORG_ID)
          VERCEL_PROJECT_ID: $(VERCEL_PROJECT_ID)
    
      # Step to verify the deployment status on Vercel
      - script: |
          echo "Verifying deployment..."
          echo "Deployment URL: $(DEPLOY_URL)"
          DEPLOY_ID=$(basename $(DEPLOY_URL))
          echo "Deployment ID: $DEPLOY_ID"
          RESPONSE=$(curl -s -H "Authorization: Bearer $VERCEL_TOKEN" \
            "https://api.vercel.com/v6/deployments/$DEPLOY_ID")
          echo "API Response: $RESPONSE"
          DEPLOY_STATUS=$(echo $RESPONSE | python -c "import sys, json; print(json.load(sys.stdin)['readyState'])")
          echo "Deployment status: $DEPLOY_STATUS"
          if [ "$DEPLOY_STATUS" != "READY" ]; then
            echo "Deployment failed or is still in progress."
            exit 1
          fi
        displayName: 'Verify Vercel Deployment'
        env:
          VERCEL_TOKEN: $(VERCEL_TOKEN)
          DEPLOY_URL: $(DEPLOY_URL)
    

    In the pipeline code above, I am using several steps, and the details are:

  • Steps:

    • Install Vercel CLI:

      • This step installs the Vercel CLI globally using npm and verifies the installation by printing the version. 🔝

    • Pull Vercel Project:

      • This step pulls the Vercel project configuration using the Vercel CLI.

      • The --yes flag automatically confirms any prompts, and the --debug flag provides detailed output.

      • The workingDirectory parameter specifies the directory where the Vercel project configuration should be pulled.

        💡

        If you have defined the workingDirectory once, you don't need to specify it again for other commands. Otherwise, it will show an error due to a non-existent path.

    • Check Vercel Configuration:

      • This step lists the contents of the .vercel directory and prints the project.json file to verify the Vercel configuration. 🔝

    • Check and Setup Vercel Configuration:

      • This step checks if the Vercel project configuration file exists. If not, it creates a new link to the Vercel project using the Vercel CLI.

    • Deploy to Vercel:

      • This step deploys the project to Vercel using the Vercel CLI and sets the DEPLOY_URL variable with the deployment URL.

    • Verify Vercel Deployment:

      • This step verifies the deployment status on Vercel by making an API request to the Vercel API.

      • The python command is used to parse the JSON response and extract the readyState field.

      • If the deployment status is not READY, the step fails with an error message.

  • Now, we need to use the new pipeline file vercel-deploy-using-vercel-cli.yml in Azure Pipeline and define the necessary variables in your Azure DevOps pipeline variables. To do this, follow the steps explained in Option-1.

    Execution of Azure Pipeline to deploy to Vercel using Vercel CLI

    • Once you execute this pipeline, it will start the job, check out your code repository, install the Vercel CLI, pull the Vercel project, verify the Vercel configuration, initiate the build at Vercel, and finally, check if the deployment status is READY to confirm its success. 🔝

These are the different ways to deploy your Sitecore XM Cloud or Sitecore JSS applications from Azure Repo using Azure DevOps Pipeline, Vercel Deployment Extension, and Vercel CLI. You can choose any option based on your needs.

Key Point to Remember

When setting up, configuring, and developing an Azure DevOps Pipeline to deploy from an Azure Repo using the Vercel Deployment Extension or Vercel CLI, you should consider the following important points or information that will be helpful for your understanding or provide suggestions to improve your build and deployment process: 🔝

• Is it necessary to pass the VERCEL_ORG_ID and VERCEL_PROJECT_ID from the Azure pipeline?

• Is the vercel build --prod --token=$(vercel-token) command not needed? 🔝

For Sitecore XM Cloud and Next.js projects, the usual Vercel deployment process should work fine most of the time, as Vercel is optimized for Next.js deployments.

vercel build --prod --token=$VERCEL_TOKEN
# If you're using the --prebuilt flag with vercel deploy, which assumes the project is already built .
vercel deploy --prebuilt --prod --token=$VERCEL_TOKEN

• Is there any need to setup the environment variables PUBLIC_URL, SITECORE_EDGE_CONTEXT_ID, SITECORE_SITE_NAME, and JSS_EDITING_SECRET in the Vercel project? 🔝

  ➡️ Yes, after creating a blank Vercel project, you should set up the environment variables for specific environments. If you don't, your build will fail because Vercel won't know which XM Cloud Site to get data from or the context of the ID, leading to errors like this:

    Error fetching site information
    Error: Please configure either your sitecoreEdgeContextId, or your graphQLEndpoint 
    and sitecoreApiKey.
    at createGraphQLClientFactory (/vercel/path0/src/lib/graphql-client-factory/create.ts:26:11)
    at MultisitePlugin.<anonymous> (/vercel/path0/scripts/config/plugins/multisite.ts:20:50)
    .
    .
    .
    Error: Invalid GraphQL endpoint '/sitecore/api/graph/edge'. Verify 
    that 'layoutServiceHost' property in 'scjssconfig.json' file or appropriate
     environment variable is set
    at new GraphQLRequestClient (/vercel/path0/node_modules/@sitecore-jss/sitecore-jss/dist/cjs/graphql-request-client.js:80:19)
    at Object.clientFactory (/vercel/path0/node_modules/@sitecore-jss/sitecore-jss/dist/cjs/graphql-request-client.js:100:33)
    .
    .
    .
    > Build error occurred
    Error: Failed to collect page data for /[[...path]]
    at /vercel/path0/node_modules/next/dist/build/utils.js:1268:15
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5) {
    type: 'Error'
    }
    ERROR: "next:build" exited with 1.
    Error: Command "npm run build" exited with 1
  

• Do you need to set a Framework for your empty Vercel project in the Build & Development Settings on Vercel? 🔝

  ➡️ Yes, it's generally recommended to set a Framework for your empty Vercel project in the Build & Development Settings, even if you're starting with a blank project. If you don't set it, the build won't happen, and it will incorrectly show that the deployment is completed:

    Running build in Washington, D.C., USA (East) – iad1
    Retrieving list of deployment files...
    Previous build cache not available
    Downloading 2156 deployment files...
    Running "vercel build"
    Vercel CLI 41.1.3
    Build Completed in /vercel/output [212ms]
    Deploying outputs...
    Deployment completed
    Uploading build cache [29.00 B]...
    Build cache uploaded: 105.112ms
  

• Do you need to set a Root Directory for your empty Vercel project in the Settings on Vercel when deploying with a custom pipeline like Azure Pipeline? 🔝

  ➡️ No, you usually don't need to set a Root Directory for an empty Vercel project in the Settings on Vercel. The Root Directory setting is mainly used in specific situations:

  1. When your project's main application is not in the top-level directory of your repository .

  2. In monorepo setups where you have multiple projects within a single repository.

In our case, when deploying the Sitecore XM Cloud or Sitecore JSS application from Azure Pipeline to Vercel, and the Next.js codebase is in a sub-folder, we need to set a Root Directory for an empty Vercel project in the Settings:

If you don't set the Root Directory, your build will fail, and you'll see an error like this: 🔝

Error: No Next.js version could be detected in your project. Make sure `"next"` is installed in "dependencies" or "devDependencies"

• If you want to check whether the environment variable added in Azure DevOps Pipeline (Azure Pipeline Variables) is passed to the pipeline, you can add the following code to your pipeline to verify it:

•       - script: |
            echo "VERCEL_TOKEN: $VERCEL_TOKEN"
            echo "VERCEL_ORG_ID: $VERCEL_ORG_ID"
            echo "VERCEL_PROJECT_ID: $VERCEL_PROJECT_ID"
          displayName: 'Print Environment Variables'
  

  For sensitive variables, it's better not to print these directly. Instead, you can verify if they're set without showing their values 🔝

    steps:
    - script: |
        if [ -n "$VERCEL_TOKEN" ]; then
          echo "VERCEL_TOKENis set"
        else
          echo "VERCEL_TOKENis not set"
        fi
      displayName: 'Check Sensitive Environment Variables'
  

• Use Vercel’s analytics tools to monitor application performance post-deployment.

• Store sensitive data like API keys and tokens securely in Azure DevOps Pipeline Variables.

⚡Learn More About Sitecore XM Cloud and Deployment

If you want to explore more about Sitecore XM Cloud and its deployment process, check out these useful resources: 🔝

🔗 Learn More About Sitecore XM Cloud – A detailed guide on getting started with Sitecore XM Cloud.

🎥 Sitecore XM Cloud Features and Benefits

💡Conclusion

Deploying XM Cloud or JSS applications to Vercel using Azure DevOps Pipelines is a powerful way to automate your deployment workflow. By leveraging the Vercel Deployment Extension and Vercel CLI, you can create flexible and efficient pipelines that meet your project's needs. Whether you're using the extension for automatic deployments or customizing workflows with the CLI, this guide provides a comprehensive approach to integrating Azure DevOps with Vercel. 🔝

If you have any comments, suggestions, or alternative approaches, feel free to share them below!

🤔 Do you have experience passing Next.js environment variables like PUBLIC_URL, SITECORE_EDGE_CONTEXT_ID, SITECORE_SITE_NAME, and JSS_EDITING_SECRET from an Azure DevOps pipeline? If so, drop your insights in the comments! Your input could help the community streamline their deployment workflows.

Looking forward to hearing your thoughts! 🙏

🙏Credit/References

🏓Pingback