a full-featured starter template for PocketBase+SvelteKit

[jkdoshi]

I just wrote a starter template project showing the best features of - https://github.com/spinspire/pocketbase-sveltekit-starter

It works well for me. But it's very new. So please give it a try and provide feedback in issues and discussions for the project.

In addition to 3 detailed README files (project+frontend+backend), it has the following features:

• A fully static frontend with SvelteKit and adapter-static
• Demo of customized Go binary using PocketBase "as a framework"
  • Includes custom API endpoint /api/hello in Go
  • And event hooks / handlers in Go - notifications on CRUD events on a collection
  • An air.toml configuration
• Demo of containerization using Dockerfile (a small 20MB Docker image)
• Serving your frontend also using PocketBase (in addition to the backend)
• Login from SvelteKit into PocketBase Auth
• SvelteKit frontend CRUD app (a collection of "posts") including File Uploads and record level security
• "config-driven hooks" that support both command execution and webhook posts tied to specific events (insert/update/delete) on specific tables
• coming soon: hosting of static assets on CloudFlare pages / Firebase hosting while using self-hosted pocketbase backend.

@ganigeorgiev I'd be very happy if you include it in an "examples" folder for your project. And I'd happily add more demo features that you might suggest. I might even be doing things incorrectly, so any feedback would be much appreciated.

[ganigeorgiev]

The examples folder for now is reserved for prebuilt binary configurations.
But I'll consider linking community example projects in a special section in the new documentation.

[benallfree]

Just to follow up on @ganigeorgiev's comment, I added this repo to https://github.com/benallfree/awesome-pocketbase. The awesome-pocketbase repo might be another place where sample projects and dockerfiles could live if that seems like the right place.

[jkdoshi]

Thank you @ganigeorgiev for the response. And thank you @benallfree for including my project in your awesome list.

Actually, I just pushed a config-driven hooks system to my project repo. Which means you can now enter a record into a "hooks" table indicating which event (insert/update/delete) on which table should trigger a command or a webhook post.

Example: run a script when a record is updated in the "posts" table

Example: post to a webhook when a record is updated in the "posts" table

I learned a lot about handling pipes and external command execution in Go routines in the process. Hopefully, people find it useful.

[jkdoshi]

Hi all,

I have posted a major update to this project: https://github.com/spinspire/pocketbase-sveltekit-starter

• Upgrade backend to the recent version of pocketbase framework: 0.10.3
• Upgrade frontend to SvelteKit 1.0.0
• Realtime data updates (subscriptions) how-to as a Svelte store
• Automated UI tests (headless browser) with Playwright
• Integrate pocketbase-typegen to generate TypeScript definitions for your collection records. Helps with type safety and IDE autocompletion.
• Migrated from Go migrations to JavaScript (goja) auto-migrations
• Improvements to the "hook" system - you can now "expand" relation fields, and "disable" a hook without deleting it.
• Fully Dockerized - PROD image, DEV setup - backend + frontend
• PB static file serving with fallback to index.html in SPA mode (hard reload doesn't break SPA routing)
• Improved README documentation.

Please check it out and suggest improvements / new features you'd like to see in the project discussions.

[dschissler]

Hey so I was wondering how Sveltkit static could integrate into a backend also. I mean, is there any kind of way to fill it up with data even if it's just a title? Can it be filled with environment or config variables while still being static?

[jkdoshi]

@dschissler it is already supported! 😃 Meaning, the project is setup to SSG/prerender HTML pages into the build folder by querying PocketBase a build time. The only trick the PUBLIC_BACKEND setting in the frontend/.env file. Please give it a try and let me know if the documentation missing something.

[dschissler]

Are the .env files processed at build time?

[jkdoshi]

Yes. Most of our npm scripts are using env-cmd to load .env and use env vars in there.

[dschissler]

Well, I'm already using Svelte, and I'd like to use Pocketbase for as many site as possible. I'm just not sure how to fit in Sveltekit yet instead of my template system. I made my own Svelte router system. It works so far, but most likely with some funky adapter or whatever that Sveltekit could be made a lot better. The problem is that I want to maintain server side rendering and script rendering per route. I made a system where I can choose any combination of them if I'm willing to do the template again in front Svelte and backend Golang templates. So it's unclear to me what Sveltekit would offer me until I use it.

[jkdoshi]

@dschissler I have been using Svelte since 2019 and SvelteKit since it became available. And I was using sapper before SvelteKit.

So in the last few years I have zeroed in on a recipe for making my sites with Svelte.

My default approach now is static site generation (pre rendering) first, client side rendering second, server side rendering with nodejs as the last option.

This gives me best UX, most robustness, and most flexible hosting options.

The key is to avoid server side rendering. That doesn't mean that there is no server side at all. In our case, we should try to replace node.js with Pocketbase whenever possible. This is more viable with the Advent of JS engine inside Pocketbase, and database hooks, and email endpoints.

My ideal environment would have no Nodejs in production, only static assets, and Pocketbase as the only backend along with cloud blob storage (such as S3).

[dschissler]

@jkdoshi If I'm deciding then I'm not willing to have Node in production at this point. I think that it's on the cusp of becoming irrelevant. For build stage people are figuring out that you don't need Javascript to rearrange Javascript bits. So that build phase is going to slowly migrate to Golang and Rust tools. The final holdouts are environment specific plugins like Svelte compiler. If I were to want some server side Javascript then I'd be looking at Deno.

The key is to avoid server side rendering. That doesn't mean that there is no server side at all. In our case, we should try to replace node.js with Pocketbase whenever possible. This is more viable with the Advent of JS engine inside Pocketbase, and database hooks, and email endpoints.

What do you mean by email endpoints? But wouldn't JS engine inside of Pocketbase be very slow in comparison? Also is there a reason why it needs to be Javascript there? Is that for code reuse or what?

So I'll definitely check out your project sometime because I agree with your goals. It's just that I don't want to hit a walls with Sveltkit due to the ecosystem being young, or due to it not having thought out some use cases. It definitely seems like something worth using. I've not used either, but I can imagine that Sveltkit with static rendering could eat into the Hugo site builder.