Cloudflare Developer Challenge: Adding Rust to SvelteKit
Tags: svelte, serverless, javascript, rust
Published: 2021-11-10 15:18:57

---
title: "Cloudflare Developer Challenge: Adding Rust to SvelteKit"
published: "true"
description: "Cloudflare Developer Challenge: using SvelteKit, Rust and my other favourites like vanilla-extract and workers, to create an API as a service."
tags: "svelte, serverless, javascript, rust"
canonical_url: "https://rodneylab.com/cloudflare-developer-challenge/"
cover_image: "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6kxeq05b7bd1tpk9ul9k.png"
---

## ✨ Cloudflare Developer Challenge

The Cloudflare Developer Challenge was launched in the summer.  Basically you had to build an application which uses two services from Cloudflare's developer platform.  I&nbsp;built out <a aria-label="Open the Narcissus demo si/teylab.com/">Narcissus as a proof of concept backendless blog</a> stitching together some of my favourite tools, languages and services.  Spoiler alert: if you aren't new here, it won't surprise you to learn that I built it using SvelteKit and Rust! In this post I'll talk a little about the challenge and my entry.  I hope you find it interesting as well as useful.

![Tweet from @Cloudflare mentioning that submissions for the challenge close on 1 November 2021 and including the #DeveloperChallenge (developer challenge) hashtag](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3aqsw0cs7xmtdj5y1wo1.png)

## 😕 Why Choose this Project?

I was quite excited when I saw the tweet announcing the Cloudflare Developer Challenge.  I had been using Cloudflare DNS and <a aria-label="Open article on using Cloudflare Warp with Open B S D" href="https://rodneylab.com/how-to-setup-cloudflare-warp-openbsd/">Warp</a> services for a while and had just started trying out Cloudflare Pages and Workers.  Because I love trying out new products and services I wanted to work with novel and interesting tools in this project.

### Chosen Toolkit

Here's what I decided to go with:

- **vanilla-extract**: I simply love this tool for working with CSS.  <a aria-label="Read aricle on writing C S S in Svelte" href="https://rodneylab.com/using-vanilla-extract-sveltekit/">vanilla-extract let's you write you CSS in TypeScript</a>, making it easier to keep your styling consistent.  On top it makes theming easy, works on most modern platforms and separates styles and content into their own files.  These last two features made it ideal for this project as I wanted to build a demo site in Astro and other modern frameworks.

- **Rust**: Cloudflare had recently <a aria-label="Read more on Rust Cloud flare workers" href="https://blog.cloudflare.com/workers-rust-sdk/">added first-class support for Rust</a> to Cloudflare Workers.  Cloudflare Workers are something like Lambda functions but <a aria-label="Read about using Rust with Cloud flare workers"  href="https://rodneylab.com/using-rust-cloudflare-workers/">compile to Web Assembly (WASM) and are optimised to run fast</a>!

- **SvelteKit**: SvelteKit offers the <a aria-label="Open posts on Svelte Kit" href="https://rodneylab.com/tags/sveltekit/">best developer experience</a> currently.  Combining SvelteKit's modern Vite tooling and Svelte's ability to compile down to pure JavaScript, I would be able to build a fast site and do it quickly.  I got quick feedback with both development code updates reflected instantly in the browser and genuinely, blazingly fast cloud builds, letting me debug issues at warp speed.

- **Supabase**: you must have heard about the new open source alternative to Firebase.  Using Supabase with PostgreSQL **Row Level Security** is ideal for this project.  Row Level security makes it easy to set access rules on the database itself rather than within your API code.  As an example you can build rules into your database only allowing a user to create new messages from their own account in a messaging app (as an example use case).  Then on top you can give only the selected recipients and sender read access to the underlying message data. This is a fantastic security addition as writing access rules within your own API can quickly become complex and error-prone as new features are merged.

### Up Next

To sum up I tied all these tools and services together to create the API as a service.  Let's see what an API as a service is next and how it can be used to add fantastic features for increasing user engagement in a hassle-free way.

## 🌟 What is an API as a Service?

An Application Programming Interface (API) let's you access a service from your own code.  You might already be familiar with Serverless environments where there is a server (somewhere) but the point is you do not have to maintain it or scale resources yourself when traffic ramps up &mdash; your service provider takes care of that for you.

![Screenshot of Narcissus demo site with blog post meta including post views, likes and comments as well as a comment box](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gtqgxasm9sa4u0h0dq8y.png)

In this project I built a proof of concept for a **backendless blog** site.  Here you neither have to code up all the logic needed to handle contact form messages, nor pass them on to a delivery service to check them for spam and **filter out bots**.  On top you can **forget about the database** too. Instead you just write REST API calls to a single service which runs **Rust Cloudflare Workers**.  That service does a lot of the heavy lifting for you.  It's different to adding a comment service to your blog as you implement the front end yourself.  You can code it up efficiently and style it exactly how you or your client want it.  On top you pick and choose the features you want: likes and views, comments or contact form messages.

## 🖤 What is Narcissus?

Narcissus is a proof of concept API as a service for websites.  You can build a static or server-side rendered site and integrate access to your data just by calling a REST endpoint.  For a static site you might opt to pull in data at build time so that even with JavaScript disabled visitors can see some available comments or likes.  With JavaScript enabled, a quick call to the Rust Cloudflare Worker gets the latest data from the **Supabase database** onto your visitor's phone or computer screen.  

![Screenshot of Narcissus demo site with blog post, light theme, meta including post views, likes and comments at the top of a blog post article](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/40p9z5bc47ymoagdxoxi.png)

These features are provided by REST endpoints which the Rust Cloudflare Worker listens on:

- **Message form** &mdash; lets website visitors send a message to admins. To avoid abuse by bots <a aria-label="Learn more about h Captcha" href="https://www.hcaptcha.com/">hCaptcha runs a challenge</a> in browser. On the Cloudflare worker side, there is also a check with the <a aria-label="Learn more about Akismet" href="https://akismet.com/">Akismet spam detection service</a>. The worker sends you or admins the details of the message using a **Telegram bot**.

- **View count** &mdash; page views are counted automatically and displayed, letting visitors know what the most popular content&nbsp;is.

- **Likes** &mdash; the <a aria-label="Open the narcissus repo on Git Hub" href="https://github.com/rodneylab/narcissus">Cloudflare worker</a> records new blog post likes to the <a aria-label="Learn more about Supa base" href="https://supabase.io/">Supabase</a> database.

- **Comments** &mdash; comments left by users on blog posts, like contact form messages are checked for spam and bots.

- **Developer friendly** &mdash; you style the pages and implement any or all of the features the way you want. Just fetch data from the **API using REST** calls. Your site becomes **backendless** and you save on having to configure and connect multiple services.  Add to your site today even though you plan to **move to a new framework** soon.

### Possible Future Features

- Newsletter subscription handling, connecting to your preferred service.

- GraphQL API.

- Alternative <a aria-label="Learn more about Astro" href="https://astro.build/">demo site built with Astro</a> and <a aria-label="Learn more about Remix" href="https://remix.run/">Remix</a>.


Take a look at the current <a aria-label="Open the Narcissus demo site" href="https://narcissus-blog.rodneylab.com/">live demo site running on Cloudflare Pages</a>.  Also see the <a aria-label="Open the narcissus repo" href="https://github.com/rodneylab/narcissus">monorepo which is home to both the Cloudflare Worker code and the demo</a> client sites.

## 😢 What are your Website Pain Points?

![Screenshot of Narcissus demo site blog post summary showing post title, meta (views, likes and comment) as well as a summary excerpt](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9f45274k3uknrb4uhhu0.png)

I mentioned a few possible new features above but even better would be to hear what your current pain points are.  What challenges do you face when you are creating and maintaining sites for yourself and clients?  If you could change one thing, what would it be? I would love you to leave a comment below or get in touch with me via <a aria-label="Message me via Twitter" href="https://twitter.com/messages/compose?recipient_id=1323579817258831875">@askRodney on Twitter</a> or <a aria-label="Contact Rodney Lab via Telegram" href="https://t.me/askRodney">askRodney on Telegram</a>.


🏁 Cloudflare Developer Challenge: Summary

<Question
  position={1}
	name="What is Narcissus?"
	answer="Narcissus is a proof of concept backend as a service app which lets you create a blog site quicker by managing important blog features like comment and message forms as well as post views and likes."
/>

#h2 🙏🏽 Cloudflare Developer Challenge: Feedback

Have you found the post useful? Would you prefer to see posts on another topic instead? Get in touch with ideas for new posts. Also if you like my writing style, get in touch if I can write some posts for your company site on a consultancy basis. Read on to find ways to get in touch, further below. If you want to support posts similar to this one and can spare a few dollars, euros or pounds, please <a aria-label="Support Rodney Lab via Buy me a Coffee" href="https://rodneylab.com/giving/">consider supporting me through Buy me a Coffee</a>.

Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via <a aria-label="reach out on Twitter" href="https://twitter.com/messages/compose?recipient_id=1323579817258831875">@askRodney</a> on Twitter and also <a aria-label="Contact Rodney Lab via Telegram" href="https://t.me/askRodney">askRodney on Telegram</a>. Also, see <a aria-label="Get in touch with Rodney Lab" href="https://rodneylab.com/contact">further ways to get in touch with Rodney Lab</a>. I post regularly on <a aria-label="See posts on svelte kit" href="https://rodneylab.com/tags/sveltekit/">SvelteKit</a> as well as other topics. Also <a aria-label="Subscribe to the Rodney Lab newsletter" href="https://rodneylab.com/about/#newsletter">subscribe to the newsletter to keep up-to-date</a> with our latest projects.