Skip to content

Files

Latest commit

craigshoemakercraigshoemaker
Move Blazor tab
Feb 24, 2022
2d57d0d · Feb 24, 2022

History

History
148 lines (85 loc) · 6.63 KB

getting-started.md

File metadata and controls

148 lines (85 loc) · 6.63 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
craigshoemaker
static-web-apps
quickstart
06/16/2021
cshoe
mode-other

Quickstart: Building 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.
  4. The extension will install into Visual Studio Code.

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 will prompt you to sign in to both services during the creation process.

  2. Under the Static Web Apps label, select the plus sign.

    :::image type="content" source="media/getting-started/extension-create-button.png" alt-text="Application name":::

    [!NOTE] The Azure Static Web Apps Visual Studio Code extension streamlines the creating process by using a series of default values. If you want to have fine-grained control of the creation process, open the command palette and select Azure Static Web Apps: Create Static Web App... (Advanced).

  3. The command palette opens at the top of the editor and prompts you to select a subscription name.

    Select your subscription and press Enter.

    :::image type="content" source="media/getting-started/extension-subscription.png" alt-text="Select an Azure Subscription":::

  4. Next, name your application.

    Type my-first-static-web-app and press Enter.

    :::image type="content" source="media/getting-started/extension-create-app.png" alt-text="Create Static Web App":::

  5. Select a region close to you.

    [!NOTE] Azure Static Web Apps globally distributes your static assets. The region you select determines where your optional staging environments and API function app will be located.

  6. Select the presets that match your application type.

    No Framework

    :::image type="content" source="media/getting-started/extension-presets-no-framework.png" alt-text="Application presets: No framework":::

    Enter /src as the location for the application files and press Enter.

    This app does not produce a build output. Ensure the build output location is empty and press Enter.

    Angular

    :::image type="content" source="media/getting-started/extension-presets-angular.png" alt-text="Application presets: Angular":::

    Enter / as the location for the application files.

    :::image type="content" source="media/getting-started/extension-app-location.png" alt-text="Application files location: Angular":::

    Enter dist/angular-basic as the build output location.

    :::image type="content" source="media/getting-started/extension-angular.png" alt-text="Application build output location: Angular":::

    Blazor

    :::image type="content" source="media/getting-started/extension-presets-blazor.png" alt-text="A screenshot showing the application presets for Blazor":::

    Enter Client as the location for the application files, since this is the root folder of the Blazor project.

    Enter wwwroot as the build output location.

    React

    :::image type="content" source="media/getting-started/extension-presets-react.png" alt-text="Application presets: React":::

    Enter / as the location for the application files.

    Enter build as the build output location.

    Vue

    :::image type="content" source="media/getting-started/extension-presets-vue.png" alt-text="Application presets: Vue":::

    Enter / as the location for the application files.

    Enter dist as the build output location.

  7. 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":::

    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.

  8. To view the website in the browser, right-click on 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 Explorer window, return to the Static Web Apps section and right-click on my-first-static-web-app and select Delete.

:::image type="content" source="media/getting-started/extension-delete.png" alt-text="A screenshot showing how to delete the app":::

Next steps

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