Edit

Share via

Tutorial: Deploy Bitbucket repositories on Azure Static Web Apps

  • Article
  • 07/24/2024

Azure Static Web Apps has flexible deployment options that allow to work with various providers. In this tutorial, you deploy a web application hosted in Bitbucket to Azure Static Web Apps using a Linux virtual machine.

Note

The Static Web Apps pipeline task currently only works on Linux machines.

In this tutorial, you learn to:

  • Import a repository to Bitbucket
  • Create a static web app
  • Configure the Bitbucket repo to deploy to Azure Static Web Apps

Prerequisites

Create a repository

This article uses a GitHub repository as the source to import code into a Bitbucket repository.

  1. Sign in to Bitbucket.

  2. Go to https://bitbucket.org/repo/import to begin the import process.

  3. Under the Old repository label, in the URL box, enter the repository URL for your choice of framework.

  4. Next to the Project label, select Create new project.

  5. Enter MyStaticWebApp.

  6. Select Import repository and wait a moment while the website creates your repository.

Set main branch

From time to time the template repository have more than one branch. Use the following steps to ensure Bitbucket maps the main tag to the main branch in the repository.

  1. Select Repository settings.
  2. Expand the Advanced section.
  3. Under the Main branch label, ensure main is selected in the drop down.
  4. If you made a change, select Save changes.
  5. Select Back.

Create a static web app

Now that the repository is created, you can create a static web app from the Azure portal.

  1. Go to the Azure portal.

  2. Select Create a Resource.

  3. Search for Static Web Apps.

  4. Select Static Web Apps.

  5. Select Create.

  6. In the Basics section, begin by configuring your new app.

    Setting Value
    Azure subscription Select your Azure subscription.
    Resource Group Select the Create new link and enter static-web-apps-bitbucket.
    Name Enter my-first-static-web-app.
    Plan type Select Free.
    Region for Azure Functions API and staging environments Select the region closest to you.
    Source Select Other.

  7. Select Review + create.

  8. Select Create.

  9. Select Go to resource.

  10. Select Manage deployment token.

  11. Copy the deployment token value and set it aside in an editor for later use.

  12. Select Close on the Manage deployment token window.

Create the pipeline task in Bitbucket

  1. Go to the repository in Bitbucket.

  2. Select the Source menu item.

  3. Ensure the main branch is selected in the branch drop down.

  4. Select Pipelines.

  5. Select text link Create your first pipeline.

  6. On the Starter pipeline card, select Select.

  7. Enter the following YAML into the configuration file.

    pipelines:
  branches:
   main:
    - step: 
        name: Deploy to test
        deployment: test
        script:
          - chown -R 165536:165536 $BITBUCKET_CLONE_DIR
          - pipe: microsoft/azure-static-web-apps-deploy:main
            variables:
                APP_LOCATION: '$BITBUCKET_CLONE_DIR/src'
                OUTPUT_LOCATION: '$BITBUCKET_CLONE_DIR/src'
                API_TOKEN: $deployment_token

    Note

    In this example the value for pipe is set to microsoft/azure-static-web-apps-deploy:main. Replace main with your desired branch name if you want your pipeline to work with a different branch.

    The following configuration properties are used in the configuration file for your static web app.

    The $BITBUCKET_CLONE_DIR variable maps to the repository's root folder location during the build process.

    Property Description Example Required
    app_location Location of your application code. Enter / if your application source code is at the root of the repository, or /app if your application code is in a directory named app. Yes
    api_location Location of your Azure Functions code. Enter /api if your api code is in a folder named api. If no Azure Functions app is detected in the folder, the build doesn't fail, the workflow assumes you don't want an API. No
    output_location Location of the build output directory relative to the app_location. If your application source code is located at /app, and the build script outputs files to the /app/build folder, then set build as the output_location value. No

Next, define value for the API_TOKEN variable.

  1. Select Add variables.
  2. In the Name box, enter deployment_token, which matches the name in the workflow.
  3. In the Value box, paste in the deployment token value you set aside in a previous step.
  4. Check the Secured checkbox.
  5. Select Add.
  6. Select Commit file and return to your pipelines tab.

Wait a moment on the Pipelines window and you'll see your deployment status appear. Once the deployment is finished running, you can view the website in your browser.

View the website

There are two aspects to deploying a static app. The first step creates the underlying Azure resources that make up your app. The second is a Bitbucket workflow that builds and publishes your application.

Before you can go to your new static site, the deployment build must first finish running.

The Static Web Apps overview window displays a series of links that help you interact with your web app.

  1. Return to your static web app in the Azure portal.
  2. Go to the Overview window.
  3. Select the link under the URL label. Your website loads in a new tab.

Clean up resources

If you're not going to continue to use this application, you can delete the Azure Static Web Apps instance and all the associated services by removing the resource group.

  1. Select the static-web-apps-bitbucket resource group from the Overview section.
  2. Select Delete resource group at the top of the resource group Overview.
  3. Enter the resource group name static-web-apps-bitbucket in the Are you sure you want to delete "static-web-apps-bitbucket"? confirmation dialog.
  4. Select Delete.

The process to delete the resource group may take a few minutes to complete.

Next steps

Add an API