How to Build a Web App in Webflow

Community resources Show & Tell
1

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!

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

19 Likes
2

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:

3

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

1 Like
4

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!

3 Likes
5

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
6

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
7

Hey everyone!

I’ve just launched the documentation to help you get acquainted with the framework. The videos will be coming out on an ongoing basis, but there’s enough here to get you started with building web apps in Webflow!

4 Likes
8

I’ve been dreaming for a solution like this. Welcome to the ecosystem !

4 Likes
9

I look forward to seeing what you build, @Patrick.Luzny! My web app called Cropify could really use some back-end power from Bubble or Boundless and Cloud Canal.

Customized search, queries, dynamic data display, and filtering are big features to have.

10

Hi @Patrick.Luzny :wave: I’ve just now read through this thread and was checking out CloudCanal, sounded very interesting!

When checking out the site just now I notice some messaging:

Cloud Canal is currently undergoing a pivot … We hope to come back bigger and better than ever … it will be quite a bit different from what it is today. As a result, all current connectors will cease to function

Wondering if you could provide an update of the products current state? Thanks!

1 Like
11

Hey everyone, thanks so much for your patience!

Cloud Canal is currently undergoing a pivot based on valuable feedback from you all. It was a tough decision to make, but I firmly believe the product will be better off in the long run as a result. All connectors in their current form will cease to function in about a month’s time.

I don’t want to reveal too much yet, but the new version of Cloud Canal will be much more complete than just a way to connect front and back ends :wink: . Please stay tuned; I hope be able to share more info in the coming weeks.

2 Likes
12

Hey everyone!

I have emerged from my cave after months of solitude. I’m so sorry to have kept you all waiting, but there was a lot of building, tearing down, and building all over again.

The amount of excitement and interest Cloud Canal has generated is very humbling. It’s the support from the community that has encouraged me when I needed it most.

Without further ado, I’d like to announce that an early alpha stage of Cloud Canal will be available starting July 13th July 27th.

EDIT: After a lot of hard work, the tool still needs some bug fixing before it’s in a usable state. This is not a decision I’m making lightly, but it unfortunately means I need to postpone the first release until the end of the month.

This new version of Cloud Canal will look a little different from what you’re used to. It’s built around a drag-and-drop interface that you can design your backend in and essentially hook it right into your site (whether you prefer to code or use a site builder like Webflow). Check out this tweet for a GIF of the (rough) prototype:

It's early days, but here's a sneak peek of the prototype we're working on for our relaunch on July 13th. You'll be able to build out an entire backend and hook it up to your site (especially useful if you use a site builder like @webflow). pic.twitter.com/ALh72vATrX

— Cloud Canal (@cloudcanal) June 19, 2020

As the platform matures, it’ll include more and more blocks for various integrations, such as Airtable or Bubble.

If you’d like to keep up-to-date with the latest on development, the Cloud Canal website has been updated with a form where you can provide your email as well as any requests or recommendations – a wishlist, if you will.

Once again, I’d like to thank you all for your support. I hope you can try it out when it launches and continue to provide your priceless feedback!

3 Likes
13

Mind == BLOWN, can’t wait for 13th july, keep up the good work.

3 Likes
14

Awesome ! Great UI choice, a node editor makes sense for designers. Can’t wait for new superpowers.

1 Like
15

Hi Patrick, I’m excited to see it when you launch.

The ability to add logic to HTML elements would be great, similar to Adalo, but with more control over the HTML and CSS. Web apps revolve around forms which must smoothly move data from the UI to a database such as Airtable.

16

Hey Brian,

I couldn’t agree more. I’m going to leave the HTML and CSS design to the Webflow Designer. Cloud Canal will be almost like a visual coding tool during this alpha phase, while I work on building out a library of predefined “blocks”. A lot of those blocks will revolve around integrating third-party apps like Airtable, and how those integrations interact with forms, buttons, etc. on your web pages.

That explanation may not be crystal clear at this point, but stay tuned for the alpha release on Monday July 27th to see exactly what I mean!

1 Like
17

If you need help with implementation strategy, let me know. I am happy to share my thoughts. Boundless and Adalo are two good tools that may be similar, but there are many ways to build this type of tool. I like Adalo for its simplicity but it still has work to do, especially with regard to accepting HTML and CSS from Webflow.

Robust options for forms, lists, and filtering by logged in user are some key features for any app maker.

DronaHQ, Amazon Honeycode, Google Sheets’ add-on called Glide, and others are rapidly entering the space but luckily for you the large companies are missing the mark so far. Not great for me as a low-code app builder, but things seems to be progressing quickly.

I have an idea in my head of what a next-level app builder would look like, but I’m not a hardcore programmer with your skills. My skillset is a little different.

Happy to help however I can, also on the Webflow side, @Vlad @FrankAtWebflow @sabanna @gaby_izarra.

2 Likes
18

Can’t wait for July 27 to see what you create!

2 Likes
19

@WebflowCommunityTeam
@Patrick.Luzny

Testing out the alpha now. This could be promising once it gets to a release.

1 Like
20

@bgschust @AlexManyeki @WebflowCommunityTeam
Thanks, I appreciate it!

The early access is live now. The low-code feature (i.e. the Flow Library) is still under development, but I wanted to get users in early to start playing around with the tool and get a feel for the direction of the platform.

The general idea though is that the Cloud Canal caters to a community with a wide spectrum of programming skills, from no-coders to gurus. You can get very granular with building out flows that give you a lot of control over the code the tool generates, but you can also make use of the upcoming Flow Library which will have prebuilt flows (integrations) with all sorts of 3rd party platforms and doesn’t require any programming knowledge.

Then you can drop a single line of code into your Webflow project and everything should work automatically.

There’s still a lot of work to do, but I hope you can see the diamond-in-the-rough!

4 Likes