Skip to content

Latest commit

 

History

History
70 lines (39 loc) · 4.41 KB

File metadata and controls

70 lines (39 loc) · 4.41 KB

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

workshop walk-through

🎥 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.

Let's create the repo!

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!

Code of Conduct