5. Create your Azure Function API

Create an Azure Function API for your React app. The Azure Function service provides serverless APIs. This allows you to focus on your TypeScript code and not have to configure a full back-end web server.

Create an Azure Function app

  1. In the root of the project, create a Function app in a directory named api:

    func init api --typescript
    
  2. Move into the api directory to create an API endpoint:

    cd api
    
  3. Create an http trigger API and its associated files:

    func new --name hello --template "HTTP trigger" --authlevel "anonymous" 
    
    Setting Description
    --name hello Creates an API with a route of /api/hello
    --template "HTTP trigger" The API is triggered by HTTP requests. Other template types allow triggering from other Azure Service integrations.
    --authlevel "anonymous" All requests to this API are allowed.
  4. Install dependencies for the Azure Function API:

    npm install 
    

Change the Function API to return JSON

Open the ./api/hello/index.ts file and replace all the contents with the following so that the function returns a JSON object:

import { AzureFunction, Context, HttpRequest } from "@azure/functions"

const httpTrigger: AzureFunction = async function (context: Context, req: HttpRequest): Promise<void> {
    context.log('HTTP trigger function processed a request.');
    const name = (req.query.name || (req.body && req.body.name));
    const responseMessage = name
        ? "Hello, " + name + ". This HTTP triggered function executed successfully."
        : "This HTTP triggered function executed successfully. Pass a name in the query string or in the request body for a personalized response.";

    context.res = {
        // status: 200, /* Defaults to 200 */
        body: {
            input: name,
            message: responseMessage
        }

    };

};

export default httpTrigger;

Start the Azure Function app

Start the Azure function API:

npm start

Use the Function API in the browser

  1. Query the API in a browser with the following URL:

    http://localhost:7071/api/hello?name=joesmith
    
  2. The web browser returns the following successful message.

    {
      "input": "joesmith",
      "message": "Hello, joesmith. This HTTP triggered function executed successfully."
    }
    

Stop the local Function app

Stop the local Azure Function runtime in the terminal with Ctrl + c.

Commit API changes to source control

  1. Check the new API code into your repo and push to the remote:

    git add . && git commit -m "hello api" && git push origin main
    

Verify your GitHub Action build

  1. In a web browser, go back to your GitHub repo, and make sure the next build of your Action succeeds with these new changes. The actions URL should look like:

    https://github.com/YOUR-ACCOUNT/staticwebapp-with-api/actions
    

    View the Build and Deploy Job to find the API successfully deployed:

    Function Runtime Information. OS: Linux, Functions Runtime: v3, Node version: 12.X
    Finished building function app with Oryx
    Zipping Api Artifacts
    Done Zipping Api Artifacts
    Zipping App Artifacts
    Done Zipping App Artifacts
    Uploading build artifacts.
    Finished Upload. Polling on deployment.
    Status: InProgress. Time: 0.1977171(s)
    Status: InProgress. Time: 15.3964651(s)
    Status: Succeeded. Time: 31.3050572(s)
    Deployment Complete :)
    Visit your site at: https://purple-field-12345678.azurestaticapps.net
    Thanks for using Azure Static Web Apps!
    Exiting
    
  2. In VS Code, verify the successful build pushed to your Azure Static Web Apps resource. Look at the functions node in your Azure explorer for Static Web Apps.

    Partial screenshot of VS Code displaying Azure Explorer's Static Web Apps `functions` node with `hello` displayed.

    You may need to refresh using the Azure explorer's Static Web app bar in VS Code.

    Partial screenshot of VS Code displaying Azure Explorer's Static Web Apps command bar with the refresh icon highlighted.

  3. In the bash terminal, move back to the root of the project:

    cd ..
    

Next steps