How you ask? By hosting the entire site on Cloudflare’s Edge network. It allows me to host a CMS (shoutout to EmDash by Cloudflare). While also being basically immune to DDoS.

EmDash is a full-stack TypeScript CMS built on Astro and Cloudflare. This will be my first post made using the platform.

It works by hosting posts on Cloudflare D1 and images on R2. So it requires an active billing account. It also requires Workers Paid due to the size constraints of Workers Free (free Workers can only be up to 3MB).

So far it’s working great. I can publish posts directly from the admin panel, and it’s all still cached on Edge.

In this post I'm just going to show you something cool I made using cloudflare workers.

import { EmailMessage } from 'cloudflare:email';
import { createMimeMessage } from 'mimetext';

export default {
	async email(message, env, ctx) {
		const content = await new Response(message.raw).text();
		const messages = [
			{ role: 'system', content: 'you are an email responder, reply to the given message' },
			{ role: 'user', content }
		];
		// @ts-expect-error broken bindings
		const { response } = await env.AI.run('@cf/meta/llama-3.2-11b-vision-instruct', { messages });
		const msg = createMimeMessage();
		msg.setHeader('In-Reply-To', message.headers.get('Message-ID') as string);
		msg.setSender({ name: 'Sean Behan', addr: 'contact@seanbehan.ca' });
		msg.setRecipient(message.from);
		msg.setSubject('RE');
		msg.addMessage({
			contentType: 'text/plain',
			data: `${response}\n\nThis was an automated message. If this is urgent, message Sean on Telegram https://t.me/codebam`
		});

		const replyMessage = new EmailMessage('contact@seanbehan.ca', message.from, msg.asRaw());

		await message.reply(replyMessage);
		await message.forward('codebam@riseup.net');
	}
} satisfies ExportedHandler<Env>;

This small amount of code is all it takes to automatically reply to all my emails with llama3.2!

Feel free to copy it and use it yourself. The source code is on GitHub.

Here I'm going to show you the newly updated API that anyone can use to run a Telegram Bot on Cloudflare Workers or any other serverless platform.

Project Setup

First you need to set up a new Cloudflare Workers project using wrangler.

npm create cloudflare@latest

This will prompt you for a project name first. Choose a name for your new project or use the default.

Next you'll be prompted for the type of application you want to deploy. You should choose a "Hello World" Worker.

After that you'll be asked a few more questions, like if you want to use TypeScript, and Git (optional, but recommended). You don't need to deploy just yet.

Adding Your Bot Token

Next you can add the token you get from @BotFather on Telegram as a secret so you don't have to keep it in the code.

npx wrangler secret put TOKEN

Once you've created your project and created your secret you'll want to install the cf-workers-telegram-bot library to start coding.

cd your-new-project
npm i @codebam/cf-workers-telegram-bot

This will give you access to my TelegramBot class for creating a Telegram Bot.

Writing the Bot

To get started you can open src/index.ts in your favorite editor such as vscode or vim. Then you can import like this.

import TelegramBot, { TelegramExecutionContext } from '@codebam/cf-workers-telegram-bot';

Then you can simply write your bot like this.

export default {
  async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
    const bot = new TelegramBot(env.TOKEN);
    await bot.on('start', async function (context: TelegramExecutionContext) {
      switch (context.update_type) {
	case 'message':
	  await context.reply('Hello from Cloudflare workers');
	  break;

	default:
	  break;
      }
    }).handle(request.clone());
    return new Response('ok');
  },
};

Deployment and Webhook

Now you're ready to deploy.

npx wrangler deploy

You can set your webhook by going to the URL you've been given plus your token and ?command=set.

Like this. https://telegram-bot.username.workers.dev/YOURTOKENHERE?command=set Now when you send your bot a message on Telegram it should respond with Hello from Cloudflare workers.

Starter Template

If you've got this far and you don't want to code it all by yourself, you can fork my repository here to get started with a working copy.

In this post I'm going to show you how I made the search bar on the posts page and main page of my website.

Implementing the Search Bar

I used a library called fuse.js for fuzzy searching for titles, here's how it works.

<script lang="ts">
	import { Heading } from 'flowbite-svelte';
	import Post from '$lib/components/Post.svelte';
	import Fuse from 'fuse.js';
	import { afterUpdate } from 'svelte';
	export let posts: { path: string; meta: { title: string; date: string } }[];
	let query = '*';
	let results = posts;
	const options = { keys: ['meta.title'] };
	const fuse = new Fuse(posts, options);
	afterUpdate(() => {
		let results_ = fuse.search(query);
		results = results_.map((result) => ({ path: result.item.path, meta: result.item.meta }));
	});
</script>

<Heading
	tag="h4"
	style="display: inline"
	class="ml-8 my-4 text-secondary dark:text-dark-secondary w-auto">Posts</Heading
>
<input class="text-secondary" bind:value={query} />
<ul>
	{#each results as post}
		<Post {post} />
	{/each}
	{#if results.length === 0}
		{#each posts as post}
			<Post {post} />
		{/each}
	{/if}
</ul>

How it Works

You can see I initialize the query to '*'. All this really does is sets the search field to * instead of being empty. Then in the input element I bind to the value of query so that when the user types in the field the value of query will change.

I do some more initialization of fuse.js to search and then I register afterUpdate(). This allows me to search only when the page changes.

Finally I added some logic to display all the posts if there are no results, like for example when the page loads.

All this together looks like the search bar you see on /posts and /.

Recently I implemented HTTP Basic Auth using a session cookie in SvelteKit on Cloudflare Pages using Cloudflare D1 as a database backend. Here I'll show some code snippets so you can do the same.

Project Setup

First you would want to set up your project according to this.

So you can have a basic project set up.

Database Setup

Next you'll want to add the database to your project. It's easy to create using wrangler. Just remember to link it to your project in your cloudflare dash under settings > functions.

wrangler d1 create your-database-name

Then you can copy it into your `wrangler.toml` so your local dev works with it. To run with support for D1 you can use this oneliner.

npm run build && wrangler pages dev .svelte-kit/cloudflare

My final schema looks like this. Yours might be a bit different, but mine allows for adding songs to a playlist, which was the purpose of that project.

CREATE TABLE IF NOT EXISTS Users (id TEXT PRIMARY KEY, password TEXT);
CREATE TABLE IF NOT EXISTS Playlist (id TEXT PRIMARY KEY, email TEXT, url TEXT, date TEXT);

You'll want to create these tables using wrangler both locally (on your dev server) and remotely.

wrangler d1 execute svelte-auth --local --file=./schema.sql
wrangler d1 execute svelte-auth --file=./schema.sql

Now you can add it to your `app.d.ts` like this.

declare global {
	namespace App {
		interface Platform {
			env?: {
				DB: D1Database;
			};
			context: {
				waitUntil(promise: Promise<any>): void;
			};
			caches: CacheStorage & { default: Cache };
		}
	}
}

export {};

Authentication Implementation

Now you're ready to set up authentication. It's probably easier to just show you how I did it. I imported sha256 which is just a simple function I wrote to call web crypto to get the sha256sum of a string.

Here is my code.

I added form actions. These allow you to quickly write code that will work with HTML <form>'s.

import { redirect } from '@sveltejs/kit';
import sha256 from '$lib/sha256';

export const actions = {
	register: async (event) => {
		const data = await event.request.formData();
		const email = data.get('email');
		const password = await sha256(data.get('password')?.toString() ?? '');
		const { success } = await event.platform?.env?.DB.prepare('INSERT INTO Users VALUES (?, ?)')
			.bind(email, password)
			.all();
		if (success) {
			event.cookies.set('session', JSON.stringify({ email, password }));
			throw redirect(303, '/');
		}
	},
	login: async (event) => {
		const data = await event.request.formData();
		const email = data.get('email');
		const password = await sha256(data.get('password')?.toString() ?? '');
		const results = await event.platform?.env?.DB.prepare('SELECT password FROM Users WHERE id=?')
			.bind(email)
			.all();
		if (results.results[0].password === password) {
			event.cookies.set('session', JSON.stringify({ email, password }));
			throw redirect(303, '/');
		}
	}
};

Checking Authentication Status

Now this is enough to save a cookie with the user auth, but to re-auth on a page we need to check if their cookie is valid. So how I do this is I wrote another function called `tryLogin.ts`.

import type { D1Database } from '@cloudflare/workers-types';

const tryLogin = async (session_cookie: string | undefined, DB: D1Database) => {
	if (session_cookie) {
		const { email, password } = JSON.parse(session_cookie);
		const results = await DB.prepare('SELECT password FROM Users WHERE id=?').bind(email).all();
		if (results.results[0].password === password) {
			return true;
		}
	}
	return false;
};

export default tryLogin;

Now I can call this inside `+page.server.ts`.

import tryLogin from '$lib/tryLogin';
import getCurrentSong from '$lib/getCurrentSong';

export const load = async (event) => ({
	auth: await tryLogin(event.cookies.get('session'), event.platform?.env?.DB),
	song: await getCurrentSong(event.platform?.env?.DB)
});

Using it inside the `+page.svelte` is as simple as this one line.

export let data: {auth: boolean, song: {id: string, url: string}};

Playlist Management

Now I wrote more form actions for adding and removing songs from the playlist here.

import { redirect } from '@sveltejs/kit';
import tryLogin from '$lib/tryLogin';

export const actions = {
	add: async (event) => {
		if (await tryLogin(event.cookies.get('session'), event.platform?.env?.DB)) {
			const session = JSON.parse(event.cookies.get('session'));
			const email = session.email;
			const formdata = await event.request.formData();
			const v = new URL(formdata.get('url')).searchParams.get('v');
			await event.platform?.env?.DB.prepare('INSERT INTO Playlist VALUES (?, ?, ?, ?)')
				.bind(crypto.randomUUID(), email, v, Math.floor(new Date().getTime()))
				.all();
		}
		throw redirect(303, '/');
	},
	remove: async (event) => {
		if (await tryLogin(event.cookies.get('session'), event.platform?.env?.DB)) {
			const formdata = await event.request.formData();
			const id = formdata.get('id');
			await event.platform?.env?.DB.prepare('DELETE FROM Playlist WHERE id=?').bind(id).all();
		}
		throw redirect(303, '/');
	}
};

User Interface

Now this allows us to add songs, we just need the interface for it. So I wrote the main page to allow logged in users to submit songs.

<script lang="ts">
	import { enhance } from '$app/forms';
	import YouTube from '$lib/svelte-youtube.svelte';
	export let data: { auth: boolean; song: { id: string; url: string } };
</script>

{#if !data.auth}
	<p>Visit <a href="https://seanbehan.ca/login">login</a></p>
{/if}

<YouTube
	on:end={() => document.getElementById('remove_song')?.click()}
	videoId={data.song.url}
	options={{ playerVars: { autoplay: 1 } }}
/>

<form style="display: none;" method="POST" action="/playlist?/remove" use:enhance>
	<input name="id" value={data.song.id} />
	<button id="remove_song">remove</button>
</form>

{#if data.auth}
	<form method="POST" action="/playlist?/add" use:enhance>
		<label
			>Submit a song
			<input name="url" type="url" placeholder="paste a youtube link" pattern=".*v=.*" />
		</label>
		<button>Submit</button>
	</form>
	<p><a href="https://seanbehan.ca/logout">Log out</a></p>
{/if}

Conclusion

If you have any problems or you want to see the entire repo, the code is here.

You might know I've made a Chat Bot cf-workers-telegram-bot.

Recently I added AI to it using Cloudflare AI. Here I'm going to show you how and how you too can make your own chatbot using Cloudflare AI.

Cloudflare Workers AI Setup

First you'll want to add the AI section to your wrangler.toml.

\[ai\]
binding = "AI"

Using the AI Model

Then you can simply import

import { Ai } from '@cloudflare/ai';

And you can use it like this

const ai = new Ai(env.AI);
prompt = 'hello world';
const result = await ai.run('@cf/meta/llama-2-7b-chat-int8', {
	prompt
});

Other Models and Tips

That's it!

There are other models you can use as well on Cloudflare AI so you should check them out here for other cool things you can do https://developers.cloudflare.com/workers-ai/models/ I'm hoping for a 70B model soon :) If you want to use this to make a chat bot make sure when you restore the prompt you wrap user input in [INST] [/INST] tags so llama2 knows what was user input and what it said.

If you want to try out my Chat Bot it's on Telegram.