Build an API with Azure Functions
Now it's time for you to create an API for your shopping list app.
Azure Functions
One of the greatest benefits of Azure Static Web Apps is that it hosts your web app and an API built with Azure Functions together! Azure Static Web Apps globally distributes your web app's static assets and hosts your API in Azure Functions. With this setup, you gain the availability and speed that comes with global distribution of your web app assets. What you don't get is also important.
You don't need to configure and maintain a full server for your front-end or back-end. This feature is the sweet spot for Azure Static Web Apps: you get the ease of publishing your app and API with minimal configuration and maintenance.
Azure Functions serves your route endpoints, doesn't require a full back-end server to configure or maintain, and provides automatic scaling out and scaling in based on demand. These features make Azure Functions a great API partner for your shopping list web app that serves static assets.
Azure Static Web Apps generates a unique URL for your site, which you can find on the Overview tab in the portal. The API is available through this same URL by appending /api to the URL.
Your shopping list API
Your shopping list app lets people get, add, update, and delete items from their list. So it makes sense that your API has endpoints matching these needs.
Here are the four endpoints:
| Methods | Route endpoints | Full API endpoint |
|---|---|---|
| GET | products |
api/products |
| POST | products |
api/products |
| PUT | products/:id |
api/products/:id |
| DELETE | products/:id |
api/products/:id |
Notice that your HTTP GET requests route to api/products. The api prefix is reserved for your API endpoints in the app. You can define any other routes to fit the needs of your site, but api always points to the Azure Functions app.
Create an API for the web app
So far you've been using a front-end framework. Soon, you add an API and connect it to your front-end app. Your repository has an Api project that contains an incomplete Azure Functions project and HTTP endpoints for PUT, POST, and DELETE of your products. The API is missing the HTTP GET function. You complete the Azure Functions project's API and add the missing function, then you connect your API to your front-end web app.
Preview changes to your web app
Before making changes to an app, it's good practice to create a new branch for the changes. You're making several changes when you complete the API for your app, so you create a branch for these changes.
After you make the changes, you want to see them running before deciding to merge the changes. Once you create a pull request from your new branch to the main branch, the GitHub Action builds your app and API, and deploys them both to a preview URL. This preview URL allows you to leave your web app running with Azure Static Web Apps, but also view a second URL with the results from your pull request.
Configure communication between your web app and API
When you run your API locally, it runs on port 7071 by default. Your web app runs on a different local port. When your web app tries to make an HTTP request from its port to your API's port 7071, the action is known as Cross-Origin Resource Sharing (CORS). Your browser prevents the HTTP request from completing unless the API server allows the request to proceed.
When you publish to Azure Static Web Apps, you don't have to worry about CORS. Azure Static Web Apps automatically configures your app so it can communicate with your API on Azure using a reverse proxy. A reverse proxy is what allows your web app and API to appear to come from the same web domain. So you only have to set up CORS when you run locally.
Next steps
Now you're ready to create your API and configure your HTTP endpoints for your shopping list app.