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
In the root of the project, create a Function app in a directory named
api:func init api --typescriptMove into the
apidirectory to create an API endpoint:cd apiCreate an http trigger API and its associated files:
func new --name hello --template "HTTP trigger" --authlevel "anonymous"Setting Description --name helloCreates 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. 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
Query the API in a browser with the following URL:
http://localhost:7071/api/hello?name=joesmithThe 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
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
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/actionsView 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! ExitingIn 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.
You may need to refresh using the Azure explorer's Static Web app bar in VS Code.
In the bash terminal, move back to the root of the project:
cd ..