Share via

How to Link Static Web App with Data API Builder

Andrea Flourentzou 20 Reputation points
2026-03-08T22:19:08.7766667+00:00

I have recently been pointed https://learn.microsoft.com/en-us/azure/static-web-apps/database-postgresql?tabs=bash&pivots=static-web-apps-rest to setup Data API Builder however I am not sure how this integrates with my static web app and how my web app calls on the DAB.

Azure Static Web Apps
Azure Static Web Apps

An Azure service that provides streamlined full-stack web app development.

Answer accepted by question author
  1. Q&A Assist
    2026-03-08T22:19:24.29+00:00
    AI generated content. This question contains an answer created with AI from Q&A Assist. Learn more

    Data API Builder (DAB) is integrated into Azure Static Web Apps through the database connection feature. Once configured, the static web app exposes DAB-powered endpoints under the /data-api path, which the front-end calls like any other HTTP API.

    High-level flow:

    1. Configure a database connection for the Static Web App (in Azure Portal and via config file).
    2. Static Web Apps hosts DAB for that app.
    3. The front-end calls /data-api/rest/... or /data-api/graphql on the same domain.

    1. How DAB integrates with Static Web Apps

    Static Web Apps uses Data API Builder under the hood:

    • It takes REST/GraphQL requests and converts them into database queries.
    • It uses the same authentication/authorization model as Static Web Apps (roles, etc.).

    From the overview:

    • Database connections “allow access to a database from your static web app without writing custom server-side code.”
    • Requests are routed as:
      • example.com/api/* → Functions
      • example.com/data-api/* → DAB database endpoints (REST/GraphQL)
      • example.com/* → Static content

    The /data-api prefix is fixed and cannot be changed. You can configure only the suffixes, such as rest and graphql.

    2. Configuration pieces

    There are two required steps:

    1. Connect the database in Azure Portal
      • In the Static Web App resource, add a Database connection and point it to PostgreSQL (or other supported DB).
      • This step wires the Static Web App to the database and ensures the runtime overwrites the connection string at deployment.
    2. Add staticwebapp.database.config.json to the repo
      • This is the DAB configuration file. A sample is described in the database configuration docs.
      • Key sections:
        • data-source: database type (postgresql, mssql, mysql, cosmosdb_nosql) and connection string placeholder.
        • runtime: defines REST and GraphQL endpoints and CORS for local dev.
        • entities: maps URL paths/types to database tables and defines permissions.

    Example behaviors from the docs:

    • Database connection: In development, the runtime reads the connection string from the config file (typically via @env('DATABASE_CONNECTION_STRING')). In production, Static Web Apps overwrites this with the connection info collected when the database is connected.
    • API endpoint: REST is available at /data-api/rest and GraphQL at /data-api/graphql by default. The suffixes (rest, graphql) are configurable, but /data-api is not.
    • API security: runtime.host.cors defines allowed origins (for local dev, usually http://localhost:4280).
    • Entities: Define which tables are exposed and under what names, and how they are secured with roles.

    The Static Web Apps CLI can generate a stub config:

    swa db init --database-type postgresql

    This creates staticwebapp.database.config.json in swa-db-connections by default.

    3. How the static web app calls DAB

    Once the database connection and config file are in place and deployed:

    • The front-end (JavaScript, etc.) calls the DAB endpoints on the same origin:
      • REST: https://<your-app>.azurestaticapps.net/data-api/rest/...
      • GraphQL: https://<your-app>.azurestaticapps.net/data-api/graphql
    • The exact REST paths depend on the entities configuration. For example, if an entity Person is defined, a typical REST path would be:
      • GET /data-api/rest/Person
      • POST /data-api/rest/Person
      • etc.
    • Authentication and roles from Static Web Apps are applied automatically to these endpoints, based on the permissions defined per entity.

    In local development with the SWA CLI:

    • Start the app with: 
        swa start ./src --data-api-location swa-db-connections
    • The CLI exposes /data-api on http://localhost:4280, proxying to the local DAB runtime.
    • The front-end calls http://localhost:4280/data-api/rest/... or /data-api/graphql in the same way it would in production.

    4. Summary

    • DAB is not a separate service that must be hosted manually; it is provided by Static Web Apps when a database connection is configured.
    • Integration is via the staticwebapp.database.config.json file plus the database connection in the portal.
    • The static web app calls DAB through /data-api/rest or /data-api/graphql on the same domain, using paths and permissions defined in the entities section.

    References:

0 additional answers

Sort by: Most helpful
Most helpful Newest Oldest

Your answer

Answers can be marked as 'Accepted' by the question author and 'Recommended' by moderators, which helps users know the answer solved the author's problem.