Streaming live at 10am (PST)

How to Build a Web App in Webflow

Hey everyone! I’m a huge proponent of Webflow and wanted to showcase a project I’ve been working on.

I absolutely love how easy Webflow makes designing beautiful sites. The more I use it, the more I find myself looking for new ways to up my web design game.

Lately, I’ve been wanting to branch out into designing full-fledged web apps. While I know some people have used Webflow to build out the front end components, they typically end up exporting the code from Webflow and using another tool (or custom code) to build the back end.

This severs the link between Webflow and your app, so each time you make a change to it in Webflow, you’ll have to export the code again. I wanted to build something that would allow us to build web apps that work right in Webflow, without breaking that link.

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 Webflow together with back ends that are custom-coded or put together using something like Bubble. It works by using data attributes that you can apply right in the Webflow designer.

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! You can access the share link here.

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

6 Likes

Can you explain a bit more about your cloud canal ?

I would really like to try it, but need a bit background of your product :slight_smile:

I’m currently learning ruby on rails and know a bit of css, html and javascript!

Sure thing, David! Anything, in particular, you’d like to know?

The idea for Cloud Canal came from a personal need of mine. I absolutely adore Webflow’s designer, but I wanted to do more than was possible with the Webflow CMS. In particular, a lot of the features I could think of that would be necessary for a web app revolved around permissions and access to the CMS data. I’m aware that there are some third-party tools out there that focus on building membership sites, but I needed to go beyond what they were capable of for my own projects.

As a result, Cloud Canal was born. I built it so that I can connect any site I make in Webflow to any REST API. Cloud Canal isn’t a front end or a back end; instead, it’s the glue that sits between the two.

The nice thing about this concept is that not only can you hook up to any existing API out there, you can also hook up to ones you’ve built yourself :wink:. Now I’m not sure what your level of expertise is in creating APIs, but for a truly low-code approach, you can do what I did for the Cloud Canal web app: use Bubble.

Bubble is a codeless platform for building APIs. You can also build a whole web app right in it, but I personally find the Webflow designer significantly more polished and easier to use. I used Bubble to handle all sorts of things in the Cloud Canal app, including my users.

The role of Cloud Canal is then to generate “connectors” that make it really easy for your Webflow site to communicate with your API. It’s more than just one-way communication because you can actually take the response from your API and update your site, set cookies (to store info like an authorization token, for example), and more. This is all accomplished by data attributes that are generated for you by Cloud Canal, as well as a script that you include in your site.

Your Webflow Site -> Cloud Canal -> Your API -> Your Webflow Site


Let’s go over an example of how I built the login functionality for Cloud Canal’s site. In Webflow, I created a modal and an interaction that makes it pop up when the login button is pressed on the page. The modal contains a form with a “data-cc-endpoint” attribute that will send the contents of the form (email and password) to that endpoint. The endpoint id was generated in the Cloud Canal web app.

Now when the user submits the form, the Cloud Canal script that’s included in the page will route it to the endpoint I set up in Bubble. That endpoint checks to make sure the credentials (email and password) are correct and returns one of two responses:

  1. Correct credentials: returns 200 status code and an authorization token, or
  2. Incorrect credentials: returns 400 status code and an error message.

To handle the first case, I use a “data-cc-http-200” attribute to handle the positive response by setting a cookie to the authorization token and redirecting to a different page.

To handle the second case, I use a “data-cc-http-400” attribute to show the error message.


I know many people (myself included) learn better by seeing and doing than just by reading, so stay tuned for a video tutorial series! In the meantime, you can get started by going over the “Overview” section of the documentation.

Please let me know if there’s anything that isn’t clear!

Keep up the good work! Having a solid understanding of the fundamentals is always important.

I’m hoping that with some polish and assistance from the Webflow community, Cloud Canal will help you build whatever it is you’re trying to make without writing any code at all!

1 Like

CloudCanal sounds amazing! I am very much looking forward to the video series.

So far I’ve been working with google firebase but I can’t wait to try out your product in combination with Bubble.

Let us know when your video series is up!

1 Like