2 posts tagged with "Webflow"

Hey there! I've been using Webflow for about 5 years, and it's the best product to develop pixel-perfect websites. But, there's this little issue that's been bugging me. Webflow has some limitations when it comes to hosting and managing websites. One of the biggest limitations for me has been not being able to add files to the main folder of the website.

I know what you're thinking. Why would I need to add files to the main folder? Well, many services require you to add a file to the main folder of your website to prove that you're the owner. For example, Apple wants you to add their certificate to the main folder to allow Apple Pay.

Building upon Finsweet's reverse proxy​

Now, let me introduce you to Finsweet's reverse proxy. A few years back, I stumbled upon a video from Finsweet that showed how to build a reverse proxy for Webflow. It was so simple yet powerful. I used it for a while and it was pretty sweet. I could host multiple Webflow sites in subfolders, which was cool. But I wanted more control over the proxy. So, I decided to take it to the next level and build upon Finsweet's reverse proxy.

I basically forked Finsweet's reverse proxy and started building my own version. My goals were to host multiple Webflow sites in subfolders, add files to the main folder of the website, and host documentation for mry projects in subfolders.

First challenge - Hosting files in the root directory​

The first challenge was to make it possible to host files in the main folder. I wanted to be able to do something like this https://thind.dev/demo.js and fetch a file.

After some digging, I found a solution using Cloudflare workers and Cloudflare R2 buckets. Using R2 we can serve files through Cloudflare's robust CDN. This ensures that users in all parts of the world can access a copy of the files.

So, with this setup, I could create files and upload them to this R2 bucket, and then access them through Cloudflare workers. Problem solved!

Second challenge - Hosting documentation in a subfolder​

Now, let's tackle the second challenge, hosting documentation in a subfolder. I wanted to have documentation for my projects in subfolders. Something like this: https://thind.dev/docs.

Here's the thing, I really hate 😑 the docs.[maindomain].com subdomain. I wanted to have the documentation on the same domain.

I tried using Gitbooks, Mintlify, and other services, but they all forced me to use a subdomain. I tried reaching out to their support teams, but they told me it wasn't possible or that I'd have to pay a hefty sum to host the docs in a subfolder.

I wasn't giving up that easily. I went on a quest to find an open-source solution, and that's how I discovered Docusaurus. It's a fantastic tool for creating documentation. I hosted the documentation on Netlify and used my reverse proxy to access it.

And voila! The blog you're reading on is built with Docusaurus and proxied through my reverse proxy.

Developer Experience​

But that wasn't all. I wanted to make it easier for myself to add new sites to the proxy. The process of adding new sites was a bit tedious. I had to add the subdomains to a file called wrangler.toml, and then create routes for the worker. Sometimes, there were typos, which caused the worker to malfunction.

So, I decided to build a command-line tool (CLI) called Thind CLI. This CLI automates the process of adding new sites to the proxy. I can simply run a command, and it takes care of updating the wrangler.toml file, creating routes for the worker, and performing other necessary tasks.

I've made Thind CLI available to everyone on npm. You can install it using the command:

npm i -g thind

Once installed, you can use Thind CLI to set up the proxy in seconds. It'll ask you a few questions to configure the settings. Then, you can run the command thind proxy --build and the CLI will create routes for your main domain and all the subdomains, and save the updates to the wrangler.toml file.

I've also added commands to help with uploading files to the R2 bucket and deploying the proxy with a single command.

I encourage you to give it a try and let me know what you think.

Conclusion​

I've been using my reverse proxy for a while now, and it's been a game-changer. I can host multiple Webflow sites in subfolders, host documentation in subfolders, and add files to the main folder of the website. It's made my life so much easier.

Resources​

• Thind CLI
• Reverse Proxy
• Github Repo - Reverse Proxy
• Docusaurus for Webflow

In the world of web development, the integration of powerful front-end design tools with robust back-end infrastructure can open up a myriad of possibilities. This blog post explores how you can leverage Webflow for the front end and Cloudflare for the back end to build high-performance web applications. We'll use this demo app as an example to illustrate the capabilities of this approach.

Front End with Webflow​

Webflow is a fantastic platform for designing and building visually stunning, responsive web pages. Traditionally known as a low/no-code platform, Webflow enables designers and developers to create static HTML sites with ease, using intuitive drag-and-drop tools. This means you can focus on crafting beautiful UIs without worrying about writing extensive code. However, the true potential of Webflow is unlocked when you integrate it with a powerful backend. By doing so, you can transform your static designs into fully functional web applications.

Back End with Cloudflare​

Cloudflare offers a suite of tools that can serve as the backbone of your web application, providing speed, security, and scalability. Here’s how you can use Cloudflare’s services to power your backend:

• Cloudflare Workers: These serve as the server-side logic for your application. With Workers, you can build fast, robust, and secure APIs that run at the edge of the network, bringing your server closer to your users and significantly reducing latency.
• Cloudflare D1: This is a SQLite-based database that provides incredibly fast read/write operations at the edge. It ensures your data is stored and accessed efficiently, enhancing the performance of your app.
• Cloudflare R2: For affordable and scalable asset storage, R2 integrates seamlessly with Cloudflare Workers, allowing you to manage your application's assets effortlessly.

Authentication with Lucia Auth​

Security is a crucial aspect of any web application. Using Lucia Auth, you can handle user authentication through email and password. Lucia provides robust JavaScript APIs for creating session tokens, hashing passwords, and more. Additionally, you can implement OAuth or use other authentication providers like Auth0, Clerk, or Memberstack to secure your app.

Monetization with Stripe​

Monetizing your application is straightforward with Stripe. By integrating Stripe subscriptions, you can manage payments seamlessly. With access to server-side logic through Cloudflare Workers, you can build secure webhooks to handle various Stripe cases efficiently.

Thind JS Library​

To facilitate the integration of Webflow, I developed Thind JS, a lightweight JavaScript library. This library enables you to build web applications by combining Webflow for the front end with a Cloudflare-powered backend. This library makes it easy for you to custom attributes to select elements in Webflow. As custom attributes are the most favored way to add functionality to Webflow elements. Plus, this libary comes with a state management and rendering solution, so that you can build complex web applications with ease.

Key Advantages of This Framework​

• Speed: Utilizing Hono.js for the server, this framework provides fast APIs, thanks to Cloudflare’s edge computing. Your API responses come from a server close to the user, ensuring minimal latency.
• Simplicity: With Webflow, designing your front-end UI is intuitive and straightforward. Cloudflare Workers handle complex server logic, making the overall development process smoother.
• Scalability: Cloudflares infrastructure is built for scalability. Whether you're handling a small project or a large-scale application, Cloudflare can accommodate your needs. We have seen companies like Vercel build whole infrastructure on top of Cloudflare.
• Security: By securing pages/routes from the server, you ensure that only authenticated users can access specific parts of your app. This adds an extra layer of security beyond what front-end frameworks that we are so used to in Webflow can offer.

Getting Started​

To help you get started with this framework, we’ve created a CLI that sets up the project template for you. Simply run:

npx thind@latest dev --init

This command will provide options to choose between a front-end app or a full-stack app. If you select the full-stack option, the CLI will create the starter project and install all necessary dependencies.

I'm also preparing to publish the repository on GitHub, where you can explore the code, provide feedback, and contribute to the project. I'll just add the link here once it's live.

Conclusion​

Integrating Webflow with Cloudflare opens up a world of possibilities for building high-performance web applications. By using Thind JS and Cloudflares suite of tools, you can create applications that are fast, secure, and scalable. I encourage you to explore this framework, experiment with your own projects, and share your experiences with the community.

Stay tuned for more updates, tutorials, and happy coding!

Resources​

• Thind CLI
• Thind JS