Matt's Cloudflare Kit

• 

  Example of the toolkit widgets on a live website

Inspiration

The indie web movement emphasizes the charm of the early web, encouraging less technical individuals to create their own websites; but, they should not be excluded from the creativity and power that dynamic content can bring. Users can enjoy the deployment ease of static-site hosting while maintaining the backend routes that power engaging website features.

What it does

Matt's Cloudflare Kit is a collection of Cloudflare Workers, and HTMX widgets that can be easily embedded in a website and extend the otherwise simple functionality of a static site. It currently features three widgets:

• Spotify widget to display your most listened-to tracks of the month
• guestbook for users to "sign" and leave a message
• quote widget to showcase some of your favorite lyrics, adages, and more

With plans for many more widgets like a realtime chalkboard, polls, a "message in a bottle," and much more.

How we built it

The toolkit was built with HTMX to keep the frontend widget as simple as possible and reduce large dependencies, while benefiting from the reactivity of the library. The Cloudflare workers are written in Rust, interacting with other Cloudflare services like D1 SQL databases, KV (Persistent Key-Value Storage), Secrets storage, and Pages.

Challenges we ran into

HTMX APIs can be challenging to debug and design since they are so flexible. Since HTMX combines many reactive-frontend boilerplate steps into one, many distinct errors can appear as a single more generic error, emphasizing the need for great logging to eliminate bugs.

Additionally, Cloudflare workers may sometimes behave differently when run locally compared to remotely due to CORS and loopback address behavior.

Accomplishments that we're proud of

This truly is a passion project of mine, and I am glad I was able to create a set of widgets that encourage less technical individuals to explore the world of web development and curate their own small corner of the internet.

This project also uses the GPL license to encourage free modification, collaboration, and an ensures it remains open-source in the future. I am proud to give back to a community of developers that have created so many of the tools I use daily.

What we learned

I learned a lot about how accessory parts of a project can contribute to its overall success, like good documentation, examples, and setup guides. I familiarized myself with using Rust, as opposed to JS, to write Cloudflare Workers, allowing me to enjoy much of the runtime peace-of-mind that the Rust compiler awards.

I also learned that caffeine gum exists (pretty cool) and can be very effective for hackathons.

What's next for Matt's Cloudflare Kit

I will continue to add many more widgets in the future to expand the breadth of the toolkit, while also improving documentation and configuration for the existing widgets. I hope to engage with the community to explore new widget features and leverage more of Cloudflare's services to maximize efficiency and deployment ease.

Built With

• cloudflare
• d1
• htmx
• kv
• rust
• sass
• workers