Skip to main content

Publish a Static Web App on Azure

I had to create a small personal website. As a big fan of the Jamstack, I like to use a static website generator like next.js, gatsby or hugo. Before  I typically deployed this generated website on Azure Blob storage as a really cheap way to host a static website. But with the introduction of Azure Static Web Apps, it is time to give them a try…

Create a Gatsby static website

There is a large list of available website generators, but as I like GraphQL a lot, I decided to use Gatsby.

First install the gatsby cli:

npm install -g gatsby-cli

Now you can  create a new website on your local machine using one of the available themes:

npx gatsby new example-app https://github.com/LekoArts/gatsby-starter-portfolio-cara

Store the website on Github

We need to store the code of our static website somewhere. This could be a Git repo on Azure DevOps, Github or any other Git enabled repository.

We’ll use Github in this example.

Create a new Github repository at https://github.com/new. Choose a repository name but don’t create a README.md or .gitignore file.

Open a command prompt and go to the website folder on your local machine ( example-app in my example).

Add the newly created Github repo as a remote origin:

git remote add origin https://github.com//example-app

Let's push our code to the Github repo

git branch -M main
git push --set-upstream origin main

Create an Azure Static Web App

Almost there! We have finally arrived at the Azure part.

Go to the Azure portal at https://portal.azure.com. Click on ‘Create a resource’ at the top.

In the search field enter ‘Static Web App’ and hit <enter>. You’ll arrive at the following screen:

Click Create. Now you arrive at the creation screen where you have to enter a lot of details. Select a subscription and resource group and enter a name for your static web app. We choose the free tier and a region close to us.

As a last step we choose Github as our source. Now we need to authenticate with Github. Therefore click on Signin with Github to login with our Github credentials. 

Click on Authorize Azure-App-Service-Static-Web-Apps to grant the necessary permissions to Azure to manipulate our Github repo.

Now we need the Github repository and branch that should be used.

As a last step we can select the Gatsby presets from the Build Presets menu. This will create a default Github Actions workflow for us.

Now click on Review+Create and Create to create our Azure Static Web App.

If you browse to the generated website, you will probably see something like this:

This is because Github Actions still need to deploy and generate the static web app.

Once the Github Actions workflow completes, our Gatsby site is there in all it’s glory:

More information: https://docs.microsoft.com/en-us/azure/static-web-apps/

Popular posts from this blog

XUnit - Assert.Collection

A colleague asked me to take a look at the following code inside a test project: My first guess would be that this code checks that the specified condition(the contains) is true for every element in the list.  This turns out not to be the case. The Assert.Collection expects a list of element inspectors, one for every item in the list. The first inspector is used to check the first item, the second inspector the second item and so on. The number of inspectors should match the number of elements in the list. An example: The behavior I expected could be achieved using the Assert.All method:

Angular --deploy-url and --base-href

As long you are running your Angular application at a root URL (e.g. www.myangularapp.com ) you don’t need to worry that much about either the ‘--deploy-url’ and ‘--base-href’ parameters. But once you want to serve your Angular application from a server sub folder(e.g. www.mywebsite.com/angularapp ) these parameters become important. --base-href If you deploy your Angular app to a subfolder, the ‘--base-href’ is important to generate the correct routes. This parameter will update the <base href> tag inside the index.html. For example, if the index.html is on the server at /angularapp/index.html , the base href should be set to <base href="/angularapp/"> . More information: https://angular.io/guide/deployment --deploy-url A second parameter that is important is ‘--deploy-url’. This parameter will update the generated url’s for our assets(scripts, css) inside the index.html. To make your assets available at /angularapp/, the deploy url should

Azure DevOps/ GitHub emoji

I’m really bad at remembering emoji’s. So here is cheat sheet with all emoji’s that can be used in tools that support the github emoji markdown markup: All credits go to rcaviers who created this list.