The Modern Dev CMS - Pocketbase

Oh, welcome to Syntax. On this Monday Sanity treat, we're gonna be talking all about pocket base. Node, pocket base is a newer player to this game of back ends for your application. And let me tell you, this one really strikes the perfect balance for me between a CMS and the whole ORM type of platform. It does a lot for you and it makes it really easy and it looks great doing it. So we're gonna be diving all into what is pocket based, what you need to know about this thing.

And before we do that, my name is Scott Tolinski. I'm a developer from Denver. With me, as always, is Wes Bos. What's up, Wes? Hey.

I have been lucky. You've been talking about this bucket base for a while, and this seems really cool. It kinda reminds me of, like, back in the Graph cool days Wes, like, you'd sign up and you get, like, a database and an API all in 1, but, like, this also does auth and file storage. I'm very curious to hear a bit more about this. And it's you can it's local. Right? Like, it's not some service? That's correct. In fact, there is

no service for it. Unlike maybe, like, Supabase or any of those, there isn't a path to just sign up at pocketbased Scott com and and get something going. It's self hosted entirely.

I always do the whole, like, search for pricing. You know? You land on something, and it's, like, open source, and you're like, where's the pricing tab? You know?

F pricing is something that I have firmly ingrained into my my muscle memory.

So before we do that, if you're hosting software of any kind, it's gonna be great to have a service like Sanity at Sentry dot I o to track not only just your performance, how fast things are loading, but also if there's any errors and how you can solve them quickly and easily.

And since pocket Bos here is written in Go, you can use Sentry with Go or you can use it with JavaScript, TypeScript, anything you want. Sentry's got an API for it, a package for it, a setup for it. And, heck, they might even have a wizard for it. Wes, I added Sentry to the syntax site when we were developing the syntax Sanity, And it was like a Node click command, and the wizard inserted it, everything with a code Bos into our code base. I didn't have to write any code to get Sanity going. So, shout out to Century for that. And this show is presented by Century. Head on over to century. Ioforward/syntax.

Sign up and get 2 months for free.

Let's get into it. Pocket Bos. So you haven't seen this at all or have you seen this website or what's your familiarity

here? Yeah. I've been I've been researching it. I've not run it myself, but I've gone to it a few times. We always get recommended it. And then I know that you built your breakdancing app in it Yeah. That I saw. And, like, you did it on the flight with your kids. And I was like, oh, that's

obviously a get up and running extremely fast type of thing, so I'm curious to hear more about it. I feel like that's a a flex is to that. The fact that I was and you'll see this app in a second. I built this app on an airplane when that wasn't even that long of a flight from Denver to Miami, And I'll show you in a second what I got out of it. But, you know, all from scratch. No no, libraries except for pocket Bos. So if you're listening to this on audio, we will be showing some things on video here. So if you wanna watch this at youtube Scott comforward/atsyntaxfm, you'll be able to see exactly what we're talking about. We will do a good job of describing everything, and it's not going to be, you know you you're not gonna lose anything, but you will gain something if you watch it in the video form.

And Spotify. If you're on Spotify, just open the app, and you can see what we're talking about. Oh, perfect. Yeah. That's actually that's a huge win for Spotify, honestly. I use that a lot. Often, I'm, like, listening to something, and then you hear them talking about something as reference. So just I'll just open the app and watch it for a few seconds and then close it and keep going on audio.

Yep. And, also, fair warning here. These websites, there's no dark Node. So my glasses are gonna be shining all at the same time.

1st and foremost, what is Pocket Bos? Pocket Base is a modern back end for your UI.

It allows to create collections. It allows to create schemas and data and allows you to store that data in a database. It gives you authentication.

It gives you real time storage.

It's basically a dream back end that you could possibly, you know, come up with here. And it's it's really, really super easy. So it is a competitor to any of these kind of headless UI back ends that you might have seen. Takes the same space as something like Supabase, takes the same space as Contentful.

What are some of these other ones? Sanity. Sanity. Okay. So

if you're trying to, like, understand, like, okay. I wanna build an application. I wanna build a mobile app. I wanna build something.

There's a couple things you're gonna need. Right? You're gonna need a database.

You're gonna need a ORM or something that sits on top and allows you to give you queries. You're gonna need a server. You're gonna need to write the code to build an API so that you can interface with it. You're gonna need file storage to upload images and and videos and logs and things like that, and then you're gonna need auth so that the access control of those types of things. And, Keystone is is another really good example of that. We've talked about that in the past.

And there's yeah. This is this does all of those things, right, where you just it gives you it does not give you templating or front end or I guess there is, like, a a JavaScript SDK, but, like, there's there's no implementing this in, like, React Hooks or something like that. It's simply just, like, the whole back end part of your application.

Yeah. And you could you could and I have written an application without a back end at all and just using pocket base for the entirety of the back end. I think that works really great. It it's a it's a really super full featured, but on top of that, many of these projects that do this kind of full featured nature, there's there's caveats here. It doesn't do this well. It doesn't do that Wes, but the UI is fantastic, and it does everything well. There's so many small pockets inside of this thing that are just really, really well considered and well thought out. So again, it's a back end. It handles anything that your back end might need to handle. It's self hosted, so you can host it anywhere. You can host it for free on fly dot io. There's instructions here. I host mine on Coolify. It's a one click install, but it's an app you can host anywhere.

It uses SQLite, and the SQLite instance can handle 10,000 plus real time connections on a $4 VPS.

So fast, can handle scaling whatever you need. It's built on top of Go. That's not something you really need to think about. You can extend it, modify it with Yarn and JavaScript, but, honestly, I haven't even needed to extend it at all. I haven't needed to write or learn anything about Go, so that's not a concern of mine. But it's very fast, and maybe that's why.

Oh, it looks like yeah. There's there's so there is a JavaScript API like you just said, and I Wes thinking that that is if oh, it's great. But when you need to step in and do something totally custom, are you able to do that? So it looks like there are a bunch of hooks where you can just kinda jump in and do something like send an email.

Although it looks like email sending is also built in. Email sending is also built in, and the hooks here for, like, anything. If you wanna do something before the mailer went out, before the update request, anything, you can step into the process with these hooks like Wes said. And this is hooks like the the correct way of using hooks, not the React React way of using hooks JS in this is hooking into your your application.

And I want to use middleware.

Yeah. That it's hook hooks in the way that, you know, rails had hooks or, you know, any of that stuff. Okay. Handles authentication, but it also handles roles. So roles and access roles, who can access what, who can create what, who can delete what, that's all taken care of through the UI. It also has pnpm plus OAuth providers with a UI to install them, which you gotta love.

Real time, like I said, you can connect to s 3 easily for file uploads, or you can just upload to the file system itself without connecting to s 3. But the s 3 config makes it easy. We'll show you that. Email templates and more.

So that's that's kind of like the the base of everything. And I'm gonna show you some of the things that I've done in it and what it looks like generally in the back end because we mentioned that you could host for free at fly dot io. We'll link to instructions for that. I have not done that, but I have installed with a one click in Coolify.

It's easy to host. Okay? Let's look at the back end here because I built this app.

It's called Break. You can quickly and easily add moves and stuff. I built this in a flight to Miami.

There's all sorts of little tools in here, gesture support, whatever. This is all being done directly with pocket Bos, and there is no back end for this. It's a client side only application built in SvelteKit.

So the admin experience, when you get into Pocket Base, it looks a little something like this Wes you have your users collection by default.

The users collection can be extended just like any of these other collections. If you want to add fields onto the user collection, you could either do it this way or through kind of like a a field reference or something. But if you click these little gears at any given point in the UI, it gives you the ability to, like I said, edit the collection in a way where you can add a new field. Well, so like your schema implementation? Correct. If you've ever been a part of Drupal, this is your your content.

What do they got for I'm, like, been so long out of the Drupal game. Custom fields. This is your WordPress custom fields. This is your schema whatever. What's cool is that the field options are more than just kind of basic database fields, and that's the thing I think Pocket Bos does really well is it translates the database type of fields into things that you actually use and care about, especially as a UI developer. So so many times Wes get into, like, a database admin, and they're like, would you like to add a big ESLint? Or would you like to add a, you know, whatever? And and sometimes, you know, I wanna say, oh, this is a URL or this is an email, plain text, or I want a rich text editor maybe for a WYSIWYG type of experience.

So this is very much less database heavy language and much more CMS heavy language. It's just like perfect hybrid for me between a CMS Wes it gets out of the way for the front end,

but also does all the database stuff. And when you add a field here, does that also mirror it to some config file, or does this done entirely in this UI?

That's a great question because I've never had to look for a config file because the UI is that good. There's just about no times where I'm like, man, I wish this was a a ugly ass config file. Okay. So you want to send me your app

to use? How how do I how does my app know what the UI is? Because we've talked about this before, click ops. Right? Yes. Do do you have to tell me to make them? Oh, there you go. That's what I'm looking for. So Scott just showed me a, JSON collection

of that type of thing. Yes. I I am not positive if you're able to just edit this straight up.

Anybody who is more experienced with pocket Bos, if you want to, leave a comment below if you can just edit this. This is for exporting and importing.

Yeah. But there is a JSON representation of these fields. Sanity feels like you would want to, like, put that in your git config, wouldn't you? Because, like, that's your your whole back end schema is based on that. Yeah.

Yeah. I I I would get that. That makes sense to me. Anytime I've done this, I've just had one one instance. I I haven't had, like, the full application set up. Because the way I see this is the same way I see a CMS like Drupal or WordPress.

Like, if I'm doing a word or a Drupal client application, I don't there wasn't too many times where I had, like, a really separate, separateization of, maybe prod and staging and whatever,

but I'm sure there's definitely work flows from that one. Can get to that. I think the huge benefit here is that, like, often Wes you have an idea, you don't necessarily care about that type of thing. Even, like, I find myself being like, oh, I need to save this somewhere.

I guess I'll make a quick schema. I guess I'll quickly get a lite file and, like, yeah, like, pretty quick. But yeah. This is even faster.

It for the amount of times that I wanna spin up a quick site that has auth and data Yeah. I can actually get an instance, like I'll do this a as a speed run on our YouTube channel. I can get this going in no time. And I built templates now for auth and SvelteKit.

So I'll be able to get something up and running in less than 5 minutes with auth and data of a custom schema.

So one of the cool things here and let's actually look at some of these other ones. So I made my own, schema here, my own collection, and these are all the different fields. Node of these fields is a reference to a user, And I'll show you how we do that real quick. You can do that simply by using this connection. Right? So if you do a new field, you select a relation.

And all you do is select the other collection you wanna relate and you say whether you can do single or multiple. Right? That's a one to 1 or one to many, many to many type of thing.

Another thing that you have here, if you're looking at this JS you can quickly and easily add indexes. So there's a button for new pnpm, and here enough is or sure enough is the actual SQL that you can write, but you can just click around and create indexes that way. API rules are where you set up your, the rules for who can access update or any of that stuff. So they give you API rules that are search rules. Okay? So can you list or search? And for this Node, the way I have it, since moves are private in my breakdancing app, only the requested auth ID has to equal the user ID for the collection. So only the person who created that move can see it.

Only the person who created the, well, they can search it or view it.

Anybody can create a move. You just need an account.

Anyone can update a move as long as the user ID is equal to the auth ID and delete. So all your crud stuff right here, don't even have to consider it. Don't have to write guards for it. It's just in your back end here, and it works.

Super simple, super easy, easy to configure. Does that have the ability to do,

like a like a more complex evaluation? Because I remember, like, Firebase had that. And then when you wanted to get into a little bit more complicated Wes, you can update this item if you own it or if you have the like, a specific role or if you are an admin. And I would get into these, like, really complex, like, declarative rules Wes often I find myself being like, I just want, like, a function that returns true or false, which is Keystone has that. Keystone allows you to, like, declaratively pass a true or false create, read, update, delete, or you can pass a function which will either return true or false based on your calculation.

Yeah. And this is is very much like that. You have these these, these text boxes you can type in, but it is basically just operators here where you have access to the needed current information.

Headers, method, data.

String ampersands together to have multiple parameters to or modifiers and additional conditionals on there. But you can even get into things like they have macro, special identifiers, like today's start, today's end month Scott. Oh, cool. You can get into a whole bunch stuff. One of the things that I really admire about pocket Bos is everything that you would want is here. Like, whenever you think about, like, oh, it'd be really great if I had oh, it's here. Okay. Never mind.

It's very modern and well thought out in that way. This whole thing is just made by 1 guy? Yeah. It's it's crazy.

Johnny from Bulgaria.

He rules. And the design on this thing is a quick exquisite. Even, like, this is the type of UI I might even give to somebody as a WordPress or an admin UI. When you create a record, you could even get, like, a WYSIWYG in here. If I wanna you know, any of this stuff, a user picker, the select list, or even searchable, like, the UI for the admin interface is really top tier.

So that that's all all great.

So another cool thing I like about this that you're gonna like, Wes, is that anytime you create a collection, like, regardless of whatever collection you're on, you have this API preview button in here, and that opens a drawer that isn't just how to do x, y, and z. It's how to do x, y, and z with the current collection that you're using.

That's nice. If you want a list of all of the moves, you just click you know, select what you want here and click it. Oh, if you want here get full list and sort by the date they were created, oh, yeah. All you gotta have to do is select and copy this and paste it into your app. It's really pretty incredible. The API docs that warp included. When docs have context of your

your application, it's the best. Like Stripe does that at a very high level, which is the the copy paste examples include your tokens.

And I love that because it it understands. Like, you don't have to copy paste it, and that's where the issues pop up. Oh, you Yes. You it was move you you type move, and it was moves with an s. Deno Yeah. You know who else does that? Sentry does that. Whenever you log in, Yeah. You know who else does that? Sentry does that. Whenever you log in

and you're a part of a project and you're looking at, like, the the docs, it gives you your API keys and URLs and links and stuff where you need them. But you can see here that the only, like, the only thing you really need here is you install Pocket Base and then you say new pocket base. You pass in your URL to the app to the, like, pocket base instance. And then from there, it's just pb.collection.

Give it your collection. Get ESLint, whatever. And, again, like I said, all of these API methods that exist here are just over here, shows you what's optional. The the docs for this thing are incredible that it just gives you real time, whatever.

It's it's all just here. But before we go, let's actually look at some more stuff here. We have logs for everything, gives you detailed logs about what's going on in your application.

But I really, really, really love the settings because the settings give you a host of options here. Like, by default, mail just works. Now it just works coming from your server and it's probably gonna go into spam or not be what you want. You can you know, whatever your support or sender address is. So they give you a real a really easy way to use an SMTP server. You just paste it in there. You can even get all kinds of options that you might want. There are default email templates up the wazoo in this thing. So the email verification template,

the email reset your password template, any of these things are just here. And I have a question about, like, the actual code part. So, like, when you you obviously install this thing locally, it's it's actually a bit weird because it's you download, like, an executable. It's not like a NPM install, which I think they should do that. I know it's go, but they probably could ship the pocket Bos server as, like, an npm start thing, which I think would be a little bit more because, like, JS soon as I started it, my OS is like, this is from developer. Mhmm. And you gotta, like, jump through a whole bunch of hoops. So I tried it twice now, and I'm just like, whatever.

Yeah. But I'm curious. You what? You npm install something, and then you connect to that endpoint with their Wes t k JavaScript SDK?

Yep.

That's it right here. These first two lines right here. Is it is it fully typed? JS there type do you get typings? Like, how well, how's the connection between that work?

Yeah. So there is, like, TypeScript typings for pocket Bos itself, but not all of your collections.

I have a link at the bottom of this called, Pocket Bos Typegen, and that's in That's for sure. You install, you run it post install or whatever. It gives you fully typed collections.

So all of my collections are fully typed because I ran the pocket based type gen.

Oh, cool. So back to settings with the mail settings. File storage is as simple as, by default, it uses the local file system, but but you can just quickly and easily give it an endpoint, a bucket access key, and secret, and automatically have file uploads go go directly to s 3. That is sick, easy file uploads.

You can set up backups, so you can have auto backups. You can store your backups in s 3. Like I said, like, any little nicety you might think of, this thing has it.

Again, export and import collections, we talked about already. Look at these auth providers. You can configure auth providers with a nice UI in a very simple way. Just, you know, enter your information here. Pocketbase takes care of it. You have all of your token options, how long you want auth tokens to last and all those things. And then you can control who's an admin and everything like that. So I when you were saying you were trying to run it as an executable, I've almost always, to get this started, just throwing it up on a cloud provider to start. I'm sure it's easy enough to run locally, especially maybe your Dockerhead or something like that. But for me, I'm just throwing it up on on the cloud because the way I'm using this right now is for smaller projects. Right away? Production right away, but also, like, the types of things I would have reached for a CMS for in the past. So for me, just throwing it up online and then connecting to it off, now you're good to go. Like I said, that was the reason why I was able to put this together so quickly and have it just have it just work. Right?

Beautiful. Cool. Well, I'm I'm certainly gonna try this out. I need to get, I need to get a Coolify running. I really wanna do it on my, like, local Vercel like my Synology just for the sake of of doing that because things like this, we're like, ah, I just I wanna run it really quickly, and I don't feel like having to spin up a $5 server.

Yeah. Have somewhere to to throw it.

I know. It's, really pretty incredible. I would show you my Coolify here if you wanna if you wanna see what the one click install for that looks like. Sure. Yeah. Let's see it. Okay. Cool. So I'll I'll show you really quick before we go here how exactly I got this up and running in Coolify very quickly.

You could see this is my Coolify instance. And what's funny is that these are all hosted on 1 droplet, 1 DigitalOcean droplet that I've just had around forever. I have a Scott of referral cash at at DigitalOcean.

So let's say I wanted to get a COOLIFY project up and running. You would head to projects. You would click add. You would say, syntax COOLIFY.

Click continue.

So we have our application.

This is production. I'm going to click add a resource.

The resource that I'm going to add, if we just scroll down, we just find the Pocket Bos right here. I click it.

I click install this on local host, stand alone docker.

A few clicks, and it's installing, and then we'll be up and running in just a second. And then we could even we could even see this get up and running here, Wes. Node that we don't have to install or anything, but I'll just show you how quick this is because we did this, you know, while I'm while I'm talking you through it. Yeah. So the service has started. You can see it started. It gives you a URL. Faster than npm installing it, honestly.

Yes.

And then we go to forward slash underscore forward slash.

What? That's insane.

Yep.

It's got a minimum of 8 characters. Come on.

There we go. We got a back end. That's it. Wow. Up and running. You can connect to it with the URL, and you already have your users collection with user email, all that stuff, avatar. That's sweet. This is why I love this thing. I I I can toss-up a pocket base in manner of seconds. So, check it out if you're interested in this project. I'll have Vercel, code examples and stuff from projects that I'm working on if you wanna see the Svelte implementation of some of the stuff I'm doing. But really cool project. Huge fan of this thing. So check it out at pocketbase.i0.

Wicked. Alright. Thanks, everybody, for tuning in. We'll catch you later. Peace.

Peace.