The Modern Dev CMS - Pocketbase

welcome to syntax on this Monday Hasty treat we're going to be talking all about pocket base now pocket base is a newer player to this game of backends for your application and let me tell you this one really strikes the perfect balance for me between a CMS and the whole Om type of platform it does a lot for you and it makes it really easy and it looks great doing it so we're going to be diving all into what is pocket base what you need to know about this thing and before we do that my name is Scott tulinsky I'm a developer from Denver with me as always is Wes boss what's up Wes hey I have been looking you've been talking about this pocket base for a while and this seems really cool it kind of reminds me of like back in the graph cool days where like you sign up and you get like a database and an API Allin one but like this also does oth and file storage I'm very C ious 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 superbase or any of those there isn't a path to just sign up at pocket base.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 command 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 going to be great to have a service like Sentry at sentry.io 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 base here is written in go you can use entry with go or you can use it with JavaScript typescript anything you want Sentry's got an API for package forward a setup for it and heck they might even have a wizard for it w I added Sentry to the syntax site when we were developing the syntax site and it was like a one-click command and The Wizard inserted it everything with a code mod into our code base I didn't have to write any code to get Sentry going so shout out to Sentry for that and this show is presented by Sentry head on over to sentry.io syntax sign up and get two months for free let's get into it pocket base 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 break dancing app in it um 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 things so I'm curious to hear more about it I feel like that's a a flex is to that the fact that 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 uh libraries except for pocket base so if you're listening to this on audio we will be showing some things on video here so if you want to watch this at youtube.com syntax FM 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 going to 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 yeah and also feir warning here these websites there's no dark mode so my glasses are going to be shining all episode first and foremost what is pocket base pocket base is a modern backend for your UI it allows to create collections 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 backends that you might have seen takes the same space as something like super base takes the same space as contentful uh what are some of these other ones uh sanity sanity okay so if you're trying to like understand like okay I want to build an application I want to build a mobile app I want to build something there's a couple things you're going to need right you're going to need a database um you're going to need a om or something that sits on top and allows you to give you queries you're going to need a server you're going to need to write the code to build an API so that you can interface with it you're going to need file storage to upload images and and videos and logs and things like that and then you're going to need off 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 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 backend 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 doesn't do that well 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 backend it handles anything that your backend might need to handle it's self-hosted so so you can host it anywhere you can host it for free on fly.io there's instructions here I host mine on coolify it's a oneclick install but it's an app you can host anywhere it uses SQL light and the SQL light instance can handle 10,000 plus realtime connections on a $4 VPS so fast uh 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 dart 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 so there is a JavaScript API like you just said and I was 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 kind of 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 are for like anything if you want to do something before the mailer went out before the update request anything you can step into the process with these hooks like w said and this is hooks like the the correct way of using hooks not the react the react way of using hooks as in this is hooking into your your application um and it's almost like a 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 15 plus ooth providers with a UI to install them which you got to love real time like I said you can connect to S3 easily for file uploads or you can just upload to the file system itself without connecting to S3 but the S3 config makes it easy we'll show you that email templates and more um so that's that's kind of like the the base of everything and I'm going to 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 can host for free at fly.io we'll link to instructions for that I have not done that but I have installed with a oneclick in coolify it's easy to host okay let's look at the back end here because I've built this app um it's called the break you can quickly and easily add moves and stuff I built this in a flight to Miami um there's all sorts of little Tools in here little gesture support whatever this is all being done directly with pocket base and there is no backend for this it's a client side only application built in spell kit so the admin experience when you get into pocket base it looks a little something like this where you have your users's collection by default The users's 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 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 we'll talk about like your schema implementation correct if you've ever been a part of Drupal this is your your content um what do they got i' 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 that I think pocket base 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 we get into like a a database admin and they're like would you like to add a big int or would you like to add a you know whatever and and sometimes you know I want to say oh this is a URL or this is an email plain text or I want a rich text editor maybe for a wizzywig type of experience so this is very much less database heavy language and much more CMS heavy language it's this like perfect hybrid for me between a CMS where it gets out of the way for the front end uh 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 um okay so you want to send me your app to use how how do I how does my app know what the UI is cuz we've talked about this before click Ops right do do you 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 um anybody who is more experience with pocket base if you want to uh leave a comment below if you can just edit this this is for exporting and importing uh but there is a Json representation of these fields yeah it feels like you would want to like put that in your get config wouldn't you cuz like that's your your whole backend schema is based on that yeah yeah I I I would get that that makes it 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 uh 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 um separati of um maybe prod and staging and whatever but I'm sure there's definitely workflows for that I'm sure you can get to that I think the huge benefit here is that like often when you have an idea you don't necessarily care about that type of thing even like I find myself being like I need to save this somewhere ah guess I'll make a quick schema I guess I'll quickly get a SQL light file and like Prett quick but yeah this is even faster it for the amount of times that I want to spin up a quick site that has off and data yeah I can actually get an instance like I'll do this a as a speedrun on our YouTube channel I can get this going in no time and I built templates now for oth and spel kit so I'll be able to get something up and running in less than 5 minutes with off 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 uh schema here my own collection and these are all the different fields one 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 relation and all you do is select the other collection you want to relate and you say whether you can do single or multiple right that's a one to one or one to many many to manyi type of thing another thing that you have here uh if you're looking at this is you can quickly and easily add indexes so there's a button for new index 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 one the way I have it since moves are private in my break dancing app only the requested off 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 um 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 oth 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 uh super super simple super easy easy to configure does that have the ability to do uh like a like a more complex evaluation cuz I remember like Firebase had that and then when you wanted to get into a little bit more complicated where uh 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 where 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 uh these text boxes you can type in but it is basically just operators here where you have access to the current information headers method data string Amper Sands 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 start so cool you can get into a whole bunch of stuff one of the things that I really admire about pocket base 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 uh it's very modern and well thought out in that way this whole thing is just made by one guy yes it's crazy johnie from Bulgaria he rules and the design on this thing is 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 can even get like a whizzy wig in here if I want to you know any of this stuff a user picker the select lless 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 going to 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 got to to do is Select and copy this and paste it into your app it's really pretty incredible the API docs that are 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 you don't have to copy paste it and that's where the issues pop up oh you you it was move you you type move and it was moves with an S you know you burned half an hour on that and all those annoying things so I love it when when docs are integrated like this 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 list 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 docks 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 every 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 going to go into spam or not be what you want you can you know whatever your supporter 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 a executable it's not like an npm install which I think they should do that I know it's go but they could ship the pocket base server as like an mpm start thing which would I think would be a little bit more cuz like I as soon as I started my OS is like this is from an unidentified developer and you got to like jump through a whole bunch of Hoops so I tried it twice now and I'm just like ah whatever um but I'm curious you what you mpm install something and then you connect to that endpoint with their SDK JavaScript SDK yep that's it right here these first two lines right here is it is it fully typed is there type do you get typings like how how's the connection between that work yeah so there is like typescript typings for pocket base itself but not all of your collections I'll have a link at the bottom of this called uh pocket based typ gen and that's an a plugin you install you run it post installer whatever it gives you uh fully typed collections so all of my collections are fully typed because I ran pocket based type gen oh cool so back to settings with had the mail settings file storage is as simple as uh 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 S3 that is sick easy file uploads you can set up backups um so you can have auto backups you can store your backups in S3 like I said like any little nicety you might think of this thing has it um again export and import collections we talked about already look at these off providers you can configure off providers with a nice UI in a very simple way just you know enter your information here pocket base takes care of it you have all of your token options how long you want off 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 thrown it up on a cloud provider to start I'm sure it's easy enough to run locally especially maybe your Docker head 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 project 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 uh 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 going to try this out I need to get um I need to get a coolify running I really want to do it on my like local server like my sonology just for the sake of of doing that because things like this were like ah I just I want to run it really quickly and I don't feel like having a spin up a $5 server yeah have somewhere to to throw it I know it's uh really pretty incredible I would show you my coolify here if you want to if you want to see what the oneclick install for that looks like sure yeah let's see it okay cool so I I'll show you really quick before we go here how exactly I got this up and running in kify very quickly uh you can see this is my kify instance and what's funny is that these are all hosted on one droplet one digital ocean droplet that I've just had around forever I have a a lot of referral cash at at digital ocean 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 SX 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 pocket base right here I click it I click install this on Local Host Standalone Docker a few clicks and it's installing and then we'll be up and running in just a second and then we can even we can even see this get up and running here Wes not 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 that's faster than npm installing it honestly yes and then we go to forward slore slash tada yep Scott oh minimum of eight characters come on there we go we got a back end that's it w 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 Man of seconds so uh check it out if you're interested in this project I'll have some uh code examples and stuff from projects that I'm working on if you want to see the felt implementation of some of this stuff I'm doing but really cool project huge fan of this thing so check it out at pocket base. Wicked all right thanks everybody for tuning in we'll catch you later peace peace

Channel: Syntax

Views: 9,709

Keywords: tutorials, cms, html, css, html5, css3, education, free, lessons, tuts, tutorial, learn, software, web development, web developer, developer, web, website

Id: Eg38JbgbttA

Length: 25min 25sec (1525 seconds)

Published: Mon Jun 03 2024