Unlock Seamless Data Access: Introducing Azure Static Web Apps Database Connections
Published Dec 20 2023 12:01 AM 3,135 Views
Microsoft

Are you tired of spending countless hours crafting custom APIs for your web applications? Imagine a world where you can effortlessly host your static web apps and data APIs without writing extensive backend code.

 

Learn about the Azure Static Web Apps Database Connections feature - a game-changer that bridges the gap between your frontend and database, all while keeping complexity at bay. In this blog post, we’ll explore how this cutting-edge feature empowers you to connect directly to your database from your static sites. Say goodbye to the traditional backend hustle and hello to a streamlined experience.

 

Buckle up and watch this Open at Microsoft Episode where Jerry dives into the magic of Data API Builder and static web apps database connections feature and unleash the potential of your web applications! 

 

 

 

Try it Yourself!

Scenario

Wouldn’t you like to have an organized way of managing your shopping list? This project allows you to add shopping items as soon as you remember them to give you a compiled shopping list the next time you go out for shopping and include an estimated budget.

 

Pre-requisites

  1. .NET 6 or later (for running DAB locally)
  2. An Azure Subscription

 

Create a database.

You can work with different Azure databases based on your preference including Azure SQL, Azure Cosmos DB, Azure Database PostgreSQL and Azure MySQL Database.

 

I’ll create an Azure SQL database with Basic Compute + Storage with will give me up to 2 GB Storage, configure SQL authentication with a table called ShoppingItems that holds the data as shown on the image below. Copy the connection string to use later.

 

dab-feature.png

 

Prepare your frontend.

You can create a react application using this GitHub template with sample code for the shopping planner.

Julia_Muiruri_1-1702496786656.png

Remember to add a .env file and add your database connection string in a variable called my-connection-string

 

Once your frontend is ready, run 

 

 

npm install -g /static-web-apps-cli 

 

 

 to install Static Web Apps CLI

 

Install & configure Data API Builder

Run

 

 

dotnet tool install -g Microsoft.DataApiBuilder 

 

 

to install Data API builder using dotnet tool.

 

Next, use Static Web Apps CLI to generate a dab configuration file by running

 

 

swa db init --database-type mssql --connection-string "@env('my-connection-string')"  

 

 

The configuration file will be created in a folder swa-db-connections

 

Julia_Muiruri_9-1702500730750.png

 

Now, we will add an entity to expose our table as REST or GraphQL endpoints by running

 

 

dab add Item -c "staticwebapp.database.config.json" --source dbo.ShoppingItems --permissions "anonymous:*"

 

 

where -c specifies the name of the configuration file (default is dab-config.json) and --source specifies the table.

 

Julia_Muiruri_10-1702501040078.png

 

Confirm the entity has been added in your dab config file.

Julia_Muiruri_4-1702496955291.png

 

Push to GitHub.

 

Deploy your web app (and API).

Install the Azure Static Web Apps extension on VS Code to deploy your application on a Static Web App on Azure. Static web apps will automatically set up GitHub actions for a CI/CD pipeline and this way, your live app will automatically be updated every time you push changes on GitHub.

 

Open your Static web application on the Azure portal and go to Database connection (preview) under Settings.

 

dab-feature2.png

 

Click Link existing database to link your static web app to your existing database.

 

 

 

Julia_Muiruri_5-1702497029067.png

 

That’s all!

Both your application and API are successfully deployed and running and can be accessed via: -

1. Web app will be live on the auto-assigned URL

Julia_Muiruri_7-1702497107735.png

Julia_Muiruri_8-1702497169026.png

 

2. Data API will be accessed via <WEB APP URL>/data-api/rest/<ENTITY>

 

Julia_Muiruri_6-1702497073862.png

 

Find the full & step by step workshop of the shopping planner project here

 

Additional Resources

  1. Data API Builder Documentation
  2. Data API Builder Repository
  3. Open at Microsoft series
Version history
Last update:
‎Dec 18 2023 06:18 AM
Updated by: