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​

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.

• Read the Announcement Post
• Explore the Azure Samples
• Explore the Documentation

We also have SWA CLI updates to share:

• Database Connections now supported
• SWA CLI Referennce Documentation

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​

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​

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

4. Vue, React, Angular​

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.

5. Learn Best Practices​

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.

• Read the Article
• View Older Posts

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 |🇬🇧 🇧🇷​

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.

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.

• ✨ Worshop Repo | Full Stack Application with DAB + Azure SQL and Vue.Js

7. SvelteKit + Azure MySQL​

Wrap-Up​