In the last post we have created some more settings we need, like a Free Azure SQL Database, configured our Static Web Application to use DAB and configured User Managed Identities for as well the Database as well the Static web app.

In this post we will continue. First step should be to enable the SWA to connect to the database, but it might come in handy if we also can talk from our development server to the database.

Therefore we need to open the portal, open the SQL Database Server and go th Networking. At that page we need to change the public network access to selected networks, click on the plus sign to add our IP address to the firewall rule and we need to enable the exceptions for Azure related stuff.

For local testing we need a connection string. You can copy that one from the database page in the Portal. There are various options. I will try to focus on the integrated mode, but Basic authentication gives you an option to access the database also.

Now that you know where you can find the connections strings, it might be usefull to implement the connection to the Static web app.

There is one thing that you need to know, at this moment you cannot delete this connection. 

This created a litle problem for me, but ok. If you

Looking at this screen, you see that you cannot select the Authentication type. The reason for this is probably related to:

• This is the second connection to the same Database server, only a different database
• other?

If you have setup the connection, it would look like this.

I have added a connection using the User Managed Identity. The warning at the end shows that I did not push a database connection yet. Thing is that I probably need to redo my folder structure. Currently the structure I have is not setup for this, so I need to:

• Move the full contents of my hugo site to a few subfolders
• Change the publish pipeline to use that folder
• Create a subfolder for dataAPIBuilder configuration
• Update the yaml pipeline for this

Creating Subfolders

My current strucuture is … Flat

At work I would advise you to take a course on using Devops. We are using a structure there like this

That kind of structure would be usefull for me too. Not that I currently need all the folders, but I think I will:

1. use .github folder instead of
2. create three subfolders (at this moment) in the folder named “api”, “web” and “swa-db-connections”

The other folders may stay, even while not used. They might come in handy when prepping content..

Changing the pipeline

The pipeline in the .github folder contains the following:

          app_location: "/" # App source code path
          api_location: "api" # Api source code path - optional
          output_location: "public" # Built app content directory - optional

To make it work I need to change this to:

          app_location: "./src/web" # App source code path
          api_location: "./src/api" # Api source code path - optional
          data_api_location: "./src/swa-db-connections"
          output_location: "public" # Built app content directory - optional

After the updates

I have applied the above changes and updated the repositories. I also removed all my branches from Github and removed the local branches. After this I have added downloaded the branch again and updated this document.

When looking at the faillure you saw above (configuration of database configuration file) is now there without any orange exclamation mark. I have added wrong content there at this moment, but that is ok for now

Enjoy fiddling around and hope to see you soon in my next blog

• Devops
• DataAPIBuilder
• Azure