Publish new Azure Static Web Apps from Data API Builder

Below are steps to Publish Azure Static Web Apps with Data API Builder.After writing code for list, get, update, create, and delete in index.html, use the following:

<button  id="list"  onclick="list()">List</button>

async  function  list() {

const  response = await  fetch('/data-api/rest/Person');

const  data = await  response.json();

console.table(data.value);

}

In cmd install the Static Web Apps CLI using the command: npm install -g @azure/static-web-apps-cli .

I referred to this documentation for connecting to a database with Azure Static Web Apps.

Then use the command swa db init --database-type mssql to initialize a database connection for your Azure Static Web App project with a Microsoft SQL Server database.

Open the staticwebapp.database.config.json file and add the following content:

{
  "$schema": "https://github.com/Azure/data-api-builder/releases/latest/download/dab.draft.schema.json",
  "data-source": {
    "database-type": "mssql",
    "options": {
      "set-session-context": false
    },
    "connection-string": "Server=tcp:<your_server>.database.windows.net,1433;Database=<your_db>;User ID=<your_user>;Password=<your_password>;Encrypt=true;"
  },
  "runtime": {
    "rest": {
      "enabled": true,
      "path": "/rest"
    },
    "graphql": {
      "allow-introspection": true,
      "enabled": true,
      "path": "/graphql"
    },
    "host": {
      "mode": "production",
      "cors": {
        "origins": ["*"],
        "allow-credentials": false
      },
      "authentication": {
        "provider": "StaticWebApps"
      }
    }
  },
  "entities": {
    "Person": {
      "source": "dbo.MyTestPersonTable",
      "permissions": [
        {
          "actions": ["*"],
          "role": "anonymous"
        }
      ]
    }
  }
}

I referred to thislink for configuring Azure Static Web Apps and this documentation for swa-cli.config.json.

Use the command swa init to create a swa-cli.config.json file like the following:

{
  "$schema": "https://aka.ms/azure/static-web-apps-cli/schema",
  "configurations": {
    "new-folder-(6)": {
      "appLocation": "scr\\public",
      "outputLocation": ".",
      "dataApiLocation": "swa-db-connections",
      "appDevserverUrl": "http://localhost:4280"
    }
  }
}

• Create staticwebapp.config.json in the main and add staticwebapp.config.json with the following content:

{
    "navigationFallback": {
      "rewrite": "/index.html",
      "exclude": [
        "/api/*",
        "/static/*"
      ]
    },
    "routes": [
      {
        "route": "/api/*",
        "allowedRoles": ["authenticated"]
      },
      {
        "route": "/admin",
        "allowedRoles": ["admin"]
      },
      {
        "route": "/",
        "rewrite": "/index.html"
      },
      {
        "route": "/static/*",
        "headers": {
          "cache-control": "max-age=31536000"
        }
      }
    ],
    "responseOverrides": {
      "404": {
        "rewrite": "/404.html"
      },
      "403": {
        "rewrite": "/403.html"
      }
    },
    "globalHeaders": {
      "X-Content-Type-Options": "nosniff",
      "Strict-Transport-Security": "max-age=31536000; includeSubDomains; preload",
      "Content-Security-Policy": "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; connect-src 'self'; frame-src 'none';"
    },
    "platform": {
      "apiRuntime": "node:18"
    },
    "networking": {
      "allowedIpRanges": [
        "0.0.0.0/0"
      ]
    }
  }

Create the dbo.MyTestPersonTable in Azure SQL .Allow public network access and allow azure service and sevices to acess the service. Then Start the app locally using:

swa start ./scr/public --data-api-location swa-db-connections 

If you encounter firewall issues during swa start, add the necessary firewall rules in SQL Server.

Push the code, .env, staticwebapp.config.json, swa-cli.config.json, and staticwebapp.database.config.json to GitHub.

Modify the GitHub YAML configuration file as follows, replace app_location according to your folder structure:

 app_location: "./scr/public" 
 api_location: ""
 output_location: "." 

Go to the Database connection in Static Web Apps => link the existing database, and view the app in the browser. Output: