Week 4, Day 5 of #30DaysOfSWA!!
All week, we'll explore end-to-end development workflows with Azure Static Web Apps as one component that is integrated with other services to deliver an enhanced modern web application experience.
The default Azure Static Web Apps architecture separates the web application into two components: static assets (served from global content distribution services) and dynamic API endpoints (implemented using serverless architectures). In our API-enabling SWA post, we focused on Managed Functions, where the Azure Static Web Apps service configures and manages your Azure Functions Deployment.
Today, we'll explore the other option Bring Your Own Functions - where you can use pre-existing (or independently developed) Azure Functions applications and manage their deployment separately.
- What is "Bring Your Own Functions" (BYOF)?
- Benefits of BYOF over Managed Functions
- Switching from Managed Functions to BYOF
- Resources: Building Serverless apps with Azure Functions
- Exercise: Complete this learning module, add real-time updates to your SWA!
Craig Shoemaker is a Code and Content Developer for the Azure Static Web Apps and Azure Container Apps teams at Microsoft. He is also a Pluralsight author and a musician. Find him @craigshoemaker or follow him right here on dev.to
In our API-enabling SWA post, we mentioned that the Azure Static Web App can implement Serverless API using Azure Functions in two ways:
- Managed Functions - where the Azure Static Web Apps service configures and manages your Azure Functions deployment.
- Bring Your Own Functions - where you use a pre-existing Azure Functions application and manage the deployment yourself.
The second option means that you build and deploy a serverless application using Azure Functions that exists independent of your Azure Static Web App deployment. These applications can make use of the full Azure Functions feature set without any of the limitations imposed for Managed Functions in SWA. All you need to do is configure the Static Web App service to use this new serverless API endpoint.
Bring Your Own Functions is a power feature of Azure Static Web Apps that lets you link existing Functions apps and allows you to avoid the restrictions of Managed Functions. This means you can:
- Implement and run functions in any language using custom handlers.
- Use triggers and bindings to create complex workflows with ease.
- Implement Durable Functions that remain stateful in serverless contexts.
- Use any other Azure Functions features and adopt best practices.
These kinds of capabilities become critical when you deploy real-world applications at scale. Note that Azure Static Web Apps has two hosting plans: free and standard where the Free tier supports only Managed Functions. To take advantage of the power of "Bring Your Own Functions" you need to be on the standard plan.
Using an existing Functions app in Static Web Apps is easy - all your have to do is link the two apps together. Once you create the link, then a Functions app published under the following URL:
...is now also available under the
api route in your static web app.
Linking an existing Functions app is a two step process: (1) Update the staticwebapp.config.json file, and (2) Link the apps via the Azure portal.
Edit your site's
staticwebapp.config.json file to make these changes:
- Set the
api_locationvalue to an empty string (
Navigate to your static web app in the Azure portal and make these changes:
- Click on Functions in the Settings menu
- Click Production in the Environment dropdown
- Click Link to Function app next to the Functions type dropdown
- Select your subscription from the Subscription dropdown
- Select your Functions app name from the Function App dropdown
- Click the Link button
Now your Functions app is linked to your website and is available under the
api route for your Static Web App!
Are you new to the whole idea of serverless applications and a Functions-based backend? Watch this video overview of Azure Functions - then check out the developer guide.
Want a more comprehensive tour of Azure Functions features and capabilities, with hands-on modules? Try the Create Serverless Applications learning path. It has 11 modules covering both core concepts and usage examples.
Complete this learning moduleto learn how to use Azure SignalR to get real-time updates to your app using Azure Functions. Then put that learning to use by updating one of your existing SWA projects to use this capability.