Streamlining Deployment: Building Bitbucket Pipelines for Azure Static Web Apps and Azure App Service using

In today's fast-paced software development landscape, deploying applications efficiently and seamlessly is crucial. In this blog post, I will walk you through the process of setting up Bitbucket Pipelines to automate the deployment of a web application built using JavaScript and Node.js to Azure Static Web Apps and Azure App Service.

Here is my simple bitbucket pipeline, to build and publish Nodejs based API(server app) to Azure App service, and JS based client app to Azure Static Web app

image: node:18

pipelines:
  default:
    - parallel:
        - step:
            name: Server - Build and Test
            caches:
              - node
            script:
              - cd server
              - npm install
              - echo 'Add test later'
        - step:
            name: Code linting
            script:
              - cd server
              - npm install eslint
              - echo 'Add eslint config file to server'
            caches:
              - node
  branches:
    master:
      - parallel:
          - step:
              name: Server Code:Build
              caches:
                - node
              script:
                - cd server
                - npm install
                - apt update && apt install zip
                # Exclude files to be ignored
                - zip -r app-wp-cloud-$BITBUCKET_BUILD_NUMBER.zip . -x *.git* bitbucket-pipelines.yml
              artifacts:
                - server/*.zip
          - step:
              name: Client Code:Build
              script:
                - cd client
                - npm ci
                - npm run build
              artifacts:
                - client/dist/**
              variables:
                - VITE_API_URL: $VITE_API_URL
                - VITE_AUTH_TOKEN: $VITE_AUTH_TOKEN

          - step:
              name: Security Scan
              script:
                # Run a security scan for sensitive data.
                # See more security tools at https://bitbucket.org/product/features/pipelines/integrations?&category=security
                - pipe: atlassian/git-secrets-scan:0.5.1
      - parallel:
          - step:
              name: Server Code:Deploy to Production
              trigger: manual
              script:
                - cd server
                - pipe: atlassian/azure-web-apps-deploy:1.0.1
                  variables:
                    AZURE_APP_ID: $AZURE_CLIENT_ID
                    AZURE_PASSWORD: $AZURE_CLIENT_SECRET
                    AZURE_TENANT_ID: $AZURE_TENANT_ID
                    AZURE_RESOURCE_GROUP: $AZURE_RESOURCE_GROUP
                    AZURE_APP_NAME: $AZURE_SERVER_APP_NAME
                    ZIP_FILE: server-$BITBUCKET_BUILD_NUMBER.zip
          - step:
              name: Client Code:Deploy to Production
              trigger: manual
              script:
                - pipe: microsoft/azure-static-web-apps-deploy:main
                  variables:
                    APP_LOCATION: '$BITBUCKET_CLONE_DIR/client/dist'
                    OUTPUT_LOCATION: ''
                    SKIP_APP_BUILD: 'true'
                    API_TOKEN: $deployment_token
  custom:
    client:
      - step:
          name: Client Code:Build
          script:
            - cd client
            - npm ci
            - npm run build
          artifacts:
            - client/dist/**
          variables:
            - VITE_API_URL: $VITE_API_URL
            - VITE_AUTH_TOKEN: $VITE_AUTH_TOKEN
      - step:
          name: Client Code:Deploy to test
          deployment: test
          script:
            - pipe: microsoft/azure-static-web-apps-deploy:main
              variables:
                APP_LOCATION: '$BITBUCKET_CLONE_DIR/client/dist'
                OUTPUT_LOCATION: ''
                SKIP_APP_BUILD: 'true'
                API_TOKEN: $deployment_token
                DEPLOYMENT_ENVIRONMENT: test

This Bitbucket Pipeline configuration defines a series of steps to build, test, lint, and deploy both the server and client components of your application to Azure services. Here's a breakdown of the main sections:

Image Definition: The pipeline starts with defining the Docker image to use for running the pipeline steps. In this case, it uses the node:18 image.

Default Steps: These steps will be executed for all branches by default. It includes parallel steps for building and testing the server as well as performing code linting.

Branch-Specific Steps (master branch): These steps are specific to the master branch. It includes parallel steps for building and testing the server, building the client code, and performing a security scan. It also includes manual deployment steps for deploying to the production server and deploying client code to production.

Custom Steps (client branch): These steps are defined under the custom section and are executed only for a specific branch named client. It includes building and deploying the client code to a test environment.

This pipeline configuration demonstrates how to integrate Bitbucket Pipelines with Azure services to automate the deployment process for your JavaScript and Node.js applications. It covers build steps, testing, code linting, security scanning, and deployment to both production and test environments. Make sure to replace the placeholder variables (e.g., $AZURE_CLIENT_ID, $VITE_API_URL) with actual values relevant to your project.

With this pipeline in place, your deployment process becomes more efficient and reliable, allowing you to focus on building great applications without worrying about the deployment intricacies.