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:

1
# Create a new Azure Functions project
2
func init api --worker-runtime typescript --model V4
3

4
# Navigate to the new project folder
5
cd api
6

7
# Create a new HTTP trigger function
8
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:

1
{
2
  "$schema": "https://aka.ms/azure/static-web-apps-cli/schema",
3
  "configurations": {
4
    "astro-func-swa": {
5
      "appLocation": "./app",
6
      "outputLocation": "dist",
7
      "appDevserverUrl": "http://localhost:4321",
8
      "apiLocation": "./api",
9
      "apiLanguage": "node",
10
      "apiVersion": "18",
11
      "apiDevserverUrl": "http://localhost:7071"
12
    }
13
  }
14
}

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.

1
{
2
  "scripts": {
3
    "build": "npm run build:app && npm run build:api",
4
    "build:app": "cd app && npm run build",
5
    "build:api": "cd api && npm run build",
6
    "dev": "npm-run-all --parallel dev:*",
7
    "dev:swa": "swa start",
8
    "dev:app": "cd app && npm run dev",
9
    "dev:api": "cd api && npm run start",
10
    "dev:api_watch": "cd api && npm run watch"
11
  }
12
}

Step 4: Run your Astro site and Azure Functions

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

1
npm run dev

Show image

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.

1
import {
2
  app,
3
  HttpRequest,
4
  HttpResponseInit,
5
  InvocationContext,
6
} from "@azure/functions";
7

8
export async function http_name(
9
  request: HttpRequest,
10
  context: InvocationContext
11
): Promise<HttpResponseInit> {
12
  return {
13
    jsonBody: {
14
      firstName: "Elio",
15
      lastName: "Struyf",
16
    },
17
  };
18
}
19

20
app.http("http_name", {
21
  methods: ["GET"],
22
  authLevel: "anonymous",
23
  handler: http_name,
24
  route: "name",
25
});

Step 6: Adding the API call to your Astro site

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

1
import * as React from "react";
2

3
export interface IHelloProps {}
4

5
const apiHost = import.meta.env.DEV
6
  ? "http://localhost:4280"
7
  : "https://<SWA URL>.azurestaticapps.net";
8

9
export const Hello: React.FunctionComponent<IHelloProps> = (
10
  props: React.PropsWithChildren<IHelloProps>
11
) => {
12
  const [name, setName] = React.useState({ firstName: "", lastName: "" });
13

14
  const fetchName = async () => {
15
    const apiUrl = `${apiHost}/api/name`;
16
    try {
17
      const response = await fetch(apiUrl);
18
      const { firstName, lastName } = await response.json();
19
      return { firstName, lastName };
20
    } catch (error) {
21
      console.log(error);
22
      console.log(apiUrl);
23
      return { firstName: "", lastName: "" };
24
    }
25
  };
26

27
  React.useEffect(() => {
28
    const getName = async () => {
29
      const fetchedName = await fetchName();
30
      setName(fetchedName);
31
    };
32
    getName();
33
  }, []);
34

35
  if (!name.firstName || !name.lastName) {
36
    return <p>Loading...</p>;
37
  }
38

39
  return (
40
    <p>
41
      Hello, {name.firstName} {name.lastName}
42
    </p>
43
  );
44
};

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

1
---
2
import { Hello } from "./Hello";
3
---
4

5
<Hello client:load />

Show image

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.

1
name: Deployment to Azure Static Web App
2

3
on:
4
  push:
5
    branches:
6
      - main
7

8
jobs:
9
  build_and_deploy_job:
10
    runs-on: ubuntu-latest
11
    name: Build and Deploy Job
12
    steps:
13
      - uses: actions/checkout@v4
14

15
      - name: Setup Node.js
16
        uses: actions/setup-node@v4
17
        with:
18
          node-version: "18"
19
          cache: "npm"
20

21
      - name: Install dependencies
22
        run: |
23
          npm ci
24
          cd app && npm ci
25
          cd ..
26
          cd api && npm ci
27

28
      - name: Build
29
        run: npm run build
30

31
      - name: Clean dependencies
32
        run: cd api && npm ci --omit=dev
33

34
      - name: Deploy
35
        run: npx @azure/static-web-apps-cli deploy -d ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_<ID> }} --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.