page_type

languages

products

name

description

sample

javascript

azure

azure-computer-vision

azure-app-service-static

vs-code

JavaScript end-to-end client analyze image with Cognitive Services

Locally build and deploy a client application to an Azure Static Web App with a GitHub action, analyze image with Cognitive Services Computer Vision.

Build and deploy a Static Web app to Azure

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

Features

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:

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.