You may need at some point to create publicly facing application rapidly that relies on data stored in a SQL Server database. In this post, I’ll show you how to connect to Azure SQL Database from Bubble, a low code application development environment.

As the first step, you will need to add plugin to your Bubble application called SQL Database Connector.

Once that’s done, you can now configure the connection string as follow:

mssql://<user>:<password>@<sqlServerHostName>.database.windows.net:1433/<databaseName>?encrypt=true

One thing to be aware of is that if you are using firewall rules to control what can access your Azure SQL Database server, it might be tricky to enforce as Bubble uses dynamic outbound IP addresses while making the connection. So you might be whitelisting an IP one day and the other day another one would need to be whitelisted. When that happens you would see a message like the following while trying to connect or initializing a query:

SQL Database Connector issue: Cannot open server ‘<sqlServerHost’ requested by the login. Client with IP address ‘<Bubble IP>’ is not allowed to access the server. To enable access, use the Windows Azure Management Portal or run sp_set_firewall_rule on the master database to create a firewall rule for this IP address or address range. It may take up to five minutes for this change to take effect.

The current workarounds for that situation would be one of the following:

Get a Bubble dedicated plan: This would provide you with a static IP

Use an Azure Logic App, a custom web app or Azure Function to wrap the functionality needed to access that database as an http method that would be usable through the regular Bubble API Connector

The next step would be to define a new Query in the connector configuration like the following example:

Now that we have configured the basics, you will be able to use this as the data source for a repeating group or a state on your page. The type of content would be the name of the query and you will need to use the Get data from an external API option to find your query while defining the data source. If the query uses parameters, you will be able to specify to which bubble element or state you want that to be bound to. For example, you might have a drop down on your page that you want to use as the source value for that parameter. Once the repeating group is bound to your query, you can simply bind the elements within is by starting with Current Cell’s <query name> and then the list of fields present on your query will show up.

Also note that you can define queries to insert, update or delete data as well. Instead of those having a “Use as Data” setting on the query, those would be of type Use as Action instead. You would then be able to user those as part of workflows on your page that can be called by event or user actions like clicking a button for instance.

Happy low coding! 🙂