80 строки
5.4 KiB
Markdown
80 строки
5.4 KiB
Markdown
---
|
|
type: post
|
|
title: "Tip 282 - Getting started with Azure Static Web Apps"
|
|
excerpt: "Learn how to get started with Azure Static Web Apps"
|
|
tags: [Web]
|
|
share: true
|
|
date: 2020-10-15 02:00:00
|
|
---
|
|
|
|
::: tip
|
|
|
|
:fire: The FREE Azure Developer Guide eBook is available [here](https://aka.ms/azuredevebook?WT.mc_id=docs-azuredevtips-azureappsdev).
|
|
|
|
:bulb: Learn more : [Azure Static Web Apps documentation](https://docs.microsoft.com/azure/static-web-apps/?WT.mc_id=docs-azuredevtips-azureappsdev).
|
|
|
|
:tv: Watch the video : [Getting started with Azure Static Web Apps](https://youtu.be/9E4iL0imDHk?WT.mc_id=youtube-azuredevtips-azureappsdev).
|
|
|
|
:::
|
|
|
|
### 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](https://docs.microsoft.com/azure/storage/blobs/storage-blob-static-website?WT.mc_id=docs-azuredevtips-azureappsdev) and in [Azure Static Web Apps](https://docs.microsoft.com/azure/static-web-apps/?WT.mc_id=docs-azuredevtips-azureappsdev).
|
|
|
|
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](https://azure.microsoft.com/free/?WT.mc_id=azure-azuredevtips-azureappsdev) before you begin)
|
|
* A [GitHub](https://github.com/?WT.mc_id=github-azuredevtipsvideo-azureappsdev) 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](https://github.com/features/actions?WT.mc_id=github-azuredevtips-azureappsdev). Let's do that.
|
|
|
|
We need to start with a GitHub repository that contains a static website. There are [template repositories](https://docs.microsoft.com/azure/static-web-apps/getting-started?WT.mc_id=docs-azuredevtips-azureappsdev) 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](https://github.com/staticwebdev/vanilla-basic/generate?WT.mc_id=github-azuredevtips-azureappsdev) 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
|
|
|
|
<img :src="$withBase('/files/68generaterepo.png')">
|
|
|
|
(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](https://portal.azure.com/?WT.mc_id=azure-azuredevtips-azureappsdev)
|
|
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
|
|
|
|
<img :src="$withBase('/files/68staticwebapp1.png')">
|
|
|
|
(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.
|
|
|
|
<img :src="$withBase('/files/68staticwebapp2.png')">
|
|
|
|
(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.
|
|
|
|
<img :src="$withBase('/files/68result.png')">
|
|
|
|
(Static web application running in a browser)
|
|
|
|
Azure Static Web Apps also offers features like [applications settings](https://docs.microsoft.com/azure/static-web-apps/application-settings?WT.mc_id=docs-azuredevtips-azureappsdev ), [custom domains](https://docs.microsoft.com/azure/static-web-apps/custom-domain?WT.mc_id=docs-azuredevtips-azureappsdev ), a [customizable CI/CD workflow](https://docs.microsoft.com/azure/static-web-apps/github-actions-workflow?WT.mc_id=docs-azuredevtips-azureappsdev ), the ability to call [Azure Functions as APIs](https://docs.microsoft.com/azure/static-web-apps/apis?WT.mc_id=docs-azuredevtips-azureappsdev ) from your static website and [staging environments](https://docs.microsoft.com/azure/static-web-apps/review-publish-pull-requests?WT.mc_id=docs-azuredevtips-azureappsdev ), 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](https://docs.microsoft.com/azure/static-web-apps/?WT.mc_id=docs-azuredevtips-azureappsdev) 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! |