Add an API to Azure Static Web Apps with Azure Functions
Article
You can add serverless APIs to Azure Static Web Apps that are powered by Azure Functions. This article demonstrates how to add and deploy an API to an Azure Static Web Apps site.
Note
The functions provided by default in Static Web Apps are pre-configured to provide secure API endpoints and only support HTTP-triggered functions. See API support with Azure Functions for information on how they differ from standalone Azure Functions apps.
In Visual Studio Code, open the root of your app's repository. The folder structure contains the source for your frontend app and the Static Web Apps GitHub workflow in .github/workflows folder.
├── .github
│ └── workflows
│ └── azure-static-web-apps-<DEFAULT_HOSTNAME>.yml
│
└── (folders and files from your static web app)
Create the API
You create an Azure Functions project for your static web app's API. By default, the Static Web Apps Visual Studio Code extension creates the project in a folder named api at the root of your repository.
Press F1 to open the Command Palette.
Select Azure Static Web Apps: Create HTTP Function.... If you're prompted to install the Azure Functions extension, install it and rerun this command.
To run your frontend app and API together locally, Azure Static Web Apps provides a CLI that emulates the cloud environment. The CLI uses the Azure Functions Core Tools to run the API.
Install command line tools
Ensure you have the necessary command line tools installed.
npm install -g @azure/static-web-apps-cli
Tip
If you don't want to install the swa command line globally, you can use npx swa instead of swa in the following instructions.
Build frontend app
If your app uses a framework, build the app to generate the output before running the Static Web Apps CLI.
Install npm dependencies and build the app into the dist/angular-basic folder.
npm install
npm run build --prod
Install npm dependencies and build the app into the build folder.
npm install
npm run build
Install npm dependencies and build the app into the dist folder.
npm install
npm run build
Run the application locally
Run the frontend app and API together by starting the app with the Static Web Apps CLI. Running the two parts of your application this way allows the CLI to serve your frontend's build output from a folder, and makes the API accessible to the running app.
In root of your repository, start the Static Web Apps CLI with the start command. Adjust the arguments if your app has a different folder structure.
Pass the current folder (src) and the API folder (api) to the CLI.
swa start src --api-location api
Pass the build output folder (dist/angular-basic) and the API folder (api) to the CLI.
swa start dist/angular-basic --api-location api
Pass the build output folder (build) and the API folder (api) to the CLI.
swa start build --api-location api
Pass the build output folder (dist) and the API folder (api) to the CLI.
swa start dist --api-location api
Windows Firewall may prompt to request that the Azure Functions runtime can access the Internet. Select Allow.
When the CLI processes start, access your app at http://localhost:4280/. Notice how the page calls the API and displays its output, Hello from the API.
To stop the CLI, type Ctrl + C.
Add API location to workflow
Before you can deploy your app to Azure, update your repository's GitHub Actions workflow with the correct location of your API folder.
Open your workflow at .github/workflows/azure-static-web-apps-<DEFAULT-HOSTNAME>.yml.
Search for the property api_location and set the value to api.
###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
app_location: "src" # App source code path
api_location: "api" # Api source code path - optional
output_location: "" # Built app content directory - optional
###### End of Repository/Build Configurations ######
Note: The above values of api_location ,app_location,output_location are for no framework and these value changes based on framework.
Save the file.
Deploy changes
To publish changes to your static web app in Azure, commit and push your code to the remote GitHub repository.
Press F1 to open the Command Palette.
Select the Git: Commit All command.
When prompted for a commit message, enter feat: add API and commit all changes to your local git repository.
Press F1 to open the Command Palette.
Select the Git: push command.
Your changes are pushed to the remote repository in GitHub, triggering the Static Web Apps GitHub Actions workflow to build and deploy your app.
Open your repository in GitHub to monitor the status of your workflow run.
When the workflow run completes, visit your static web app to view your changes.
Publish an Angular, React, Svelte, or Vue JavaScript app and API with Azure Static Web Apps and Azure Functions. Deploy your code from GitHub to a staging site using preview URLs.
Build end-to-end solutions in Microsoft Azure to create Azure Functions, implement and manage web apps, develop solutions utilizing Azure storage, and more.