CI/CD Made Easy: Bitbucket to XM Cloud and Vercel

In this blog, we’ll explore how to integrate a Bitbucket CI/CD pipeline with XM Cloud. Recently, we worked with a client who used Bitbucket to manage their repositories, and we discovered that integrating XM Cloud with Bitbucket isn’t as straightforward as it is with Azure DevOps. So, let’s walk through how you can achieve this integration using Bitbucket.

We will divide this blog in 2 parts.

  • Part 1: Creating project in XM Cloud
  • Part 2: Setting Up the CI/CD pipeline

Creating project in XM Cloud

When working with Bitbucket, you can use the XM Cloud portal to create a project; however, you won’t be able to link it directly to Bitbucket due to the lack of native integration. To set this up, you can follow these steps:

  • Create a repository in Bitbucket by using import repository options.
  • Clone the repository to your local machine.
  • Push the entire XM Cloud project codebase to Bitbucket.
  • Use the Sitecore CLI deploy app command to deploy the code from your local environment to XM Cloud.

Now for 4th point, where we need to push the whole solution to XM Cloud using Sitecore CLI deployment command, we need to create few things before that. Please see the below points.

  • From Credential tab, create Client ID and Client Secret from Deploy App Portal in XMC. Follow this link for same
  • Using Sitecore CLI deployment command, we need to create project and environment in XMC.

When you run the commands below step-by-step, the project creation command will return a Project ID. You will use this ID later when creating environments.

Follow below commands.

       
#XM Cloud Login Command. We are using Non-Interactive Login       
dotnet sitecore cloud login --client-credentials --client-id <{{Client ID}}> --client-secret <{{Client Secret}}> --allow-write

#XM Cloud Project Create Command
dotnet sitecore cloud project create --name {{Project Name}}

#XM Cloud Environment Create Command
dotnet sitecore cloud environment create --name {{Environment Name}} --project-id {{Project ID}}

#XM Cloud Listing All Environment Command using Project Id
dotnet sitecore cloud environment list --project-id {{Project ID}}

dotnet sitecore cloud deployment create --environment-id {{Environment ID}} --upload

#Use this command when there is lot of content and you need to increase timeout
dotnet sitecore cloud deployment create --environment-id {{Environment ID}} --upload --timeout 60000

This way your project is deployed to XMC. Now we will see how we can automate this one using BitBucket Pipelines.

Setting Up the CI/CD pipeline

Step 1: Go to you repository in BitBucket. Click on Repository Settings.

Step 2: Click on Settings and check the Enable Pipeline checkbox.

Step 3: After the above checkbox is enabled, now you can access the repository variables. We will add all the variable that is common across all environment here.You can make the value secure too while adding variables

Step 4: Select Deployments option. Here we will add environment specific value that is needed for successful deployment.

Step 5: Let's create some variable for Vercel Environment like preview and prod as mentioned below.

Step 6: Now its time to write the pipeline where we will use all these variables. Below is the yml for reference

       
image: mcr.microsoft.com/dotnet/sdk:6.0

# REUSABLE STEPS
definitions:
  steps:
    - step: &sitecore-deployment
        name: Sitecore Deployment
        deployment: dev
        script:
          - apt-get update && apt-get install -y jq
          - dotnet tool restore
          - echo $SITECORE_CM_URL
          - echo $SITECORE_CLIENT_ID
          - echo $SITECORE_CLIENT_SECRET
          - echo $SITECORE_ENV_ID
          - dotnet sitecore cloud login --client-credentials --client-id $SITECORE_CLIENT_ID --client-secret $SITECORE_CLIENT_SECRET --allow-write true
          - dotnet sitecore cloud deployment create --environment-id $SITECORE_ENV_ID --no-start --no-watch --upload --trace
          - export DEPLOYMENT_ID=$(dotnet sitecore cloud deployment list --environment-id $SITECORE_ENV_ID --json | jq -r 'sort_by(.createdAt) | reverse | .[0].id')
          - echo $DEPLOYMENT_ID
          - dotnet sitecore cloud deployment start --deployment-id $DEPLOYMENT_ID

    - step: &vercel-deployment-production
        name: Vercel Deployment Production
        image: node:22.11.0
        script:
          - npm install --global vercel
          - echo $VERCEL_PROJECT_ID
          - echo $VERCEL_ORG_ID
          - echo $VERCEL_TOKEN
          - vercel pull --yes --environment=$VERCEL_ENVIRONMENT_NAME --token=$VERCEL_TOKEN
          - vercel build --prod --token=$VERCEL_TOKEN
          - vercel deploy --prod --token=$VERCEL_TOKEN

    - step: &vercel-deployment-preview
        name: Vercel Deployment Preview
        image: node:22.11.0
        script:
          - npm install --global vercel
          - echo $VERCEL_PROJECT_ID
          - echo $VERCEL_ORG_ID
          - echo $VERCEL_TOKEN
          - vercel pull --yes --environment=$VERCEL_ENVIRONMENT_NAME --token=$VERCEL_TOKEN
          - vercel build --token=$VERCEL_TOKEN
          - vercel deploy --prebuilt --token=$VERCEL_TOKEN

# TRIGGER FOR STEPS
pipelines:
  branches:
    main:
      - step:
          <<: *sitecore-deployment
          name: Dev Sitecore Deployment
          deployment: dev
      - step:
          <<: *vercel-deployment-production
          name: Production Vercel Deployment
          deployment: production

    develop:
      - step:
          <<: *sitecore-deployment
          name: Dev Sitecore Deployment
          deployment: dev

      - step:
          <<: *vercel-deployment-preview 
          name: Preview Vercel Deployment
          deployment: preview    
        
    feature/*:
      - step:
          <<: *vercel-deployment-preview
          name: Preview Vercel Deployment
          deployment: preview

Now let's try to understand how it take values which we have configured under repository variables and deployments section. The highlighted one in below command where deployment parameter is used, it refers to the same section under Deployments what we have configured. This basically respresent <<: *sitecore-deployment as the reusable steps that can be used across your pipelines. This pipeline also included Vercel deployment. The VERCEL_ENVIRONMENT_NAME is useful to identify whether the current build should be preview or production build and the step is changed accordingly. I will not go deep to make you understand the whole pipeline but it is very straight forward.

       
 pipelines:
  branches:
    main:
      - step:
          <<: *sitecore-deployment
          name: Dev Sitecore Deployment
          deployment: dev
      - step:
          <<: *vercel-deployment-production
          name: Production Vercel Deployment
          deployment: production

Thank you for reading. Keep learning and sharing!!!. Also one additional point, when you prepare bitbucket pipeline, you can validate the same for any syntax error here

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

References:

  • https://www.linkedin.com/pulse/develop-deploy-sitecore-xm-cloud-bitbucket-yaochang-liu-ra0hf/

Comments

Post a Comment

Popular posts from this blog

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

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

Sitecore 10.2 Installation using Windows PowerShell

Image
Hello everyone. Another blog post is here. This time we will see, how we can install Sitecore 10.2 locally using Windows PowerShell. Before proceeding for installation, there are some software's which will be required to be installed on system. Required Software: Visual Studio 2019 SQL server 2017 and above .NET  Framework 4.8 and above Once installed, we can proceed with Sitecore 10.2 installation. Step 1: Open Windows PowerShell (run as administrator) Step 2:  Run Command:   Set-ExecutionPolicy -Scope CurrentUser Unrestricted and Select Y Step 3:  Check if SIF framework is available:  Get-Module -Name SitecoreInstallFramework -ListAvailable Step 4: I f 2.3.0 is available, skip step 5 Step 5: If yes, then check the version. For Sitecore 10.2 the version should be 2.3.0. If 2.3.0 is not available then update your SIF version using command:  Update-Module SitecoreInstallFramework -force Step 6:   Now Enable the Co...
Read more