Use this app as a starting point for your own customized PocketBase backend with SvelteKit frontend. This is a high-performance frontend+backend combination, since frontend is static and backend is a single compiled Golang binary (JAMstack baby!).
- SvelteKit frontend is fully static, client-side only, so that here is no need
for NodeJS at runtime. It is generated using
adapter-staticandssris OFF. - 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)
- 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
moddwhen you edit Go code - Hot reloading (restarting) of the PocketBase server when JS code is changed in
./pb/pb_hooks
- Hot Module Reloading (HMR) of your frontend app when you edit Svelte code (including proxying requests to the PocketBase backend via
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.
Follow these steps CAREFULLY, or else it won't work. Also read the README files referred above before proceeding.
This method is the most 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:
- Copy
.env.exampleto.envand then edit it to match your environment. Also, if you wish, copydocker-compose.override.ymltodocker-compose.override.ymland edit it to your taste before proceeding. And then just rundocker compose up -d. - Open a new terminal and navigate to the
/skdirectory. Install dependencies by runningnpx pnpm install - In the same terminal, after the dependencies are installed, run the command
npm run dev:backendThis runsgo buildin the/pbdirectory and runsmoddfor live development on a backend server - Open a seperate terminal, navigate to the
/skdirectory, and run the commandnpm run dev. This starts the frontend dev server. - Both sides are working if you navigate to the "Hello" page on the development server and there is an API response that says "Hello World!"
This method is a good alternative for simple use cases that don't use either Docker or Go, and instead uses JavaScript-exclusive customizations.
- 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.
- Extract the
pocketbase.exefrom the.zipfile you downloaded into the/pbfolder within your project. - Set up the backend
- Open a new terminal, navigate to the
/skdirectory and run the commandnpm run backend- For Windows: You will have to edit the
"backend"script in the./sk/package.jsonfile tocd .. && cd pb && pocketbase serve --publicDir=../sk/build - For Mac: Please contribute
- For Windows: You will have to edit the
- Open a new terminal, navigate to the
- Set up the frontend
- Open a new terminal, navigate to the
/skdirectory and run the following- First install dependencies using
npx pnpm install - Then,
npm run dev
- First install dependencies using
- Open a new terminal, navigate to the
- Extend JavaScript by checking out this documentation here..
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.
- 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. - Make sure you
go.modfile is ready to be built by navigating to the/pbdirectory and runninggo mod tidyin the terminal, especially if the file is throwing errors. - In the same terminal, run
go build. This may take a moment- If you want to use
moddfor live devlopment, after building, install the latest version by runninggo install github.com/cortesi/modd/cmd/modd@latest, test the installation by runningmodd. 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/pbdirectory.
- If you want to use
- 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
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.
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
hellopage shows and example of frontend calling a custom backend API implemented in Go. - The
postspage 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
Loginform, you can enter an existing username/password, or check theregistercheckbox 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.
See the build process details in the README files for backend and frontend.
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.
Please provide feedback by opening an issue or starting a discussion.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent