SvelteKit, Pocketbase, Turborepo Template

A template for an extensible SvelteKit + Pocketbase + Turborepo codebase.

Comes with...

• TailwindCSS and DaisyUI: Customize the theme and use semantic components class names
• Pre-built account creation, sign in, and reset password flows
• Basic CRUD example
• Deployment configuration for Pocketbase on Fly.io

See the live demo here, deployed directly from the demo branch of this repository.

Note: The SvelteKit app supports TypeScript with no additional configuration.

Sections

• Screenshots
• Requirements
• Getting started
  • Set up the development environment
• Production deployments
  • Deploy the backend
    • Deploy on Fly.io
  • Deploy the web app
• The code
  • Apps and Packages
  • Utilities

Screenshots

Requirements

Node.js, and Docker Desktop (Docker + Docker Compose). Make sure docker is running before getting started.

Getting started

Create a new repository with the "use this template" button on GitHub, or run the following commands:

git clone --depth=1 --branch=main https://github.com/arrowban/sveltekit-pocketbase-turborepo-template.git my-app

cd my-app
rm -rf .git

git init
git add -A
git commit -m "Initial commit"

Set up the development environment

1. Install dependencies:

   npm install
   

2. Set up environment variables:

   cp apps/web/.env.example apps/web/.env.local
   

3. Start the development server and backend

   npm run dev
   

4. Go to the local Pocketbase admin settings page to create an admin account for the local backend

5. Update environment variables in apps/web/.env.local with your admin credentials:

   [email protected]
   POCKETBASE_ADMIN_PASSWORD=your-strong-password
   PUBLIC_POCKETBASE_BASE_URL=http://localhost:8090
   

6. Create an account on the local web app, and start building

Production deployments

Things to consider for production deployments:

1. Add SMTP server settings for sending verification and reset password emails
   • Consider turning on the "Forbid authentication for unverified users" option for the users table
   • Remember to edit the email templates from the Pocketbase admin settings after deploying
2. Integrate OAuth2 providers

Deploy the backend

It is straightforward to host Pocketbase on any VPS. This template comes configured for easy deployment of Pocketbase on Fly.io.

Deploy on Fly.io

1. Install flyctl – the open-source Fly.io CLI

2. Create an account with fly auth signup or log in with fly auth login

3. Create a new app

   fly apps create --generate-name
   

4. Add the generated app name to apps/pocketbase/fly.toml (line 1)

5. Choose the region closest to you (or your users) and add the corresponding region ID as the primary_region in apps/pocketbase/fly.toml (line 2)

6. Create a new volume, using the same region as the one you chose in step 5 (size can easily be extended anytime)

   fly volumes create pb_data --size=1 # Creates a volume with 1GB of storage
   

7. Deploy the Pocketbase server, and run this command again anytime you want to update the deployment after making changes locally

   npm run deploy
   

8. Go to the production Pocketbase admin settings page at https://APP_NAME.fly.dev/_ to create an admin account for the production backend

9. Add production environment variables to a new file apps/web/.env.production with your production admin credentials:

   [email protected]
   POCKETBASE_ADMIN_PASSWORD=your-strong-password
   PUBLIC_POCKETBASE_BASE_URL=https://APP_NAME.fly.dev
   

The pre-configured VM is the cheapest available on Fly.io (shared-cpu-1x with 256MB of memory), scale the backend vertically as your app grows.

Deploy the web app

Many cloud platforms provide generous free tiers for deploying web apps built with popular frameworks like SvelteKit. Cloudflare, Vercel, and Netlify are just a few examples of platforms that integrate directly with GitHub repositories and provide seamless CI/CD.

When setting up your first deployment on any of these platforms, remember to:

• Replace @sveltejs/adapter-auto with the appropriate adapter in apps/web/svelte.config.js
• Specify apps/web as the root of the web app
• Add environment variables from apps/web/.env.production to the deployment

I strongly recommend deploying the web app with Cloudflare pages.

The code

Apps and Packages

• apps/pocketbase: Dockerized Pocketbase backend
• apps/web: SvelteKit app
• packages/eslint-config-custom: eslint configurations

Utilities

This template has some additional tools already setup for you:

• TypeScript for static type checking
• ESLint for code linting
• Prettier for code formatting