Exercise - Create an Azure Static Web App

  • 5 minutes

In this exercise, you'll create an Azure Static Web Apps instance including a GitHub Action that will automatically build and publish your application.

Create a static web app

Now that you've created your GitHub repository, you can create a Static Web Apps instance from the Azure portal.

Install the Azure Static Web Apps extension for Visual Studio Code

  1. Go to the Visual Studio Marketplace, and install the Azure Static Web Apps extension for Visual Studio Code.

  2. When the extension tab loads in Visual Studio Code, select the Install button.

  3. After installation is complete, select Restart to update if prompted.

Sign in to Azure in Visual Studio Code

  1. In Visual Studio Code, sign in to Azure by selecting View > Command Palette, and entering Azure: Sign In.

  2. Follow the prompts to copy and paste the code provided in the web browser, which authenticates your Visual Studio Code session.

Select Your Subscription

  1. Open Visual Studio Code, and select File > Open and open the repository you cloned to your computer in the editor.

  2. Verify that you have signed in to your preferred Azure subscription by opening the command palette and entering Azure: Select Subscriptions, and press Enter.

  3. Select your subscription (A check mark should appear next to it) and click Ok.

Create a static web app

  1. Open Visual Studio Code, and select File > Open to open the repository you cloned to your computer in the editor.

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

    Screenshot of the Azure Logo in VS Code.

    Note

    Azure and GitHub sign-in are required. If you are not already signed in to Azure and GitHub from Visual Studio Code, the extension will prompt you to sign in to both during the creation process.

  3. Place your mouse over the Static Web Apps heading, right click, and select Create Static Web App.

    Screenshot showing where to go to create a web app.

  4. Enter my-first-static-web-app, and press Enter.

    Screenshot showing how to create a Static Web App.

  5. Select your location and press Enter.

    Screenshot showing how to select a subscription.

  1. Select the Angular option, and press Enter.

    Screenshot showing the angular option selected.

  2. Enter /angular-app as the location for the application code, and press Enter.

    Screenshot showing the code location entered as Angular app.

  3. Enter dist/angular-app as the build output location where files are built for production in your app, and press Enter.

    Screenshot showing how to enter the build output location for Angular.

  1. Select the React option, and press Enter.

    Screenshot showing the react option selected.

  2. Enter /react-app as the location for the application code, and press Enter.

    Screenshot showing the code location entered as react app.

  3. Enter build as the build output location where files are built for production in your app, and press Enter.

    Screenshot showing how to enter the build output location for React.

  1. Select the Svelte option, and press Enter.

    Screenshot showing the svelte option selected.

  2. Enter /svelte-app as the location for the application code, and press Enter.

    Screenshot showing the code location entered as Svelte app.

  3. Enter public as the build output location where files are built for production in your app, and press Enter.

    Screenshot showing how to enter the build output location for Svelte.

  1. Select the Vue option, and press Enter.

    Screenshot showing the vue option selected.

  2. Enter /vue-app as the location for the application code, and press Enter.

    Screenshot showing the code location entered as Vue app.

  3. Enter dist as the build output location where files are built for production in your app, and press Enter.

    Screenshot showing how to enter the build output location for Vue

Note

Your repository may be a bit different than the ones you may have used in the past. It contains four different apps in four different folders. Each folder contains an app created in a different JavaScript framework. Typically, you have one app in the root of your repository and specify / for the app path location. This is a great example of why Azure Static Web Apps lets you configure the locations in the first place - you get full control over how the app is built.

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

    Screenshot of the confirmation code asking the user to open actions in GitHub or View/Edit Configure.

  2. You can view the progress of the deployment using GitHub Actions by expanding the Actions menu.

    Screenshot showing how to check progress via GitHub Actions.

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

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

    Screenshot showing how to browse to your static web app site.

Congratulations! You've deployed your first app to Azure Static Web Apps!

Note

Don't worry if you see a web page that says the app hasn't been built and deployed yet. Refresh the browser in a minute. The GitHub Action runs automatically when the Azure Static Web Apps is created. If you see the splash page, the app is still being deployed.