How to handle development/staging APIs with Bubble?

Need help APIs
1

Our Bubble front end interacts with our own backend APIs. We would like our development version of Bubble to hit a different API domain than our public version. Is there a way to do this dynamically instead of having to re-write every single API connector call?

2

First up, you’ll want to build these API calls into a private plugin. If you have already built them out in the API Connector, you can copy and paste them across by right clicking on the entire call.

You can then create variables in the API URLs by using square brackets, for example;

https://[hostname]/my-interesting-endpoint

You then specify this variable as Secret and it appears in the plugin tab for you to specify a value for Development version vs Live version.

3

Awesome, that worked - thanks a lot!

4

Hey @juicebox ,

Thanks for this! I’ve just tested your suggestion and it works perfectly from a plugin point of view. Just to double check though, does this mean that all existing data and action API calls on the app pages (and backend) now need to be updated to use the Private Plugin as opposed to the API Connector directly?

I think I already know the answer but… I’ve spent months settings up API calls and testing them in my Test environment, etc with the assumption that the API connector would present a way of managing the production URL’s and keys once deployed to Live as this must be a fairly common requirement and in all the documentation I’ve read, I’ve not seen anything which suggests this method (of creating a private plugin) be done up front.

Any advice would be welcome here

Thanks!

5

Correct.

I don’t think I ever saw any documentation about encouraging the use of private plugins instead of the API connector - I agree it would make sense for Bubble to flag this with customers, perhaps within the API Connector interface.

I suspect that Bubble likes having a simplified version as the API connector as it’s a easier learning curve than developing your own plugin (but not by much!).

6

Thanks for the quick response @juicebox!

Looks like I’m going to have a busy few days migrating this stuff. If you think of anything else RE this topic, please let me know!

Have a great weekend! :blush:

7

Thanks for the solution! Working nicely!

One question I came up with:

  • for every call we will need to specify the desired url for Dev and Live environments, right? If you have 10 Api calls, we would have 10 dev hosts and 10 live hosts, even though all 10 are the same.
    As setting up ‘host’ as a shared parameter doesn’t seem to work
8

Correct.

Shared parameters definitely aren’t as flexible as we’d like them to be!

9

that sucks :frowning_face:

10

Well, it sucks maybe a bit, if you set up your API calls like this you dont need to create seperate calls for Live and Dev:

image
image1169×321 22 KB

In the action use a condition to determine the URL:

image
image869×414 21.9 KB

For the Header you can do pretty much the same, additionally save it encrypted and external for extra security.

11

What about for OAuth2 where the “Token endpoint (POST)'” URL also should be dynamic between live and dev? - I can’t find a way to make this dynamic and show up in the plugin tab.