The Secret Bubble App Connector Plugin Hack: Revolutionize Your Workflows

Discover how to seamlessly run backend workflows from your frontend, return data effortlessly, and supercharge your Bubble app's performance - all without touching the API connector.

Hey there!

Welcome to this week's NoCode SaaS newsletter, where I take you along on my journey of building a profitable SaaS business without code using Bubble.

This week, I'm excited to share a game-changing feature that's been hiding in plain sight: a secret hack to run backend workflows from the frontend in Bubble, without the usual hassle of the API connector.

First off, a huge shoutout to reader Stuart for his fantastic comment on last week's newsletter, which pointed me to an eye-opening forum post by George Collier.

This hidden gem has unlocked a method I've been wishing for in Bubble for ages!

The Problem: Running backend workflows from the frontend and returning data has always been a bit of a pain.

Traditionally, we've had to use the API connector, which comes with its fair share of headaches:

• Time-consuming setup

• Tedious maintenance

• Nightmare to update when fields change

The Solution: Enter the App Connector plugin.

While it's designed to let you run workflows in other Bubble apps, it turns out you can use it within your own app to call your backend workflows.

This method is not only more efficient but also saves hours of tedious setup time. The full documentation for the plugin is here if you’d like to read up on it before the tutorial.

In this newsletter, we'll dive into:

1. What this secret hack is all about

2. How to set it up (spoiler: it's surprisingly quick!)

3. Building a simple workflow to demonstrate its power

So, whether you're looking to boost security, improve performance, or enhance usability, this method of running backend workflows is a game-changer.

---

Setting Up the Bubble App Connector Plugin

Let's walk through how to set up this magical workflow hack step-by-step:

1. Install the App Connector Plugin

First, head over to your Bubble app's plugin section and search for "App Connector". This plugin is officially made by Bubble, so you can trust its reliability.

2. Configure the Plugin

Once installed, it's time for a quick setup:

a) Go to the App Connector settings in your Bubble editor.

b) Click on "Connect to app"

c) Enter your app’s domain

d) Hit "Connect"

3. Refresh App Metadata

This step is crucial for syncing your backend workflows:

a) In the App Connector settings, find the "Refresh app metadata" button.

b) Click it to pull in all your current backend workflows.

4. Select Your Backend Workflows

Now you'll see a list of all your app's backend workflows. Simply check the boxes next to the ones you want to make available through the App Connector.

Important: You will only see backend workflows which have the ‘Expose as public API workflow’ option checked.

And that's it for setup! Believe it or not, you're now ready to start calling backend workflows from your frontend with ease.

Using the App Connector in Your Workflows

Now that we're all set up, let's see how to use this in practice:

1. Create a New Workflow

In your Bubble editor, create a new workflow or edit an existing one where you want to call a backend workflow.

Make sure your workflow is returning some data - if you need it. You can see me do this in the video tutorial.

Make sure the workflow ‘Expose as public API workflow’ option ischecked.

2. Add the App Connector Action

In your frontend workflow editor:

a) Click to add a new action

b) Search for your app name

c) You'll see options like "Run [Your App Name] [Workflow Name]"

3. Configure the Action

When you select the action, Bubble will automatically show you the input fields required for your backend workflow. No more manual setup or guesswork!

4. Use the Returned Data

The best part? You can now use the data returned from your backend workflow in subsequent steps of your frontend workflow. It's seamless!

Why This Matters

This method of calling backend workflows offers several advantages:

1. Improved Security: Keep sensitive operations on the backend

2. Better Performance: Offload complex operations from the frontend

3. Easier Maintenance: Update your backend workflow, and the frontend call updates automatically

4. Cleaner Code: No more cluttered API connector setups

Potential Use Cases

Now that we've seen how easy it is to set up and use the App Connector for backend workflows, let's explore some real-world scenarios where this can be a game-changer for your Bubble app:

Complex Calculations and Data Processing

Generating detailed reports or analytics

Example: Let's say you're building a financial app. You could create a backend workflow that calculates complex metrics like ROI, compound interest, or risk assessments based on multiple data points.

Call this workflow from the frontend when a user requests a report, process the data securely on the backend, and return only the necessary results to display.

Third-Party API Integrations

Securely interacting with external services

Example: Imagine you're building a weather app. Create a backend workflow that fetches data from a weather API, processes it, and returns only the relevant information.

This keeps your API keys secure on the backend and allows you to format the data before sending it to the frontend.

User Authentication and Authorization

Enhanced security for sensitive operations

Example: For a finance app, you could create a backend workflow that handles authentication and login by generating a magic link.

The frontend calls this workflow, which then manages the entire authentication process, including sending verification codes and validating responses, before returning a simple "authenticated" or "failed" response, along with the magic link to log the user in if it was succesful.

Batch Operations

Handling large-scale data operations efficiently

Example: In an e-commerce app, use a backend workflow for bulk product updates.

The frontend sends a list of products to update, the backend workflow processes each item, perhaps interacting with inventory systems or other databases, and returns a summary of the changes made.

---

By leveraging backend workflows through the App Connector, you're not just simplifying your development process – you're opening up a world of possibilities for creating more powerful, efficient, and secure Bubble applications.

The added bonus is you can also include pretty loading animations (like the ones in the video tutorial)

Remember, the key is to think about which operations benefit most from being run on the backend, and then design your workflows accordingly.

With this approach, you'll be able to build more sophisticated apps without sacrificing performance or user experience.

---

I hope I’ve inspired you to try out this method for running your workflows! By bridging the gap between frontend and backend workflows, we're able to create more powerful, efficient, and secure applications with less hassle.

Key Takeaways:

1. Simplicity: Setting up the App Connector is surprisingly quick and easy.

2. Flexibility: You can now run complex operations on the backend and seamlessly use the results in your frontend.

3. Maintenance: Say goodbye to the headaches of manually updating API calls every time you tweak a backend workflow.

4. Security: Keep sensitive operations and data on the server-side where they belong.

Start small – perhaps by converting an existing API connector call to use the App Connector instead.

As you get more comfortable, you might find yourself rethinking how you structure your app's logic, taking full advantage of what backend workflows can offer.

I’ve already started using this technique in my own apps.

I'd love to hear how you end up using this in your own projects! Feel free to reach out and share your experiences, or if you have any questions as you start implementing this approach.

---

That’s it for this week!

That's it for this week's deep dive into the world of Bubble backend workflows. I hope you found this as game-changing as I did when I first discovered it.

A huge thanks again to Stuart for the tip and to George Collier for sharing this tip - I really hope more people hear about this as it’s an amazing hack!

Happy building, and here's to making our Bubble apps even more powerful!

James

P.S. If you haven't already, don't forget to subscribe to the NoCode SaaS podcast where myself and Kieran (@nocodelife) discuss all things no-code and SaaS. You can find us on all major podcast platforms.