Hey everyone,
I’m excited to share this web app demo that I built using Webflow for the front end and Cloudflare for the back end! Check out the demo app here: https://webflow-cloudflare.thind.dev/
I understand that Webflow is primarily a low/no-code platform, but it’s truly amazing what becomes possible when you integrate Webflow with a backend. However, this might not be suitable for beginners in Webflow. I recommend learning the core of Webflow first. If you are already using tools like Slater or Wized to write JavaScript, I would love to see more people fully embracing building in VS Code. There are features like Copilot in VS Code that allow you to use AI to write a lot of code for you, and now you own all the intellectual property. I’m not saying not to use Wized or Slater - I love these tools. It’s much faster to build that way, and that’s where I started. But I assure you, it’s worth investing some time in learning how to deploy your code.
Now, after that, let’s move forward. Last week I shared Thind JS, a JavaScript library designed to build web apps on Webflow. I used this library to build this quick To-Do app. The front end is built in Webflow, similar to what you would do if building with Wized, and then I used JavaScript to build logic, used Cloudflare to build a server, Cloudflare D1 as the database, and Cloudflare R2 for storage.
What Does This Framework Offer?
- Front End with Webflow: In traditional development, developers use frameworks like React, Next.js, or Nuxt to build the UI. However, with this approach, the UI and styling are done in plain HTML and CSS using Webflow.
- Back End with Cloudflare: Leverage Cloudflare’s edge computing capabilities to build a fast and globally deployed back end. The framework utilizes:
- Cloudflare Workers: Serve as the server-side logic and build fast, robust, and secure APIs.
- Cloudflare D1: A SQLite-based database that offers scalable and incredibly fast read/write operations at the edge.
- Cloudflare R2: For affordable asset storage, seamlessly integrated with Workers.
- Authentication with Lucia Auth: Handle user authentication using email and password with the Lucia Auth library. OAuth can also be implemented. Lucia provides robust JavaScript APIs to secure our app, create session tokens, hash passwords, and more. You can also use an Auth provider like Auth0, Clerk, or Memberstack (as many apps are built using Membertsack auth)
- Monetization with Stripe: This app uses Stripe for monetization. With access to server-side logic, we can build secure webhooks to handle various Stripe cases using a single endpoint.
Why Use This Framework?
- Speed: I built the server using Hono.js, which provides very fast APIs. Because of Cloudflare’s edge computing, also called serverless, the API is fast as the response comes from a server close to the user.
- Simplicity: Design your front-end UI in Webflow with ease and handle complex server logic with Cloudflare Workers.
- Scalability: Although not personally tested, we know Cloudflare is highly scalable. Companies like Vercel build their edge solutions on top of Cloudflare.
- Security: Build secure pages that can only be accessed after authentication. Cloudflare allows us to secure pages/routes from the server. If a user is not authenticated, the server simply redirects the user, preventing access without logging in.
Try This Template Project Locally
I built a CLI for fun😅, but it will help you set up this framework/project template. Run this command:
npx thind@latest dev --init
This will provide you with options to choose between a front-end app or a full-stack app. If you choose full stack, the CLI will create this starter project in the folder name you select and will also install dependencies.
I’m finalizing a few things and will publish the repo on GitHub soon. I would love to hear your feedback and see what you build with this framework.
Again, this is one way of building on Webflow. If you use something different, share it in the comments and let’s make Webflow development more open!
Happy coding :)