DEV Community

Kumar Nitesh
Kumar Nitesh

Posted on • Edited on

8

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

Enter fullscreen mode Exit fullscreen mode

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.

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay