**Doc-Enhancement: Connecting Azure SQL Database to Azure Static Web App (Astro)**

[Sampath280]

This documentation enhancement will guide you through resolving common issues with linking an Azure SQL Database to a Static Web App (SWA) using Astro, focusing on configuration and troubleshooting.

Prerequisites

1. An Azure SQL Database instance with necessary tables and data.
2. An Azure Static Web App created using Astro.
3. Access to the Azure Portal.

---

Steps to Configure and Resolve Issues

1. Configure the staticwebapp.database.config.json

Ensure your configuration file is correctly set up with:

• A valid connection string to the SQL Database.
• Proper entity mappings for the tables.

Example:

{
  "$schema": "https://github.com/Azure/data-api-builder/releases/download/v1.1.7/dab.draft.schema.json",
  "data-source": {
    "database-type": "mssql",
    "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": {
      "enabled": true,
      "path": "/graphql"
    },
    "host": {
      "cors": {
        "origins": ["*"],
        "allow-credentials": false
      },
      "authentication": {
        "provider": "StaticWebApps"
      }
    }
  },
  "entities": {
    "Test": {
      "source": "dbo.Test",
      "permissions": [
        {
          "actions": ["*"],
          "role": "anonymous"
        }
      ]
    }
  }
}

2. Allow Azure Resources and Configure Database Access

• In the Azure SQL Database Firewall Settings, ensure:
  • "Allow Azure Services and resources to access this server" is enabled.
  • Your local IP or public IP address is allowed (if testing locally).

3. Test Connection Locally

Run the Static Web App locally with the Data API:

swa start . --data-api-location swa-db-connections

Use REST or GraphQL paths to verify data retrieval:

• REST: http://localhost:<port>/data-api/rest/Test
• GraphQL: Use queries to interact with your data.

---

4. Deployment to Azure

Push your configuration and application code to GitHub. Azure SWA will use the deployment pipeline defined in the GitHub Action workflow.

Ensure your YAML file specifies:

• The correct dist location for the app.
• Data API setup for the SWA environment.

---

5. Common Issues and Troubleshooting

• Error 400 (Bad Request):
  • Check for typos in the connection string.
  • Ensure all required fields (Server, Database, User ID, Password) are correctly populated.
• CORS Issues:
  • Ensure cors.origins is set to ["*"] for debugging. Restrict it later for production.
• Entities Not Found:
  • Verify that source matches the table name in your Azure SQL Database.
  • Ensure the user in the connection string has appropriate permissions for the database.

---

6. Example Output

After resolving issues, accessing /data-api/rest/Test should return data like:

[
  {
    "id": 1,
    "name": "Sample Data"
  }
]

GraphQL queries will also function correctly via /data-api/graphql.

References

• Azure Static Web Apps Documentation
• Data API Builder Documentation
• Azure SQL Database Configuration

By following these steps, you should be able to resolve connectivity issues and successfully integrate an Azure SQL Database with your Static Web App.