Integrating Azure Functions into your Astro site

In the previous post, I showed you how to deploy your Astro site to Azure Static Web Apps using the Azure Static Web Apps (SWA) CLI. In this post, I will show you how you can integrate Azure Functions into your Astro site and deploy them using the same SWA CLI.

Why Azure Functions?

Azure Functions are serverless compute services that enable you to run event-triggered code without managing the infrastructure. It allows you to run your code without worrying about the underlying infrastructure. Azure Functions are a great way to run small code that various events can trigger.

The best part is that, in the context of Azure Static Web Apps, you can deploy your Azure Functions alongside your static site. This allows you to build a full-stack application with a static front-end and serverless back-end.

Step 1: Create the Azure Functions API

The first step is to create an Azure Functions API. You can do this using the Azure Functions extension in Visual Studio Code or via the Azure Functions Core Tools.

For this example, I used the Azure Functions Core Tools with the following command:

# Create a new Azure Functions project
func init api --worker-runtime typescript --model V4
# Navigate to the new project folder
# Create a new HTTP trigger function
func new --template "HTTP trigger" --name http_name

Step 2: Configure the SWA configuration

You must update the file to make your SWA configuration aware of the Azure Functions project. You need to add the following configuration:

  "$schema": "https://aka.ms/azure/static-web-apps-cli/schema",
      "outputLocation": "dist",
      "appDevserverUrl": "http://localhost:4321",
      "apiDevserverUrl": "http://localhost:7071"

Step 3: Update the root package.json scripts

Update your package.json scripts on the root to include the Azure Functions build and dev commands.

    "build": "npm run build:app && npm run build:api",
    "build:app": "cd app && npm run build",
    "build:api": "cd api && npm run build",
    "dev": "npm-run-all --parallel dev:*",
    "dev:app": "cd app && npm run dev",
    "dev:api": "cd api && npm run start",
    "dev:api_watch": "cd api && npm run watch"

Step 4: Run your Astro site and Azure Functions

To run your Astro site and Azure Functions locally, you can use the following command:

Now, you can test the Azure Functions API on the http://localhost:4280/api/name endpoint. The nice part is that you don’t need to think about CORS, as both the front and back end are running on the same domain through the Static Web Apps CLI proxy service.

Step 5: Change the code of your Azure Functions

You can now make changes to the Azure Functions, and the development server will automatically pick up on them.

} from "@azure/functions";
export async function http_name(
  context: InvocationContext
): Promise<HttpResponseInit> {

Step 6: Adding the API call to your Astro site

To call the API, I’ll use React to interact with the Azure Functions.

import * as React from "react";
export interface IHelloProps {}
const apiHost = import.meta.env.DEV
  ? "http://localhost:4280"
  : "https://.azurestaticapps.net";
export const Hello: React.FunctionComponent<IHelloProps> = (
  props: React.PropsWithChildren<IHelloProps>
  const [name, setName] = React.useState({ firstName: "", lastName: "" });
  const fetchName = async () => {
    const apiUrl = `${apiHost}/api/name`;
      const response = await fetch(apiUrl);
      const { firstName, lastName } = await response.json();
      return { firstName, lastName };
      return { firstName: "", lastName: "" };
    const getName = async () => {
      const fetchedName = await fetchName();
  if (!name.firstName || !name.lastName) {
      Hello, {name.firstName} {name.lastName}

You can now use the Hello component to display the name fetched from the Azure Functions in the Astro component.

import { Hello } from "./Hello";

Step 7: Update the GitHub Actions workflow

You need to update the GitHub Actions workflow to ensure that the Azure Functions are deployed with the Astro site.

name: Deployment to Azure Static Web App
    name: Build and Deploy Job
      - uses: actions/checkout@v4
        uses: actions/setup-node@v4
      - name: Install dependencies
      - name: Clean dependencies
        run: cd api && npm ci --omit=dev
        run: npx @azure/static-web-apps-cli deploy -d ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_ }} --env production

Step 8: Deploy your Astro site and Azure Functions

Push your changes to the repository, and GitHub Actions will handle the deployment. Once complete, you can access your site and test the Azure Functions API.

Conclusion

You can add powerful serverless capabilities by integrating Azure Functions with your Astro site. The Static Web Apps CLI simplifies local development by providing a unified proxy, and GitHub Actions automates deployment to production.