Introduction to Azure Static Web Apps
Module Source
Publish an Angular, React, Svelte, or Vue JavaScript app with Azure Static Web Apps
Goals
In this workshop, you will learn to deploy your static files to Azure, whether they are an advanced JavaScript Single Page App (SPA) or plain HTML.
| Goal | Description |
|---|---|
| What will you learn | Publish an Angular, React, Svelte, or Vue JavaScript app with Azure Static Web Apps |
| What you’ll need | A modern web browser, an internet connection, an Azure account, Visual Studio Code, and the Azure Static Web Apps VS Code Extension |
| Duration | 20 minutes |
| Slides | slides |
Video
🎥 Click this image to watch Chris walk you through the workshop starting at 0:21:00
What you will learn
You’re a web developer and you’ve built a web app. Typically a web app consists of HTML, JavaScript or CSS files and can be produced by manually creating all the files or use a framework to do so.
You’d like to be able to deploy, or publish, your web site to Azure so that you can show it off to your friends.
In this workshop, you’ll learn to:
- Use the Azure Static web apps service.
- Deploy a web app to Azure using this service.
Introduction to Azure Static Web Apps service
Read about the service in this introduction.
Create a web app
Before you can deploy the app to Azure, you need to build it.
- Create a repo from a template
- Run the app locally and view it via a browser.
Plan your Azure Static App
To deploy your app on Azure, you need to provision an Azure Static Web Apps resource. This resource needs a few fields to be filled in. Your GitHub repo has a concept called actions that’s capable of doing many things like testing code, deploying it and more. GitHub actions is the underlying technology that Azure Static Web Apps rely on to deploy your app to the cloud.
Learn more about Azure Static Apps and its fields as well as GitHub actions. Read more about the fields here
Create the Azure Static App
To simplify your deployment to Azure, you can use the Visual Studio Code extension released by the Azure Static Apps team. By using the extension, it will create the cloud resources the Azure Static App needs. Then it will work to deploy your app. Read more about creating the app.
Next steps
Try the other ways to build a static web app in this module - you can try Vue, React, Angular or Svelte in this module.
Practice
Now that you know about Azure Static Web Apps, learn how to publish an API and how to authenticate users with Azure Static Web Apps.
Feedback
Be sure to give feedback about this workshop!