Skip to main content

Static Web Apps Database Connections

Database Connections: Content Collection

Modern web applications rely on scalable and cost-effective access to databases from their front-end experiences. Implementing the backend services to handle data interactions can be complex and repetitive. Wouldn't it be great if we could seamlessly access Azure databases using REST and GraphQL, without writing backend code?

Now, you can! Join us for a week of exploration related to Database Connections For Azure Static Web Apps - check back daily for a new resource to help you learn more about this feature!

1. Launch Announcement


We want to keep improving this feature, and the Azure Static Web Apps developer experience, to meet your needs. Your feedback matters! so please leave us comments and questions at the link below!

💬 | Contribute to the discussion!

On Mar 15 (today) we announced "database connections for Azure Static Web Apps", an easy way to access your Azure database content from your front-end static app with REST and GraphQL, without having to write any backend code. Get started for free during public preview.

We also have SWA CLI updates to share:

Static Web Apps Database Connections

Starting tomorrow, we hope to share more resources to help you dive into the topic - from video walkthroughs to articles on best practices, and tutorials illustrating usage with different frameworks and usage scenarios.

2. Azure Tips & Tricks


Azure Static Web Apps Tips and Tricks is a video series that walks through the various features of Azure Static Web Apps, one episode at a time. | Watch Past Episodes on Microsoft Learn or YouTube

Today, we're debuting 2 new episodes focused on Database Connections.

  1. Connect to a Database from Static Web Apps using a REST API - Join Thomas Gauvin for this video tutorial showing you how to connect your Azure SQL Database to your Static Web Apps, and access it through a secure data endpoint generated for you, using the REST API.

  2. Query a Database from your Static Web Apps using a GraphQL API - Join Craig Shoemaker and learn how to query the database using a GraphQL endpoint.

3. Blazor SWA + GraphQL


Database Connections can support both REST and GraphQL endpoints for access. Want to explore GraphQL on Azure? Check out this ongoing series of posts from Microsoft Cloud Advocate Aaron Powell.

Today, Aaron is sharing 3 new posts in the series that provide more hands-on learning for using Database Connections in your modern web app.

  1. Part 12: GraphQL as a Service provides an introduction to the newData API Builder for Azure Databases(DAB) - currently in public preview - the underlying technology that provides an easy way to create REST or GraphQL endpoints to your existing Azure database without you having to write backend code.
  2. Part 13: Using Data API builder with Azure Static Web Apps - next, take a look at how the DAB capability can be accessed seamlessly in your Azure Static Web App using the new Database Connections feature and a React app example. (Note: Another upcoming post in this collection will walk through the official React sample for SWA+DAB so stay tuned).
  3. Part 14: Using Data API builder with SWA and Blazor Today, we want to feature this post which implements the same use case - the Trivia game shown below - as a Blazor application using the Strawberry Shake NuGet package. | 👉🏽 Explore the source

Blazor App walkthrough image

4. Vue, React, Angular


The Azure Static Web Apps Database Connections feature uses the Data API builder for Azure Databases to support REST and GraphQL endpoints for your deployed app. The Azure-Samples/data-api-builder is a good resource to discover and explore end-to-end samples using this feature.

Here are three samples showcasing Static Web Apps Database Connections:

  1. Vue + AzureSQL - The well-known ToDo MVC application, built using Database connections and SWA.
  2. React + AzureSQL - Organize track books with this sample app, built using Database connections and SWA.
  3. Angular + CosmosDB (NoSQL) - Tour world wonders in this app, built using Database connections and SWA.

Screenshot from React Library Management demo

5. Learn Best Practices


Want to connect your Azure Static Web Apps to your database? Should you use Azure Functions with a managed, serverless API interface? Or use Data API builder directly? Or use the new Database Connections feature in SWA that wraps it? Let's learn about best practices when taking the decision.

Today, we are sharing a new blog post from Static Web Apps PM Thomas Gauvin, that looks at this particular question. In particular, it helps you understand the choices between using Azure Functions (managed), Data API builder (direct) or Database Connections (seamless) options to connect your Azure Static Web App to your database.

Architectural Diagram for SWA with Database Connections

But wait, there's more! Check out the recent Azure SWA Community Standups recording where Davide Mauri (Data API Builder PM) and Thomas Gauvin (SWA PM) discuss the new Database Connections feature and how it works - with more insights into best practices and usage.

6. Vue + Azure SQL |🇬🇧 🇧🇷


The GitHub Repo below has versions of the workshop in English (🇬🇧) and Portuguese (🇧🇷) already completed. Star the repo and watch for upcoming versions in Spanish and French. Leave a comment if you'd like to see (or contribute) translations for other languages.

Azure Static Web Apps Database Connections is based on the underlying Data API builder for Azure Databases. But what exactly does Data API builder work under the hood, and how can you use it for different applications? Jumpstart your learning journey into Data API builder with this new series of workshops from Cloud Advocate Glaucia Lemos.

Data API Builder

This repository is intended to host an evolving series of workshops that will show you how to develop applications with DAb - starting with a Vue.js front-end and an Azure SQL backend example shown below. Future workshops will explore different front-end frameworks and/or backend database options. Workshops come with step-by-step instructions, with localized versions available currently for English and Portuguese.

Walkthrough for demo

7. SvelteKit + Azure MySQL


Svelte is an increasingly popular framework for building modern web apps. With the recent release of SvelteKit 1.0 you now have built-in adapters for zero-config deployment to popular hosting environments - including Azure Static Web Apps. Get a jumpstart into Svelte Application Development with Azure in this tutorial.

⏸ | Revisit the page tomorrow for updates.



This brings us to the end of launch week but our learning journey will continue. In this post, we'll share useful resources for self-study and give a sneak peek at planned future posts for this collection. | View Older Posts > Apps On Azure

⏸ | Revisit the page Monday for updates.