Web App Built using Bubble and Webflow

Showcase
1

Hey everyone! I’m an avid Bubbler and I wanted to showcase a project I’ve been working on.

My favorite part about Bubble is how easy it is making API workflows. I’m also a huge fan of site builders like Webflow, because they make creating beautiful websites easy. I find Bubble’s front end designer less intuitive to use, so I wanted to create a tool that would let me get the best of both worlds!

What I came up with is Cloud Canal. Cloud Canal is a low-code framework for turning static sites into functional web apps. At its core, it’s an API connector that lets you connect tools like Bubble and Webflow together.

My proudest achievement is that the Cloud Canal web app is actually powered by Cloud Canal itself; the front end is made in Webflow, and the Cloud Canal framework is used to hook it up to the back end which I’ve built in Bubble!

Please check it out and let me know what you think. I’ve just launched and am hungry for feedback :slight_smile:.

29 Likes
2

this is a cool tool Patrick!

Would you want to submit to Nucode.co as a no code tool? nucode.co/submit-tool

3

Thanks, Joe. That sounds like a great idea.

I’ll check it out!

4

Looks great! It’s always exciting to see what all can be built using the no-code tools out there. All the best!

5

Thanks, Anil!

I love how easy Bubble makes it to build APIs, and I wanted to bring that functionality to web designers that are already familiar with other site builders out there.

I know many people (myself included) learn better by seeing and doing as opposed to just reading, so stay tuned for a video tutorial series!

In the meantime, anyone interested in giving Cloud Canal a go can check out the documentation.

1 Like
6

That’s great. APIs are central to any app and I am sure this will be useful to a lot of web designers and app developers. Keep up the great work!

7

@patrick.luzny that’s great. We actually are trying to use cloud canal to integrate webflow and bubble. However, the instructions in the documentation is not clear enough for a non-developer to understand and implement.
Even the most basis question is not clear to me whether the domian needs to be pointed to webflow or bubble?
I was just trying get the signup screen to work but it seems very challenging.
Can you help?

1 Like
8

Hi Ayan, thanks so much for the feedback. I really appreciate you checking it out!

It seems I haven’t done a good enough job making the docs clear. Sorry about that. I am actually currently working on a set of video tutorials to demonstrate how easy Cloud Canal is to use. The first batch will walk users through the process of connecting Webflow and Bubble. I will post back here as soon as those videos are available, within the next week.

In the meantime, to answer your question, the domain registered in Cloud Canal should be for your front end. In your case, it would be the Webflow domain. I will update the app to mention this. So if your webflow site is hosted at www.example.com, you would register example.com as the domain.

When you make the connector, it should be pointing to your Bubble API.

Again, thank you for trying it out! Let me know if there’s anything else I can do for you.

9

Thank you! looking forward to your video tutorials. Thanks.

1 Like
10

@patrickluzny, as we are waiting for your videos meanwhile had another question.
Does this URL have to come from bubble? and from the actual page URL on bubble where we have some placeholder UI placed?

image
image2012×254 30.7 KB

Also, couldn’t find the area in footer settings where to add the script.

11

@ayan.basu The base URL of the connector does come from Bubble, but specifically from the API side of your Bubble project. I’m not sure how familiar you are with using Bubble as an API, but that’s what we’re aiming to do here. Cloud Canal makes use of both Bubble’s Data API and API Workflows. I suggest going over the documentation in the Bubble reference.

For example, the URL in the connector that powers Cloud Canal looks like this:

image
image995×216 6.43 KB

As you can see from the first part of the URL, my Bubble app is called cloudcanal. I have multiple API workflows and data types I need to access, so my endpoints look something like this (there are more, this is just a snippet):

image
image976×851 39.9 KB

When a request comes in for a specific endpoint, Cloud Canal takes the endpoint URL and combines it with the base URL of the connector. For example, let’s look at the first endpoint. When the request comes in, the framework will combine “https://cloudcanal.bubbleapps.io/api/1.1/” with “obj/connector” to get the final URL: “https://cloudcanal.bubbleapps.io/api/1.1/obj/connector”. It will send a GET request to this URL.

You can see I’ve used a combination of Data API endpoints (starting with “obj”) and workflows (starting with “wf”). If you’ve never worked with the API side of Bubble before, this all may come across as a little overwhelming, but I promise you that Bubble does a really good job of making it intuitive.

For your second question, you need to go to your Webflow dashboard, then open up the 3 dot menu under your project, and go to Settings. Select the Custom Code tab and scroll down to Footer Code. You need to have a site plan or user plan in order to access this section.

image
image1154×558 15.8 KB

Thank you so much for the questions, I’ve already learned a ton about usability. I think this really reinforces the need for those tutorial videos to make everything clear. I will release the first batch of videos by Monday. Based on your feedback, I will cover:

  • Creating a Webflow site
  • Creating a Bubble app and working with the API
  • Setting up Cloud Canal
  • Linking it all together

I’ll walk you through creating a basic project from start to finish.

3 Likes
12

This is an awesome idea! I’m looking forward to seeing more about how you do this. I’d love to use Webflow’s editor as my primary editor.

1 Like
13

Thanks for the info! I was able to create endpoints but do have questions about header, query, cookies etc. But I’ll wait for your videos on Monday - thanks again!

14

@patrick.luzny checking to see if you were able to put up any video tutorial? looking forward to working on the integration. thanks!

15

Hi Ayan,

So sorry for the delay. The videos are taking a little bit longer to edit than I thought they would. I will post back here in a couple days when they are ready.

I’d like to thank you again for your interest!

16

@patrick.luzny no problem, thanks for the update!

1 Like
17

I’m super interested in this! Thanks for making this man. Excited to see the videos you release soon too.

I am new to bubble but very proficient in webflow. I’m interested in learning more here.

Quick question, so even when users are logged into your web application (cloud cannal) You still used webflow to design those pages inside there?

So you’re saying I can use webflow to fully design everything. All the pages once logged in etc all the things. And then use bubble to build the backend like what happens when someone presses a button etc. But I could design even the buttons in webflow?

Seems dopeeee!!

1 Like
18

Hi Cody,

Absolutely! Cloud Canal is an API connector at its core. There’s a popular Bubble plugin out there called “API Connector” that Bubblers use to pull and push data from/to various APIs. Cloud Canal does something similar but can be used in your front end site (like your Webflow site, for example) to connect to API sources (including Bubble).

So in short, you can design your site in Webflow, setup some API endpoints in Bubble, and then use Cloud Canal to link the two together easily.

Hopefully the videos make things a little more clear!

2 Likes
19

LIT! Looking forward to the vids!

20

@ayan.basu @chris10 @cody2 Thanks for your patience. Things are taking longer than I expected, but I’ve completed a few videos on setting up a Webflow site, Bubble app, and Cloud Canal connector. That covers everything you need to hook up Bubble and Webflow.

The first three videos are available here, with the rest to come over the next week:

What’s left is the actual meat of the videos. I’m creating a walkthrough on how to build a membership site because that should be a good primer. I will cover topics including:

  • User registration
  • User login
  • User logout
  • Restricting access to pages based on whether a user is registered
1 Like