AzureTipsAndTricks/blog/tip282.md

type	title	excerpt	tags	share	date
post	Tip 282 - Getting started with Azure Static Web Apps	Learn how to get started with Azure Static Web Apps	Web	true	2020-10-15 02:00:00

::: tip

🔥 The FREE Azure Developer Guide eBook is available here.

💡 Learn more : Azure Static Web Apps documentation.

📺 Watch the video : Getting started with Azure Static Web Apps.

:::

Getting started with Azure Static Web Apps

Running static websites in Azure

Static websites are incredibly fast and there are several ways to run them in Azure, like in Azure Storage and in Azure Static Web Apps.

In this post, we'll build a simple static website and run it in Azure Static Web Apps.

Prerequisites

If you want to follow along, you'll need the following:

• An Azure subscription (If you don't have an Azure subscription, create a free account before you begin)
• A GitHub account

Creating a static website with GitHub and Azure Static Web Apps

Azure Static Web Apps can take code from a GitHub repository and publish it using GitHub Actions. Let's do that.

We need to start with a GitHub repository that contains a static website. There are template repositories that you can start with. We'll start with a template for a plain HTML static website.

1. Go to https://github.com/staticwebdev/vanilla-basic/generate to generate a GitHub repository for a plain HTML static website
2. Give the repository a name
3. Pick if the repository is Public or Private
4. Select Create repository from template to create the repository

(Generate a GitHub repository from a template)

Now that we have a GitHub repository with a static website in it, we need to create an Azure Static Web App to host the site in.

1. Go to the Azure portal
2. Click the Create a resource button (the plus-sign in the top left corner)
3. Search for Static Web App, select the result and click Create
   1. This brings you to the create Static Web App blade
   2. Select a Resource Group
   3. Give the Web App a Name
   4. Select a Region
   5. Click the Sign in with GitHub button and authorize the Static Web App to access your GitHub account
   6. Select the GitHub organization that contains the repository with the static website in it
   7. Select the static website Repository
   8. And select the code branch
   9. Click Review + create and create after that to create the Static Web App

(Create Static Web App blade in the Azure portal)

Once the Static Web App is created, it will use GitHub actions to deploy the static website from your GitHub repository to your Web App. This can take a while to queue up and finish.

(Static Web App in the Azure portal)

When the site is deployed, you can go to it by clicking the browse button in the Static Web App overview or navigating to the URL that is displayed there.

(Static web application running in a browser)

Azure Static Web Apps also offers features like applications settings, custom domains, a customizable CI/CD workflow, the ability to call Azure Functions as APIs from your static website and staging environments, which are automatically created when a pull request is generated on the GitHub repository.

Conclusion

Running a static website is great for many scenarios and offers an incredibly fast user experience. Azure Static Web Apps is perfect for hosting static websites and runs your app, for free, from points geographically distributed around the world, which makes your site physically close to users and very fast because of that. On top of that, it offers features like CI/CD, application settings and custom domains. Go and check it out!