Allow your Bubble front-end to dynamically use test data with Xano

Another thing I wish I had known how to do from the start.

Don’t be like this guy.

TL;DR

1. Add X-Data-Source headers to all of your front-end API calls when first building them. In Bubble (my front-end), unfortunately you cannot make this a shared header, as the header needs to be set dynamically.

2. Make sure these headers are not private and are optional.

   

3. Create an app_version field for the user custom data type.

4. Build a workflow that sets the app_version upon login for each user. Conditionally set to the arbitrary text of either test (development in Bubble) or live (live in Bubble) whenever the user logs in.

5. Make sure that your authentication token is also generated using the test header, otherwise you will trigger an error when making API calls from a test API token to a live data source, or vice versa.

6. Set all of your API calls to Xano to dynamically pass the current user’s app_version in the header, like this:

   

7. Copy any data you need from your live to your test environment to make sure everything works.

8. Now you can access test data from the development version of your app and live data from the live version.

Detailed comments

A handy feature of Xano (when using the Scale and above plans) is that you can have both test and live data. The Xano documentation explains this in depth, but suffice to say, this allows you to try out your business logic without impacting customers in production.

For full-code or “normal” developers, segregating these two things will probably seem obvious. A benefit of no-code is that people from non-development backgrounds can build applications quickly. But they might not also think about this ahead of time due to their lack of experience in development.

While allowing for test data is easy to configure using the Xano back-end once you want to turn this functionality on, it is harder to do so on the front-end side if you haven’t considered this from the start.

And in the early days you probably aren’t thinking about how you will maintain your application at the same time customers are using it. But you should be, because you are also more likely to break functionality if configuring it after the fact.

So, check out the above steps and make sure you incorporate the ability to dynamically switch between test and live data from the earliest stages of development.