In this tutorial, locally build and deploy a React/TypeScript client application to an Azure Static Web App with a GitHub action.

• Read Tutorial
• Create Azure resources
  • Static web app
  • Cognitive Services' Computer Vision

The React (create-react-app) provides the following functionality:

• Display message if Azure key and endpoint for Cognitive Services Computer Vision isn't found
• Allows you to analyze an image with Cognitive Services Computer Vision
  • Enter a public image URL or analyze image from collection
  • When analysis is complete
    • Display image
    • Display Computer Vision JSON results

The GitHub action starts when a push to a specific branch happens:

• Inserts GitHub secrets for Computer Vision key and endpoint into build
• Builds the React (create-react-app) client
• Moves the resulting files to your Azure Static Web app resource

• Node.js and npm - installed to your local machine.

• Visual Studio Code - installed to your local machine.

  • Azure Static Web Apps (Preview) - used to deploy React app to Azure Static Web app.

• Git - used to push to GitHub - which activates the GitHub action.

• GitHub account - to fork and push to a repo

• Use Azure Cloud Shell using the bash environment.

  

• If you prefer, install the Azure CLI to run CLI reference commands.

  • If you're using a local install, sign in with Azure CLI by using the az login command. To finish the authentication process, follow the steps displayed in your terminal. See Sign in with Azure CLI for additional sign-in options.
  • When you're prompted, install Azure CLI extensions on first use. For more information about extensions, see Use extensions with Azure CLI.
  • Run az version to find the version and dependent libraries that are installed. To upgrade to the latest version, run az upgrade.