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

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:

```json
{
"$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:.database.windows.net,1433;Database=;User ID=;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:

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

Use REST or GraphQL paths to verify data retrieval:

- REST: `http://localhost:/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:

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

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

### **References**

- [Azure Static Web Apps Documentation](https://learn.microsoft.com/en-us/azure/static-web-apps/)
- [Data API Builder Documentation](https://github.com/Azure/data-api-builder)
- [Azure SQL Database Configuration](https://learn.microsoft.com/en-us/azure/azure-sql/database/)

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