l

Request A Quote

Understanding Preview Environments

Part 2 of 3: Azure Static Web Apps – Blazor Web Assembly Front End and C# Azure Functions Backend – Local Development First Method

The purpose of this 3-Part article is to describe the steps necessary to setup an Azure Static Web Apps application from scratch creating a development environment first using Blazor Web Assembly Client Front end and C# Http Functions back end. All of this will be done in Visual Studio where we can debug both the Client and API at the same time all the while using nearly purely C# for Client and Back End programing.

Azure Static Web Apps is a very flexible and powerful tool on Azure. You can mix and match different frontend frameworks with many different backend frameworks. This series will focus on using C# for both the Frontend and Backend.

Prerequisites:

      • A GitHub Account
      • An Azure Account
      • Visual Studio 2022 (Community Edition will be just fine)
      • Nodejs and NPM installed

Part 2 – Understanding Preview Environments

In our previous section (Part-2) we discussed setting up our Local Development Environment and deploying our code through GitHub and on to Azure Static Web Apps. Obviously, we are not always deploying to production. So how do we allow people to test our changes before they go live? In this section we will discuss how to do that.

Make Changes to the Application Code

Starting from our project that we created in the previous part the default behavior is to create a preview environment anytime that we do a pull request to the main branch. Let’s explore that.

Remember to start the application by opening a command prompt, changing directories to the place where our application code is and executing “npm start”

In Visual Studio, ensure that the Solution we created in the previous part is open and click on the “Git Changes” tab.

Create a branch named “remove_api_url”.

Open Index.razor and delete line 13.
Return to the “Git Changes” tab and enter a comment like: “remove API URL from home page”, and then click on “Commit All”

Push Changes to GitHub

Click on the “Push” button.

Click the link to “Create a pull request”
This will open the GitHub.com website for you to make a pull request from remove_api_url branch to master. Enter a comment if you like and then click on the “Create pull request” button.
On the resulting screen you will see that it will start to build your code.
You can click the details link to watch the build in progress.

After it completes you can return to the pull request, and you will notice that it looks like this now.

Browse Environments

We now have a link to our preview environment. Click that link and we should notice that the API URL information is not on the home page anymore.

Furthermore, if we go to the Azure Portal, and in to our Static Web Apps resource that we created earlier, and investigate the Environments tab we will now see something like this.
If we were to browse the production URL we would see that the API URL is still on the home page because we have not merged our remove_api_url branch to master yet.

Complete the Merge

Back in GitHub and in the pull request click on the “Merge pull request” button.

And then click on the “Confirm merge” button.
Click the “Delete branch” button since we will no longer need it.
If you click on Actions, you will see 2 workflows working, one to remove the previous branch and environment, and the other to build master from its new code that has been pushed to it.

Review Environments

When we look at the Environments tab again in our Azure Static Web Apps resource, we now only see the Production environment.

If we browse to our production environment now, we will see that the API URL is no longer on the Home Page.
In Visual Studio switch back to the “master” branch and then hit the pull button.

You will see a notice that your repository has been updated to a specific commit.

Finally, delete your local copy of the “remove_api_url” branch.

Preview Environment Limitations

According to Microsoft the Preview Environments have the following limitations:

    • Staged versions of your application are currently accessible publicly by their URL, even if your GitHub repository is private.
    • The number of pre-production environments available for each app deployed with Static Web Apps depends on the hosting plan you are using. For example, with the Free tier you can have 3 pre-production environments in addition to the production environment.
    • Pre-production environments are not geo-distributed.
    • Currently, only GitHub Actions deployments support pre-production environments.


Experiment: All Branches are Preview Branches

If we want all of the branches to be preview branches without having to do a pull request, we can modify our yml build file.
 

    1 – In the Visual Studio application click the “Switch between solutions and available views”.

    2 – Double click on the “Folder View”

    3 – Browse through the .github folder and the workflows folder and then open the yml file.

    4 – Update line 6 from master to ‘**’. Furthermore add a production_branch key to the builddeploy job with the value of “master”. This is what my yml file looks like right now.

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - '**'
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - master

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_PROUD_MEADOW_0D38B1F10 }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          production_branch: "master"
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "Client" # App source code path
          api_location: "Api" # Api source code path - optional
          output_location: "wwwroot" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_PROUD_MEADOW_0D38B1F10 }}
          action: "close"

Commit, and push this branch like you did before.

Now return to GitHub and check on the actions. You will see that it is building this branch and environment.

You can watch it build if you like.

You will now see that you have a link like this:

If you were to return to the Static Web Apps Resource that we created on Azure we will notice that it created this Preview Deployment for us.
Also, back in GitHub when we do our pull request it will create yet another preview branch for us.

After the pull request has been created your environments will look like this

In Github you can merge, and confirm merge on the pull request, as well as delete the branch.

In GitHub and on the Actions tab you will see that it is working on deleting and merge your branches.

Once everything is complete you should be back to just one Production environment pointing to the master branch and a preview environment still pointing to the preview_branches branch. You can delete that preview environment.

Experiment: Only certain branches are Preview Environments

According to Microsoft: ” You can configure your site to deploy every change made to branches that aren’t a production branch. This preview deployment is published at a stable URL that includes the branch name. For example, if the branch is named dev, then the environment is available at a location like -dev..azurestaticapps.net. ” (https://docs.microsoft.com/en-us/azure/static-web-apps/branch-environments?tabs=github-actions)

The advantage to having named branches is that you will always know what URL will be associated with which branch. Earlier when we were doing pull requests, we didn’t know the URL until a Pull Request was submitted. When we were doing all branches, we didn’t know what the URL would be until we pushed our branch. In this place we will know what the URL is once a commit has been pushed to a specific branch in a predictable manner. This will be especially important when dealing with 3rd party identity providers and registering our application with them.

      1 – Switch back to the master branch in Visual Studio and pull the changes.

      2 – Delete your local copy of the preview_branches branch.

      3 – Create a new branch called named_branches

      4 – Update your yml file such that the push branches have names in the array like so

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - master
      - dev
      - stage
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - master

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_PROUD_MEADOW_0D38B1F10 }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          production_branch: "master"
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "Client" # App source code path
          api_location: "Api" # Api source code path - optional
          output_location: "wwwroot" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_PROUD_MEADOW_0D38B1F10 }}
          action: "close"

      5 – Commit and push the changes in Visual Studio, then create a pull request and merge the changes in to master using the github website.

      6 – Delete the named_branches branch from github.

      7 – Review the actions tab of github and wait for all the workflows to run.

When everything is complete you should have something like this. You can go ahead and delete the current preview deployment environment.
We will now create the dev and stage branches just using the github website.

Browse to the Github.com website and browse to the repository that has the code for your static web app.

Click the master branch drop down and then in the find or create a branch space type in dev and then click on Create branch dev from master.

If you click on the Actions tab withing GitHub, you will see this branch being created as an environment for Static Web Apps.
When that has completed building your environments should look something like this:
Return to github and create a “stage” branch in the exact same way that you created the dev branch.
After the build and deploy for that is complete your environments tab in Azure Static Web Apps should look like this:

Conclusion

Preview environments are a very useful feature of Azure Static Web Apps. In other environments you might have one App Service for the Client Dev, and yet another App Service for the Server Dev, and ditto for Staging and Production. With this set up you can have all this happening within one repository and one Azure resource as opposed to six or more Azure resources. Having branched environments will also make it easier to configure authentication providers. Where we last left off with only certain branches are Preview Branches, it will now only build an environment any time the dev, stage, or master branches are updated. We have a few options here. We could update our YAML file such that pull requests branches match exactly the push branches. We could put ‘**’ for either the push or pull request branches or any number of combinations of things that will work for your workflow. What triggers these builds will be up to you and your workflow, and are all configurable in the workflow YAML file.

About Black Slate

Black Slate is a Software Development Consulting Firm that provides single and multiple turnkey software development teams, available on your schedule and configured to achieve success as defined by your requirements independently or in co-development with your team. Black Slate teams combine proven full-stack, DevOps, Agile-experienced lead consultants with Delivery Management, User Experience, Software Development, and QA experts in Business Process Automation (BPA), Microservices, Client- and Server-Side Web Frameworks of multiple technologies, Custom Portal and Dashboard development, Cloud Integration and Migration (Azure and AWS), and so much more. Each Black Slate employee leads with the soft skills necessary to explain complex concepts to stakeholders and team members alike and makes your business more efficient, your data more valuable, and your team better. In addition, Black Slate is a trusted partner of more than 4000 satisfied customers and has a 99.70% “would recommend” rating.