1. Create a static web app using CLI

In this article series, learn how to:

  • Create a static web app (SWA)
  • Locally develop your static web app using the SWA CLI.
  • Run the same code remotely without changes.

Your static web app consists of:

  • A client React app in the app directory, served from http://localhost:3000
  • An Azure Function API in the api directory served from http://localhost:7071

The local static web app CLI provides:

  • A proxy local between from the React app to the Function API. The URL in the React looks like /api/hello, without specifying the server or port number for the API. Requests using this URL are successful locally because the SWA CLI manages the proxy for you.
  • A local authentication emulator when accessing /.auth/login/<provider>
  • Route management and authorization

Complete sample code provided:

Authentication in this sample

The authentication in this sample provides:

  • React client provides:
    • Login/Logout
    • Public and private routes based on user's authentication status
    • Private route has access to API, await fetch(/api/hello?name=${name})

This is an easy auth implementation. The API can't act on behalf of(OBO)) the logged in user. Acting on behalf of the user requires more configuration both in the Azure Active Directory app and the Azure Identity SDK in the API.

Prepare your development environment

Install the following:

Sign in to Azure CLI

  1. In VS Code, in an integrated bash terminal, sign in to the Azure CLI:

    az login
    

    This opens a browser for you to continue your authentication.

  2. When authentication is complete, close the browser and return to VS Code.

Next steps