Skip to content

Latest commit

 

History

History
135 lines (87 loc) · 5.05 KB

getting-started.md

File metadata and controls

135 lines (87 loc) · 5.05 KB
title description services author ms.service ms.topic ms.date ms.author ms.custom
Quickstart: Building your first static site with the Azure Static Web Apps
Learn to deploy a static site to Azure Static Web Apps.
static-web-apps
v1212
azure-static-web-apps
quickstart
04/02/2024
wujia
mode-other

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

[!INCLUDE create repository from template]

[!INCLUDE clone the repository]

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.

    :::image type="content" source="media/getting-started/extension-azure-logo.png" alt-text="Azure Logo":::

    [!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.

    :::image type="content" source="media/getting-started/extension-confirmation.png" alt-text="Created confirmation":::

    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.

    :::image type="content" source="media/getting-started/extension-waiting-for-deployment.png" alt-text="Waiting for deployment":::

    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.

    :::image type="content" source="media/getting-started/extension-browse-site.png" alt-text="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

Next steps

[!div class="nextstepaction"] Add an API