Skip to content

Files

Latest commit

craigshoemakercraigshoemaker
fixes
Apr 27, 2022
6c52579 · Apr 27, 2022

History

History
240 lines (158 loc) · 8.81 KB

get-started-portal.md

File metadata and controls

240 lines (158 loc) · 8.81 KB
title description services author ms.author ms.date ms.topic ms.service zone_pivot_groups
Quickstart: Building your first static web app with Azure Static Web Apps using the Azure portal
Learn to deploy a static site to Azure Static Web Apps with the Azure portal.
static-web-apps
craigshoemaker
cshoe
05/07/2021
quickstart
static-web-apps
devops-or-github

Quickstart: Building your first static site in the Azure portal

Azure Static Web Apps publishes a website to a production environment by building apps from an Azure DevOps or GitHub repository. In this quickstart, you deploy a web application to Azure Static Web apps using the Azure portal.

Prerequisites

::: zone pivot="github"

::: zone pivot="azure-devops"

::: zone pivot="github"

[!INCLUDE create repository from template]

::: zone-end

::: zone pivot="azure-devops"

Create a repository

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

  1. Sign in to Azure DevOps.

  2. Select the New repository button.

  3. In the Create new project window, expand the Advanced button and make the following selections:

    Setting Value
    Project Enter my-first-web-static-app.
    Visibility Select Private.
    Version control Select Git.
    Work item process Select the option that best suits your development methods.

  4. Select the Create button.

  5. Select the Repos menu item.

  6. Select the Files menu item.

  7. Under the Import repository card, select the Import button.

  8. Copy a repository URL for the framework of your choice, and paste it into the Clone URL box.

    No Framework

    https://github.com/staticwebdev/vanilla-basic.git

    Angular

    https://github.com/staticwebdev/angular-basic.git

    Blazor

    https://github.com/staticwebdev/blazor-basic.git

    React

    https://github.com/staticwebdev/react-basic.git

    Vue

    https://github.com/staticwebdev/vue-basic.git

  9. Select the Import button and wait for the import process to complete.

::: zone-end

Create a static web app

Now that the repository is created, you can create a static web app from the Azure portal.

  1. Navigate to the Azure portal.
  2. Select Create a Resource.
  3. Search for Static Web Apps.
  4. Select Static Web Apps.
  5. Select Create.

::: zone pivot="github"

In the Basics section, begin by configuring your new app and linking it to a GitHub repository.

:::image type="content" source="media/getting-started-portal/quickstart-portal-basics.png" alt-text="Basics section":::

Setting Value
Subscription Select your Azure subscription.
Resource Group Select the Create new link, and enter static-web-apps-test in the textbox.
Name Enter my-first-static-web-app in the textbox.
Plan type Select Free.
Azure Functions and staging details Select a region closest to you.
Source Select GitHub.

Select the Sign-in with GitHub button and authenticate with GitHub.

After you sign in with GitHub, enter the repository information.

Setting Value
Organization Select your organization.
Repository Select my-first-web-static-app.
Branch Select main.

:::image type="content" source="media/getting-started-portal/quickstart-portal-source-control.png" alt-text="Repository details":::

Note

If you don't see any repositories, you may need to authorize Azure Static Web Apps in GitHub. Browse to your GitHub repository and go to Settings > Applications > Authorized OAuth Apps, select Azure Static Web Apps, and then select Grant. For organization repositories, you must be an owner of the organization to grant the permissions.

::: zone-end

::: zone pivot="azure-devops"

In the Basics section, begin by configuring your new app and linking it to an Azure DevOps repository.

Setting Value
Subscription Select your Azure subscription.
Resource Group Select the Create new link, and enter static-web-apps-test in the textbox.
Name Enter my-first-static-web-app in the textbox.
Plan type Select Free.
Azure Functions and staging details Select a region closest to you.
Source Select DevOps.
Organization Select your organization.
Project Select your project.
Repository Select my-first-web-static-app.
Branch Select main.

::: zone-end

In the Build Details section, add configuration details specific to your preferred front-end framework.

No Framework

  1. Select Custom from the Build Presets dropdown.
  2. Type ./src in the App location box.
  3. Leave the Api location box empty.
  4. Type ./src App artifact location box.

Angular

  1. Select Angular from the Build Presets dropdown.
  2. Keep the default value in the App location box.
  3. Leave the Api location box empty.
  4. Type dist/angular-basic in the App artifact location box.

Blazor

  1. Select Blazor from the Build Presets dropdown.
  2. Keep the default value of Client in the App location box.
  3. Leave the Api location box empty.
  4. Keep the default value of wwwroot in the App artifact location box.

React

  1. Select React from the Build Presets dropdown.
  2. Keep the default value in the App location box.
  3. Leave the Api location box empty.
  4. Type build in the App artifact location box.

Vue

  1. Select Vue.js from the Build Presets dropdown.
  2. Keep the default value in the App location box.
  3. Leave the Api location box empty.
  4. Keep the default value in the App artifact location box.

Select Review + create.

:::image type="content" source="media/getting-started-portal/review-create.png" alt-text="Review and create your Azure Static Web Apps instance.":::

::: zone pivot="github"

Note

You can edit the workflow file to change these values after you create the app.

::: zone-end

Select Create.

:::image type="content" source="media/getting-started-portal/create-button.png" alt-text="Create your Azure Static Web Apps instance.":::

Select Go to resource.

:::image type="content" source="media/getting-started-portal/resource-button.png" alt-text="Proceed to go to the newly created resource.":::

View the website

There are two aspects to deploying a static app. The first creates the underlying Azure resources that make up your app. The second is a workflow that builds and publishes your application.

Before you can navigate to your new static site, the deployment build must first finish running.

The Static Web Apps Overview window displays a series of links that help you interact with your web app.

::: zone pivot="github"

:::image type="content" source="./media/getting-started/overview-window.png" alt-text="The Azure Static Web Apps overview window.":::

  1. Clicking on the banner that says, Click here to check the status of your GitHub Actions runs takes you to the GitHub Actions running against your repository. Once you verify the deployment job is complete, then you can navigate to your website via the generated URL.

  2. Once GitHub Actions workflow is complete, you can click on the URL link to open the website in new tab.

::: zone-end

::: zone pivot="azure-devops"

Once the workflow is complete, you can click on the URL link to open the website in new tab.

::: zone-end

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 following steps:

  1. Open the Azure portal.
  2. Search for my-first-web-static-app from the top search bar.
  3. Select the app name.
  4. Select the Delete button.
  5. Select Yes to confirm the delete action (this action may take a few moments to complete).

Next steps

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