The Modern Dev CMS - Pocketbase

a dream back end that you could possibly,

Sanity. Sanity. Okay. So

collections. It allows to create schemas and data Yeah. So there is, like, TypeScript Give it your collection. Get ESLint, whatever. And, again, like I said, all of these API methods that exist here are just over here, 1st and foremost, what is Pocket Bos? Pocket Base is a modern It's easy to host. Okay? Let's look at the back end here because I built this app.

basically

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

And there's yeah. This is this does all of those things, right, where you just it gives you it does not give you

is fantastic, with the current collection that you're using.

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, well, they can search it or view it.

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

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

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.

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.

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 allows you to store that data in a database. It gives you authentication.

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

templating or front end or

It's What are some of these other ones? I click install this on local host, stand alone docker.

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, 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.

you know, come up with here. And it's it's really, really super easy. So

file storage to upload ship the pocket Bos server as, or if you have the

And I want to use middleware.

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.

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

and more.

built in SvelteKit.

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 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 your your application.

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, 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.

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.

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

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, 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

So this is very much less how fast things are loading, but also if there's any errors and how you can solve them quickly and easily.

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 Yeah. And this is is very much like that. You have these these, It gives you real time storage.

Pocket Base, 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,

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.

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 So 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.

and the SQLite instance can handle 10,000 very quickly.

plus real time connections on a $4 VPS.

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 looks a little something like this Wes you have your users collection by default.

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

Peace.

you connect to that endpoint with their Wes t k JavaScript SDK? 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.

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

Yeah. But I'm curious. You what? You npm install something, and then

get a COOLIFY project up and running. You would head to projects. You would click add. You would say, That's nice. If you want a list of all of the moves, 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 leave a comment below if you can just edit this. This is for exporting and importing.

Like, if I'm doing a word or a Drupal client 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 shows you what's optional. The the docs for this thing are incredible that it just gives you real time, whatever.

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, database

Headers, method, data.

And for this Node, the way I have it, since moves are private in my breakdancing app, only the requested 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, So another cool thing I like about this that you're gonna like, Wes, is that anytime you create a collection,

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

about that type of thing. Even, like, I find myself being like, oh, I need to save this somewhere.

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.

these text boxes you can type in, but it is basically just operators here where you have access to the needed current information.

The resource that I'm going to add, if we just scroll down, we just find the Pocket Bos It allows to create

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?

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 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, 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.

typings for pocket Bos itself, but not all of your collections.

droplet, 1 DigitalOcean droplet that I've just had around forever. I have Click continue.

A few clicks, 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 Contentful.

that isn't just how to do x, y, and z. It's how to do x, y, and z Yeah. And you could you could and I have written an application

just for the sake of of doing that

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

What?

But I really, really, really love on video here. So if you wanna watch this at youtube Scott 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.

like, a specific role or if you are an admin. And I would get into these, like, really complex,

you just click 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.

like, a function that returns true or false, which is Keystone has that. Keystone allows you to, like, declaratively 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.

separate, auth ID 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.

at a very high level, which is

application, I don't there wasn't too many times where I had, like, a really I have a link at the bottom of this called, Pocket Bos Typegen, that's in That's for sure. You install, you run it post install or whatever. It gives you

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.

have it just work. Right? 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.

Beautiful. Cool. Well, I'm I'm certainly gonna try this out. I need to get,

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

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

So that that's all all great.

your application, it's the best. Like Stripe does that

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.

incredible. The API docs that warp included. When docs have context of your

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.

fully typed collections.

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

syntax add moves and stuff. I built this in

So we have our application.

Yep.

And I love that because 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.

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.

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.

Scott just showed me a, JSON collection

You can set up backups,

like a like a more complex

Yep.

is for There's all sorts of little tools in here, Only the person who created the, Yeah. That it's hook hooks in the way that,

That's insane.

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.

referral cash at at DigitalOcean.

String ampersands together to have multiple parameters and these are all the different fields. Node of these fields is a reference to a user, Yeah. I can actually get an instance, like back end for your UI.

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.

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

I need to get a Coolify running. I really wanna do it on my, like, local Vercel like my Synology images and and videos and logs and things like that, and then you're gonna need auth so that

maybe prod and staging and whatever, 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 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 to Miami.

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, has to equal the user ID for the collection. So only the person who created that move can see it.

And then we go to forward slash underscore forward slash.

Yeah. Have somewhere to to throw it.

search rules. Okay? 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, and Correct. If you've ever been a part of Drupal, this is your your content.

schema here, my own collection,

Yes.

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.

like, declarative rules Wes often I find myself being like, I just want,

you have this API preview button in here, and that opens a drawer 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, So one of the cool things here and let's actually look at some of these other ones. So I made my own,

make them? Oh, there you go. That's what I'm looking for. So

the rules for who can access update or any of that stuff. So they give you API rules that are So let's say I wanted to no service for it. Unlike maybe, like, Supabase or any of those, fast,

the the copy paste examples include your tokens.

Anybody who is more experienced with pocket Bos, if you want to, 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 So can you list or search?

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

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 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

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

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

Johnny from Bulgaria.

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

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.

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.

a Scott of 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? It for the amount of times that I wanna spin up a quick site that has auth and data the select list, or even searchable, like, the UI for the admin interface is really top tier.

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,

application set up. Because the way I see this is the same way I see a CMS like Drupal or WordPress.

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

And all you do is select of,

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?

like, regardless of whatever collection you're on, COOLIFY.

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

You could see this is my Coolify instance. And what's funny is that these are all hosted on 1 separateization

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

this one really strikes the perfect balance for me between So

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.

there isn't a path to just sign up at pocketbased Scott com and and get something going. It's self hosted entirely.

Let's right here. I click it.

Sign up and get 2 months for free.

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

a CMS and

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.

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, React way of using hooks JS in this is hooking into The users collection It's called Break. You can quickly and easily

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?

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

here? Yeah. I've been I've been researching it. I've not run it myself, You're gonna need

gone to it a few times. We always get recommended it. And then I know that you built 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

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 you haven't seen this at all or have you seen this website or what's your familiarity

but I've