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
appdirectory, served fromhttp://localhost:3000 - An Azure Function API in the
apidirectory served fromhttp://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:
- Sample basic app - on branch named
1-basic-app-with-api - Sample basic app with auth - on branch named
2-basic-app-with-api-and-auth
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:
- GitHub account
- Azure CLI - v2.27.2
- Visual Studio Code (VS Code)
- Node.js - this create-react-app was developed with Node.js v14.17.1.
- Azure Functions Core Tools - v3.0.3477+
Sign in to Azure CLI
In VS Code, in an integrated bash terminal, sign in to the Azure CLI:
az loginThis opens a browser for you to continue your authentication.
When authentication is complete, close the browser and return to VS Code.