Reverse Proxy For 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.