Deploying Your Web Site to Azure Static Web Apps

💭 Imagine: merging a Pull Request is all it takes to automatically deploy your static or single-page app to a secure, dynamically scaled, and globally distributed network with integrated API support – that’s the promise of Azure Static Web Apps.

Announced during Microsoft Build 2020, Azure Static Web App is a service that automatically builds and deploys static web apps to Azure from a GitHub repository. The features that I find the most interesting are:

• First-party Github integration
• Globally distributed
• Free, auto-renewed SSL certificates
• Integrated API support by Azure Functions
• For now – Free hosting for your static site (Angular, React, etc)

I gave it a try and I have to say: it’s pretty cool! 👍 I’ll have the step-by-step on how to configure and deploy an existing site to Azure Static Web Apps below. The steps seem lengthy but there are really just a few basic steps:

• Create a new “Static Web App” resource and configure basic parameters.
• Point to the GitHub repository of your app.
• After a few screens, your app is automatically deployed and available on its own secure URL on Azure Static Web Apps.

If you want to create a brand new site from scratch, see the official documentation docs.microsoft.com.

Deploying an Existing Static Site to Azure Static Web Apps

As part of the #100DaysOfCode challenge, I’ve been working on a React site that hosts various programming utilities like encoders/decoders, UUID generator, test data generators, etc. It’s a perfect candidate to test out Azure Static Web Apps.

Create Your Static Web App

First, log into Azure Portal and click “Create a resource“, then search for “Azure static web“. You should see Static Web App (Preview) in the search results. Click on it.

Click Create.

Fill out the Basics tab. Most of the fields are self-explanatory. Click “Sign in with GitHub“.

The page expands, showing a few more fields for GitHub. Fill out with the info for your app’s GitHub repository, and choose “Next: Build>“.

On the Build tab, fill in the appropriate values for “App location“, “Api location“, and “App artifact location“. Then click “Review + create“.

“App location” is the root folder for your app. It’s typically / or /app. “Api location” should be left blank if you are unsure. “App artifact location” is the folder to your build.

Review your settings and click Create. Wait a few seconds for the deployment to complete. During the initial deployment, Static Web Apps automatically creates a GitHub Action for you (in the file named azure-static-web-apps-<id>.yml and adds it to your chosen branch. When it’s all done you should see this page:

Click “Go to resource” to go to the resource page for your new Static Web App. On the Overview page, you will see a link to your web app.

Click on “GitHub Action runs” to go over to your GitHub repo and view the status of your deploy Action. You should see a new Action named “ci: add Azure Static Web Apps workflow file”. It should take about two minutes to run.

Switch to the Code tab and see that a new Action file was added to your repo. This is what tells GitHub to automatically build and deploy your app to Azure Static Web Apps.

Bring Up Your Static Web App

It’s time to bring up our web site on Azure Static Web Apps!

Go back to Azure Portal and click on the URL to your app to bring it up. The below screenshot shows my app now running on Azure Static Web Apps with its own unique secure URL.

Custom Domain Name

Adding a custom domain name is pretty straightforward. On Azure Portal, go to the home page of your Static Web App, and click on “Custom domains“, then Add.

On the “Add custom domain” page, note the Azure host name for your site. You will need to create a DNS CNAME record to point your custom domain to that Azure host name. The specifics of this part depends on your domain registrar or web hosting provider. For me, the domain name chinhdo.com is hosted on Pair Networks so I went to their control panel and created there CNAME record there.

After you have created your DNS CNAME record, go back to Azure Portal and paste your custom domain into the “Custom domain” box, then click Validate.

Depending on your DNS settings it can take up to 48 hours for a new DNS record to propagate. In practice it should not take more than an hour. In my case it took about 15 minutes. If you get an error in the next step, just wait some time and try again.

After you get the “Validation succeeded” message, click Add to add your custom domain to your Static Web App. This step took about one minute for me

And now I am able to get to the web site via the custom domain name https://programmers-toolbox.chinhdo.com:

Adding Server Routes

To handle server routes, you need a routes.json file to your build folder. In my React app, I added it to the /public folder.

Server routing is required to handling “hard” navigation to routes that are handled by your single page app. In my case, I have a React route for /uuid which works fine when you navigate there within the app. But you will get a 404 if you go there directly, or do a browser refresh while you are on that page. Server routes take care of that. See the official docs for more info.

{
  "routes": [
    {
      "route": "/uuid",
      "serve": "/index.html",
      "status": 200
    },
    {
      "route": "/encode",
      "serve": "/index.html",
      "status": 200
    },
    {
      "route": "/login",
      "serve": "/index.html",
      "status": 200
    }
  ]
}

Troubleshooting Tips

I did run into one problem with a test site. The initial deployment for it did not happen automatically. I verified that the *.yml file was created but the Action never got executed. I was able to get around that by pushing a “dummy” change to the repository.

Game Changer?

Azure Static Web Apps looks to be a game changer. You are getting important features like SSL, dynamic scaling, global distribution, and GitHub deployment all in one easy-to-use package. Once configured, deploying your changes is as simple as pushing code to your GitHub repository. In fact I have deployed several new versions of the app over the past few days and it worked perfectly fine each time.

If cost is reasonable, I would definitely use it on a permanent basis for my single-page/static sites. Currently Azure Static Web Apps is in preview and is free, but things may change after it goes out of preview.

What do you think about Azure Static Web Apps? I would love to hear your thoughts. Let me know here in the Comments section or on Twitter!