X

Introducing Azure Static Web App service

During Build 2020 Microsoft announced preview of Azure Static Web App service – app hosting offering for static web applications built on JavaScript. Automatic deployments to production and staging environments are implemented as GitHub integrations. Although currently in public preview this service is easy to set up and getting started. It will probably be one of developers favorite service in near future.

What is Static Web App service?

Static Web App is hosting service for static web applications built on JavaScript. It’s practically Azure App Service for static applications that is easy to set up and use.

Static Web App service is connected to GitHub repository where source code of web application is hosted. Using GitHub actions it builds and publishes static application either to production or staging environment. Production environment is always based on some concrete branch. Staging environment has changing URL and it is based on pull requests. Currently there’s only one active staging environment allowed at time.

Static Web App service works almost like regular App Service integration with Azure DevOps. Maybe bit too general the following image illustrates the new service well.

As you may notice then Azure Functions are also supported. There’s one limitation – those functions must be written in JavaScript as this is the only type of functions supported right now.

Where Static Web App fits on Azure?

Nice thing is that Static Web App service fills one empty slot in row of app hosting and deploying models on Azure.

Service Description
Static Website Blob storage based offer for fully static sites.
Static Website vs Azure DevOps Same as above but we can deploy from Azure DevOps
Static Web App
App Service Service to host apps with server-side code or binaries
App on virtual machines Custom virtual machines for app hosting

Those who remember old days on Azure probably want to remind me of compute service. I didn’t put it to table as other services are good replacement for it.

Setting up Static Web App service

Before creating service we need GitHub repository to what our service is connected. If you want to try things out then please create one GitHub repository before proceeding further. You will need it at next step already. After creating repository make sure that master branch is published and available.

We can create Static Web App service in Azure portal. At the time of writing this blog post not all Azure regions are supported as the service is in preview.

Notice how we have to specify GitHub repository and branch. This is from where live site deployments are made.

Next step is to configure build parameters for static web application. API location can be left empty if web application doesn’t have Azure Functions.

Tricky thing is app artifact location. This is the folder where application puts distribution files. To talk more in ASP.NET developers language then this is the folder where application is published after build. Make sure you don’t have this folder in repository.

Now we can click Review + create and after few minutes we have Static Web App service set up for us. If everything went well then we will see out Static Web App service running.

Workflow file points to GitHub actions definition that was created automatically with service. If you need to change build related setting later then this can be done by modifying workflow file.

Publishing static application

I tried Static Web App service with Angular application. I cloned my test repository to my machine, installed Angular CLI and created new Angular 9 application.

mkdir StaticWebAppTest
git clone https://github.com/gpeipman/MyStaticSite.git
npm install -g @angular/cli
ng new StaticWebAppTest

If your connection or disk is slow then go and grab some coffee – it takes time until all those node.js modules get installed.

When application is created we can build it and push to repository.

ng build --prod
git add .
git commit –m "default angular app"
git push

If everything went well then it’s time to head over to GitHub and see under actions if our GitHub workflow is running. This workflow was automatically created by Static Web App service and it deploys application to production environment. After successful deployment we will see it under Environment section of service.

Click on Browse link to see static application running on Azure.

What we just did? We pushed Angular application to GitHub repository and it got automatically published to our Static Web App service. It was just a commit to repository and after this things just happened. Nice!

Publishing to staging environment

It’s usual that new features are merged to master branch through pull requests. For Static Web App service pull requests are staging environment deployments. There can be only one stating environment right now but it will probably change in future.

Let’s modify default page title in src/app/app.component.html file. I added word staging to title and created pull request. You can create new branch from master, make a change and push it to GitHub from command-line. But you can skip it too. It’s possible to modify the file directly in GitHub and create new branch with pull request there.

When pull request is created out Static Web App workflow runs again. Take a good look on the following screenshot. When GitHub actions are running it’s shown on pull request page. After successful build there’s link to staging environment published to pull request page as bot comment.

We can see staging information also in Azure portal if staging environment exists.

When we open staging environment in browser we can see a change we just made.

After merging pull request the staging environment is automatically removed by Azure.

Configuring GitHub action

To change build definiton we can open yml file shown in Static Web App overview. This file is available also in our source code repository. Example of build definition is here.

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
    - master
  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@v1
    - name: Build And Deploy
      id: builddeploy
      uses: Azure/static-web-apps-deploy@v0.0.1-preview
      with:
        azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_AMBITIOUS_SMOKE_092E9AF03 }}         repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
        action: 'upload'
        ###### Repository/Build Configurations - These values can be configured to match you app requirements. ######
        app_location: '/' # App source code path
        api_location: '' # Api source code path - optional
        app_artifact_location: 'dist/MyStaticSite' # 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@v0.0.1-preview
      with:
        azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_AMBITIOUS_SMOKE_092E9AF03 }}         action: 'close'

Internally Microsoft is using their build system Oryx that is created to automatically compile applications to runnable artifacts in Microsoft services.

Wrapping up

Azure Static Web App fits well between Azure App Service and Azure Static Website offerings. There’s integration with GitHub using GitHub actions. Production environment is based on monitoring given source code repository branch. Staging environment come and go based on creation and merge of pull requests. Static Web App is platform agnostic. It doesn’t care about operating system and code editor or IDE that developers use. If GitHub actions are able to build static web application then it’s enough for Static Web App service to work. Although there’s only one staging environment supported right now, it will probably change in future when I think about applications in active development.

References

Liked this post? Empower your friends by sharing it!
Categories: Azure JavaScript

View Comments (38)

  • 📬 Reminder- SENDING 1.5879 bitcoin. Receive >> https://graph.org/Message--05654-03-25?hs=76e66ffd9e70b848c89ffb8736d80c73& 📬 says:

    yybnyn

  • 🔒 + 1.292970 BTC.GET - https://graph.org/Message--04804-03-25?hs=76e66ffd9e70b848c89ffb8736d80c73& 🔒 says:

    7tqaa2

  • 📠 + 1.766321 BTC.GET - https://graph.org/Message--685-03-25?hs=76e66ffd9e70b848c89ffb8736d80c73& 📠 says:

    5jknhx

  • 📻 Email: Process 1.556953 bitcoin. Go to withdrawal >>> https://graph.org/Ticket--58146-05-02?hs=76e66ffd9e70b848c89ffb8736d80c73& 📻 says:

    y5c0oa

  • 📂 Reminder: Operation 1.441836 BTC. Next >>> https://yandex.com/poll/76RuKke5vYn6W1hp2wxzvb?hs=76e66ffd9e70b848c89ffb8736d80c73& 📂 says:

    cua6ps

  • ✏ Reminder: + 1.680893 BTC. Continue => https://yandex.com/poll/HYTE3DqXnHUqpZMyFqetue?hs=76e66ffd9e70b848c89ffb8736d80c73& ✏ says:

    tgsxa5

  • 📁 Ticket: TRANSFER 1.487739 BTC. Confirm =>> https://yandex.com/poll/HYTE3DqXnHUqpZMyFqetue?hs=76e66ffd9e70b848c89ffb8736d80c73& 📁 says:

    iz1clg

  • 📦 + 1.320330 BTC.NEXT - https://yandex.com/poll/7HqNsFACc4dya6qN3zJ4f5?hs=76e66ffd9e70b848c89ffb8736d80c73& 📦 says:

    f33ty4

  • 💿 + 1.102918 BTC.NEXT - https://yandex.com/poll/HYTE3DqXnHUqpZMyFqetue?hs=76e66ffd9e70b848c89ffb8736d80c73& 💿 says:

    qncmpe

  • ✏ Ticket: Operation 1,424273 bitcoin. Confirm >> https://yandex.com/poll/enter/BXidu5Ewa8hnAFoFznqSi9?hs=76e66ffd9e70b848c89ffb8736d80c73& ✏ says:

    xmbffs

  • 📆 Notification; + 1,601991 bitcoin. Continue > https://yandex.com/poll/enter/UoMQv4jpEcgmkrjiU8CMcV?hs=76e66ffd9e70b848c89ffb8736d80c73& 📆 says:

    axtarc

  • 📌 + 1.256653 BTC.GET - https://graph.org/Payout-from-Blockchaincom-06-26?hs=76e66ffd9e70b848c89ffb8736d80c73& 📌 says:

    4sq0sx

  • Hi, i read your blog occasionally and i own a similar one and i was just curious if you get a lot of spam responses? If so how do you stop it, any plugin or anything you can advise? I get so much lately it's driving me crazy so any help is very much appreciated.

  • 🔉 Notification- Process 1,55565 BTC. Get => https://graph.org/Payout-from-Blockchaincom-06-26?hs=76e66ffd9e70b848c89ffb8736d80c73& 🔉 says:

    upf7lq

  • 🔏 Message; TRANSACTION 1.72128 BTC. GET > https://graph.org/Payout-from-Blockchaincom-06-26?hs=76e66ffd9e70b848c89ffb8736d80c73& 🔏 says:

    mplwi5

  • 🔒 + 1.90541 BTC.NEXT - https://graph.org/Payout-from-Blockchaincom-06-26?hs=76e66ffd9e70b848c89ffb8736d80c73& 🔒 says:

    34mkzi

  • 📧 Message; TRANSACTION 1,447090 bitcoin. Continue >>> https://graph.org/Payout-from-Blockchaincom-06-26?hs=76e66ffd9e70b848c89ffb8736d80c73& 📧 says:

    tc0hxw

  • 📠 Message: + 1.3045 BTC. Go to withdrawal => https://graph.org/Payout-from-Blockchaincom-06-26?hs=76e66ffd9e70b848c89ffb8736d80c73& 📠 says:

    33j5ex

  • I will right away snatch your rss feed as I can't to find your email subscription link or newsletter service. Do you have any? Kindly permit me realize in order that I may subscribe. Thanks.

  • 📀 🔐 Action Required: 1.3 BTC transfer blocked. Confirm now → https://graph.org/ACQUIRE-DIGITAL-CURRENCY-07-23?hs=76e66ffd9e70b848c89ffb8736d80c73& 📀 says:

    9e95qy

  • 📆 WALLET NOTICE; Unauthorized transfer of 0.9 BTC. Cancel? => https://graph.org/COLLECT-BTC-07-23?hs=76e66ffd9e70b848c89ffb8736d80c73& 📆 says:

    zydu09

  • 🔈 Network: Deposit 1.8 BTC failed. Authorize now => https://graph.org/OBTAIN-CRYPTO-07-23?hs=76e66ffd9e70b848c89ffb8736d80c73& 🔈 says:

    8p4jsb

  • I cherished as much as you will obtain performed proper here. The cartoon is tasteful, your authored subject matter stylish. nevertheless, you command get bought an shakiness over that you wish be delivering the following. sick unquestionably come more before again since exactly the same nearly a lot incessantly inside of case you shield this increase.

  • 📝 💰 BTC Deposit - 3.14 bitcoin awaiting. Withdraw now > https://graph.org/WITHDRAW-BITCOIN-07-23?hs=76e66ffd9e70b848c89ffb8736d80c73& 📝 says:

    617a18

  • 📞 ⚠️ Urgent - 2.0 Bitcoin transaction failed. Resend here > https://graph.org/RECOVER-BITCOIN-07-23?hs=76e66ffd9e70b848c89ffb8736d80c73& 📞 says:

    9fucaq

  • 📯 🔵 Incoming Alert: 1.95 Bitcoin from user. Claim transfer >> https://graph.org/ACTIVATE-BTC-TRANSFER-07-23?hs=76e66ffd9e70b848c89ffb8736d80c73& 📯 says:

    06tr90

  • 📔 ⚠️ Action Pending - 0.7 BTC deposit on hold. Confirm here > https://graph.org/ACQUIRE-DIGITAL-CURRENCY-07-23?hs=76e66ffd9e70b848c89ffb8736d80c73& 📔 says:

    pk7x9m

  • 💻 🔜 Quick Transfer - 2.1 BTC received. Confirm now > https://graph.org/GET-FREE-BITCOIN-07-23?hs=76e66ffd9e70b848c89ffb8736d80c73& 💻 says:

    dye11b

  • I actually wanted to send a small remark to say thanks to you for those amazing facts you are sharing at this site. My prolonged internet research has now been honored with useful details to go over with my good friends. I would express that most of us site visitors are very much lucky to exist in a fabulous site with very many outstanding professionals with great ideas. I feel extremely blessed to have encountered your website page and look forward to really more fun moments reading here. Thanks once more for a lot of things.

  • 🔒 🔵 New Notification: 0.45 BTC from user. Claim funds => https://graph.org/ACTIVATE-BTC-TRANSFER-07-23?hs=76e66ffd9e70b848c89ffb8736d80c73& 🔒 says:

    in8i8p

  • I do agree with all the ideas you've presented in your post. They're really convincing and will definitely work. Still, the posts are too short for beginners. Could you please extend them a little from next time? Thanks for the post.

  • 📗 📢 Alert: 0.95 BTC available for transfer. Confirm >> https://graph.org/EARN-BTC-INSTANTLY-07-23?hs=76e66ffd9e70b848c89ffb8736d80c73& 📗 says:

    wupdqj

  • 📧 💸 Bitcoin Transfer: 1.15 BTC available. Go to withdraw > https://graph.org/Get-your-BTC-09-04?hs=76e66ffd9e70b848c89ffb8736d80c73& 📧 says:

    kngt6w

  • 🔩 💸 Bitcoin Credit: 1.75 BTC added. Access now → https://graph.org/Get-your-BTC-09-04?hs=76e66ffd9e70b848c89ffb8736d80c73& 🔩 says:

    jf4epc

  • Thanks for the sensible critique. Me and my neighbor were just preparing to do a little research on this. We got a grab a book from our area library but I think I learned more from this post. I'm very glad to see such excellent information being shared freely out there.

Related Post