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.
Node.js, and Docker Desktop (Docker + Docker Compose). Make sure docker is running before 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"
-
Install dependencies:
npm install
-
Set up environment variables:
cp apps/web/.env.example apps/web/.env.local
-
Start the development server and backend
npm run dev
-
Go to the local Pocketbase admin settings page to create an admin account for the local backend
-
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
-
Create an account on the local web app, and start building
Things to consider for production deployments:
- 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
- Integrate OAuth2 providers
It is straightforward to host Pocketbase on any VPS. This template comes configured for easy deployment of Pocketbase on Fly.io.
-
Install flyctl – the open-source Fly.io CLI
-
Create an account with
fly auth signup
or log in withfly auth login
-
Create a new app
fly apps create --generate-name
-
Add the generated app name to
apps/pocketbase/fly.toml
(line 1) -
Choose the region closest to you (or your users) and add the corresponding region ID as the
primary_region
inapps/pocketbase/fly.toml
(line 2) -
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
-
Deploy the Pocketbase server, and run this command again anytime you want to update the deployment after making changes locally
npm run deploy
-
Go to the production Pocketbase admin settings page at
https://APP_NAME.fly.dev/_
to create an admin account for the production backend -
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.
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 inapps/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.
apps/pocketbase
: Dockerized Pocketbase backendapps/web
: SvelteKit apppackages/eslint-config-custom
:eslint
configurations
This template has some additional tools already setup for you:
- TypeScript for static type checking
- ESLint for code linting
- Prettier for code formatting