PocketBase / SvelteKit Starter App

sequenceDiagram title PocketBase SvelteKit Starter
   participant br as Browser
   Note over br: JAMstack client

   participant pb as PocketBase
   Note over pb: BaaS server

   participant sk as SvelteKit
   Note over sk: adapter-static

   sk->>pb: compiled SK app
   pb->>br: serve SK app
   br->>pb: API calls

Use this project as a starting point for your own customized PocketBase backend with SvelteKit frontend. This is a simple yet high-performance frontend+backend combination, since frontend is static and backend is a single compiled Golang binary (JAMstack baby!).

• SK (SvelteKit) frontend is fully static, client-side only, so that here is no need for Bun/NodeJS at runtime. It is generated using adapter-static and ssr is OFF.
• PB (PocketBase) provides complete (and fast) backend including:
  • databse (SQLite)
  • CRUD API for database
  • realtime subscriptions for LIVE data (server push to browser)
  • Authentication and Authorization (email + social login/oauth2)
  • blob/file storage (local filesystem or S3)
  • Extend with hooks and API endpoints in ...
    • JavaScript for easy development. See the example main.pb.ts.
    • OR Golang for full performance See main.go
• PocketBase can be downloaded as binary, and yet be extended with JavaScript. But if you want to extend it with custom Golang code then code is included to compile it locally with extensions such as custom endpoints (e.g. /api/hello) and database event hooks (e.g. executing Go handler functions when a database row is created)
• A full live development setup is included
  • Hot Module Reloading (HMR) of your frontend app when you edit Svelte code (including proxying requests to the PocketBase backend via vite)
  • Hot reloading (restarting) of the PocketBase server using modd when you edit Go code
  • Hot reloading (restarting) of the PocketBase server when JS code is changed in ./pb/pb_hooks

To understand the backend, see ./pb/README.md ("pb" == PocketBase) To understand the frontend, see ./sk/README.md ("sk" == SvelteKit)

Read those README files before proceeding.

Setup

Follow these steps CAREFULLY, or else it won't work. Also read the README files referred above before proceeding.

Git Clone

git clone <url-of-this-repo> pbsk
cd pbsk

With Docker

This method is strongly recommended method for setting up this application in most use cases, especially when customizing with Go code.

Make sure your Docker daemon is running then complete the following steps:

1. Copy.env.example to .env and then edit it to match your environment.
2. Also, if you wish, copy docker-compose.override.yml.example to docker-compose.override.yml and edit it to your taste before proceeding.
3. And then just run docker compose up -d.
4. Visit http://localhost:5173 to see the frontend dev server running.
5. Visit http://localhost:5173/\_ to see the backend server and setup the first admin user.
6. Both sides are working if you navigate to the http://localhost:5173/hello page on the development server and there is an API response that says "Hello World!"

Without Docker

We strongly recommend using Docker for the best experience, but you can also run the backend and frontend separately without Docker.

1. In pb folder:

• Setup the backend server by running go mod tidy
• Run go run main.go serve --dev to run the backend at http://localhost:8090.
• Visit http://localhost:8090/_ to create your first admin user.

2. In sk folder:

• Setup the frontend server by running bun install
• Run the frontend dev server using bun run dev
• Visit http://localhost:5173 to see the frontend running.

Standard pocketbase binary downloaded from GitHub

This method is a good alternative for simple use cases that don't use either Docker or Go, and instead uses JavaScript-exclusive customizations.

1. Download the latest version of PocketBase.
   • The versions support Darwin, Linux, and Windows. Make sure that you download the correct version that supports itself within the OS that you are using.
2. Extract the pocketbase.exe from the .zip file you downloaded into the /pb folder within your project.
3. Set up the backend
   • Open a new terminal, navigate to the /sk directory and run the command npm run backend
     • For Windows: You will have to edit the "backend" script in the ./sk/package.json file to cd .. && cd pb && pocketbase serve --publicDir=../sk/build
     • For Mac: Please contribute
4. Set up the frontend
   • Open a new terminal, navigate to the /sk directory and run the following
     • First install dependencies using npx pnpm install
     • Then, npm run dev
5. Extend JavaScript by checking out this documentation here..

Custom pocketbase binary compiled with Golang Tools

This method works if you have Go Tools installed and want to set up the machine directly on your specific OS and you don't want to use Docker.

1. Verify that the Go compiler is installed on your machine by opening a terminal and running go version. If there is an error, set up the go compiler in acccordance with the type of OS you are using.
2. Make sure you go.mod file is ready to be built by navigating to the /pb directory and running go mod tidy in the terminal, especially if the file is throwing errors.
3. In the same terminal, run go build. This may take a moment
   • If you want to use modd for live devlopment, after building, install the latest version by running go install github.com/cortesi/modd/cmd/modd@latest, test the installation by running modd. If successful, data migration should occur and a backend development server should be running. You can learn more by reading about it in the README located in the /pb directory.
4. Open a new terminal, and run cd sk && npm run develop. When you open the localhost page in your browser, the “Hello” page should have an “Hello World” message coming from the API response

Developing

Visit http://localhost:5173 (sk) or http://localhost:8090 (pb)

If you are running modd, making changes in the Svelte code (frontend) or Go code (backend) will show results (almost) immediately.

This setup turns off automatic generation of database migration files by setting --automigrate=false. You can still generate migration files manually by running pocketbase migrate create <name> or pocketbase migrate collections to create migration files for your collections.

Usage

To use the app as a user / tester ...

• visit the frontend URL (e.g. http://localhost:5173)
• Navigate around. The Home page is not very interesting.
• The hello page shows and example of frontend calling a custom backend API implemented in Go.
• The posts page shows all existing posts. If that page is empty, then you might want to create some posts. You must be logged in to be able to create posts.
• Into the Login form, you can enter an existing username/password, or check the register checkbox to create a new account (it registers the user and log in immediately).

The above are just some sample features. Now go ahead and implement all kinds of new features.

• Create new collections.
• Create new pages that manipulate the above collections.

Building

See the build process details in the README files for backend and frontend.

Configurable Hooks

Please read about the "hooks" system in ./pb/README.md It is a very easy and powerful way to extend your application with minimal configuration and perhaps no code.

Feedback

Please provide feedback by opening an issue or starting a discussion.