Starter Template for SvelteKit on Cloudflare Pages

Use this template / starter kit to quickly deploy a UI or API on Cloudflare Pages.

Demo - Cloudflare worker

Features

• SvelteKit for UI & API endpoints
• Svelte Cloudflare adapter for deploying to Cloudflare Pages
• Tailwind + Flowbite + PostCSS for UI elements
• Flowbite Svelte Icons and Svelte Heros v2 for icons
• Typescript for code
• ESLint + Prettier for code formatting
• Playwright + VITest for testing
• Auto deploy when code is pushed to github
• Cloudflare ENV for configuration settings
• Cloudflare KV & DurableObjects for storing data

Flowbite API is subject to change. Best practice is to update the flowbite packages and refer to documentation when creating a new project.

TODO

• Add OAuth API endpoints to make template useful as a GHL app

Getting Started

Clone this repo as a template or recreate from scratch.

Cloning Options:

Choose one of these methods:

• Click on "Use this template" button in github
• gh repo create <new-repo-name> --template=getmuxxi/template-cloudflare-sveltekit
• Clone this repo

Setup Steps:

1. Clone new repo to local disk git clone [email protected]:<new-repo>
2. Create a new Pages project in Cloudflare
3. Setup to auto deploy from Github
4. Edit the code
5. git push to deploy

# after cloning repo
npm install

# create .svelte-kit dir with tsconfig.json
npm run check

Developing

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Building

To create a production version of your app:

npm run build

You can preview the production build with npm run preview.

Deploying

git push to github

Cloudflare Pages will auto build and deploy when configured properly.

Documentation

Cloudflare

• Deploying Svelte on Cloudflare Pages

Tailwind & Flowbite

• Flowbite Svelte Docs

• Flowbite Svelte blocks

• Flowbite Svelte Icons

• Svelte Heros Icons v2

• Flowbite SvelteKit Responsive Sidebar Layout

• Adding Tailwind and DaisyUI

// Example accessing data stored in Cloudflare
// Needs to be configured in app.d.ts first
const counter = platform.env.COUNTER.idFromName("A");

Recreating from Scratch

Follow the steps below to recreate this template from scratch.

Step 1: Add npm packages

# Install sveltekit
npm create svelte@latest NEW-APP-NAME
# Select:
# - Sveltekit demo app
# - Typscript
# - ESlint + Prettier + Playwright + VITest

# Install the cloudflare pages adapter
npm install --save-dev @sveltejs/adapter-cloudflare

# Install tailwind and flowbite
npm install -D tailwindcss postcss autoprefixer @tailwindcss/typography
npm install -D flowbite-svelte flowbite-svelte-icons svelte-heros-v2

# Optionally install mdsvex for markdown support
npm install -D mdsvex

Step 2: Configure

1. Configure svelte.config.js
2. Add support for Cloudflare KV or DurableObjects in app.d.ts
3. Initialize tailwind config (see below)

Configuring tailwind

1. npx tailwindcss init tailwind.config.cjs -p
2. Configure tailwind.config.cjs
3. Create src/app.css with tailwind imports

Step 3: Copy Layouts

1. Copy src/app.html to enable dark mode class
2. Copy src/+layout.svelte to setup a basic flowbite page layout