Exercise - Get started

Completed

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

This tutorial uses the Azure sandbox to provide you with a free, temporary Azure subscription you can use to complete the exercise. Before proceeding, make sure you have activated the sandbox at the top of this page.

Create a repository

Next, create a new repository by using a GitHub template repository. A series of templates are available where each contains a starter app built with a different front-end framework.

  1. Navigate to the create from template page for the template repository.
    • If you get a 404 Page Not Found error, sign in to GitHub and try again.
  2. If prompted for Owner, choose one of your GitHub accounts
  3. Name your repository my-static-web-app
  4. Click the Create repository from template button

Run your app locally

You just created a GitHub repository named my-static-web-app in your GitHub account. Next, you'll clone the repo and run the code locally on your computer.

  1. Open a terminal on your computer.

  2. Start by cloning the GitHub repository to your computer.

    git clone https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app
    
  3. Go to the folder for your source code.

    cd my-static-web-app
    
  4. Next, go to the folder of your preferred front-end framework, as shown below:

    cd angular-app
    
    cd react-app
    
    cd svelte-app
    
    cd vue-app
    
  5. Now install the application dependencies.

    npm install
    
  6. Finally, run the front-end client application.

    npm start
    
    npm start
    
    npm run dev
    
    npm run serve
    

Browse to your app

It's time to see your application running locally. Each front-end application runs on a different port.

Click the link to browse to your application.

Browse to http://localhost:4200.

Browsing to your Angular web app

Browse to http://localhost:3000.

Browsing to your React web app

Browse to http://localhost:5000.

Browsing to your Svelte web app

Browse to http://localhost:8080.

Browsing to your Vue web app

Your app should say Loading data ... because there is no data or API yet. You'll add the API for your web app later on in this tutorial.

Now stop your running app by pressing Ctrl-C in the terminal.

You built your application and now it's running locally in your browser.

Next, you'll publish your application to Azure Static Web Apps.

Create a Static Web App

Now that you've created your GitHub repository, you can create a Static Web Apps instance using the Azure Static Web Apps extension for Visual Studio Code.

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, click Install.

  3. After installation is complete, click Reload.

Sign into Azure in Visual Studio Code

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

    Important

    Login to Azure using the same account used to create the sandbox. The sandbox provides access to a Concierge Subscription.

  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 to open the repository you cloned to your computer in the editor.

  2. Verify that you have filtered your Azure subscriptions to include the Concierge Subscription by opening the command palette F1, entering Azure: Select Subscriptions, and press Enter.

  3. Select Concierge Subscription and press Enter.

    Filter by subscription

Create a static web app with Visual Studio Code

  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.

    Azure Logo

    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 label, and select the + (plus sign).

    Application name

  4. When the command palette opens at the top of the editor, select Concierge Subscription and press Enter.

    Select Subscription

  5. Enter my-static-web-app-and-api, and press Enter.

    Create Static Web App

  6. Select the Custom option, and press Enter

    Create Static Web App - Custom

  7. Select the Manually enter location option, and press Enter

    Create Static Web App - manually enter application location

  1. Select angular-app as the location for the application code, and press Enter.

    Angular application code location

  1. Select react-app as the location for the application code, and press Enter.

    React application code location

  1. Select svelte-app as the location for the application code, and press Enter.

    Svelte application code location

  1. Select vue-app as the location for the application code, and press Enter.

    Vue application code location

  1. The extension is looking for the location of the API in your application. We'll skip this for now and focus on the API later in this module.

    Select Skip for now and press Enter.

    API location

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

    Angular app files path

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

    React app files path

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

    Svelte app files path

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

    Vue app files path

  1. Select a location nearest you, and press Enter.

    Resource location

  2. Select Select Existing to select the resource group that has been created for you in the Azure sandbox.

    Select existing resource group

  3. Select the resource group named [Sandbox resource group].

    Select resource group

    After the app is created, a confirmation notification appears in Visual Studio Code.

    Created confirmation

  4. In the Visual Studio Code Explorer window, return to the Static Web Apps section, right-click on my-static-web-app-and-api, and select Open in Portal to view app in the Azure portal.

    Open portal

Note

Your repository is 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. This isn't common. 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.

Review the GitHub Action

At this stage, your Static Web Apps instance is created in Azure, but your app isn't yet deployed. The GitHub Action that Azure creates in your repository will run automatically to trigger the first build and deployment of your app, but it takes a couple minutes to finish.

You can check the status of your build and deploy action by navigating to the Actions page of your GitHub repository.

  1. Select the link shown in the following image.

    Browse to see the progress of the GitHub Actions workflow

  2. Select Azure Static Web Apps CI/CD.

  3. Select the topmost commit titled similar to ci: add Azure Static Web Apps workflow file.

  4. Select the Build and Deploy Job link on the left.

From here, you can observe the progress of your app as it builds.

View website

Once your GitHub Action finishes building and publishing your web app, you can browse to see your running app.

  1. In the Visual Studio Code Explorer window, return to the Static Web Apps section and right-click on my-static-web-app-and-api and select Browse Site to view app in your browser.

    Browse Site

Your app should say Loading data ... because there is no data or API yet. You'll add the API for your web app later on in this tutorial.

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. Try refreshing the browser in a minute. The GitHub Action runs automatically when the Azure Static Web Apps is created. So if you see the splash page, the app is still being deployed.

Pull the changes from GitHub

Pull the latest changes from GitHub to bring down the workflow file that was created by Azure Static Web Apps.

  1. Open the command palette by pressing F1
  2. Type and select Git: Pull
  3. Press Enter

Next steps

Next you'll learn how to build and run your API using an Azure Functions project.