Quickstart: Build your first static site with Azure Static Web Apps

Azure Static Web Apps publishes a website by building an app from a code repository. In this quickstart, you deploy an application to Azure Static Web apps using the Visual Studio Code extension.

If you don't have an Azure subscription, create a free trial account.

Prerequisites

• GitHub account
• Azure account
• Visual Studio Code
• Azure Static Web Apps extension for Visual Studio Code
• Install Git

Create a repository

This article uses a GitHub template repository to make it easy for you to get started. The template features a starter app to deploy to Azure Static Web Apps.

No Framework

1. Navigate to the following location to create a new repository:
   1. https://github.com/staticwebdev/vanilla-basic/generate
2. Name your repository my-first-static-web-app

Note

Azure Static Web Apps requires at least one HTML file to create a web app. The repository you create in this step includes a single index.html file.

Angular

1. Navigate to the following location to create a new repository:
   1. https://github.com/staticwebdev/angular-basic/generate
2. Name your repository my-first-static-web-app

Blazor

1. Navigate to the following location to create a new repository:
   1. https://github.com/staticwebdev/blazor-basic/generate
2. Name your repository my-first-static-web-app

React

1. Navigate to the following location to create a new repository:
   1. https://github.com/staticwebdev/react-basic/generate
2. Name your repository my-first-static-web-app

Vue

1. Navigate to the following location to create a new repository:
   1. https://github.com/staticwebdev/vue-basic/generate
2. Name your repository my-first-static-web-app

Select Create repository.

Clone the repository

With the repository created in your GitHub account, clone the project to your local machine using the following command.

git clone https://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/my-first-static-web-app.git

Make sure to replace <YOUR_GITHUB_ACCOUNT_NAME> with your GitHub username.

Next, open Visual Studio Code and go to File > Open Folder to open the cloned repository in the editor.

Install Azure Static Web Apps extension

If you don't already have the Azure Static Web Apps extension for Visual Studio Code extension, you can install it in Visual Studio Code.

1. Select View > Extensions.
2. In the Search Extensions in Marketplace, type Azure Static Web Apps.
3. Select Install for Azure Static Web Apps.

Create a static web app

1. Inside Visual Studio Code, select the Azure logo in the Activity Bar to open the Azure extensions window.

   

   Note

   You are required to sign in to Azure and GitHub in Visual Studio Code to continue. If you are not already authenticated, the extension prompts you to sign in to both services during the creation process.

2. Select F1 to open the Visual Studio Code command palette.

3. Enter Create static web app in the command box.

4. Select Azure Static Web Apps: Create static web app....

5. Select your Azure subscription.

6. Enter my-first-static-web-app for the application name.

7. Select the region closest to you.

8. Enter the settings values that match your framework choice.

   No Framework

   Setting	Value
   Framework	Select Custom
   Location of application code	Enter /src
   Build location	Enter /src

   Angular

   Setting	Value
   Framework	Select Angular
   Location of application code	Enter /
   Build location	Enter dist/angular-basic

   Blazor

   Setting	Value
   Framework	Select Blazor
   Location of application code	Enter Client
   Build location	Enter wwwroot

   React

   Setting	Value
   Framework	Select React
   Location of application code	Enter /
   Build location	Enter build

   Vue

   Setting	Value
   Framework	Select Vue.js
   Location of application code	Enter /
   Build location	Enter dist

9. Once the app is created, a confirmation notification is shown in Visual Studio Code.

   

   If GitHub presents you with a button labeled Enable Actions on this repository, select the button to allow the build action to run on your repository.

   As the deployment is in progress, the Visual Studio Code extension reports the build status to you.

   

   Once the deployment is complete, you can navigate directly to your website.

10. To view the website in the browser, right-click the project in the Static Web Apps extension, and select Browse Site.

    

Clean up resources

If you're not going to continue to use this application, you can delete the Azure Static Web Apps instance through the extension.

In the Visual Studio Code Azure window, return to the Resources section and under Static Web Apps, right-click my-first-static-web-app and select Delete.

Related content

• Video series: Deploy websites to the cloud with Azure Static Web Apps

Next steps

Add an API