스크립트
00:00:00pocketbase is an open source alternative to superbase or firebase and possibly the simplest
00:00:04backend you could ever run just one single file giving you real-time database authentication and
00:00:11file storage this is in complete contrast to how insanely complex modern web dev has become
00:00:16so in today's video we'll test out pocketbase and see if its simple architecture
00:00:21really stands up when building anything beyond a simple app
00:00:29pocketbase is a single go binary with sql lite embedded but coding in go itself is actually
00:00:35optional because the backend can be expanded with both javascript and typescript and you'll also get
00:00:40access to a basic admin ui where you can configure all of your collections exactly how superbase works
00:00:46now jumping into the architecture and how you'd actually use it once pocketbase is live you can
00:00:51connect to it from the front end via the javascript sdk this again is very much the same as how firebase
00:00:57and superbase are designed as you can then access your database directly from the front end and don't
00:01:02worry pocketbase has api rules and auth to keep all of these rules secure but let's jump straight into
00:01:08a demo to show a real application with authentication database and file storage and if you're enjoying this
00:01:13video then subscribe to better stack as we cover a huge amount of developer content on this channel
00:01:18so we have our application here we've got pocketbase on the back end and then we've just got a web front
00:01:2210 written in react the most important file inside the web front end is this pb.ts file here because
00:01:30inside here we're importing from pocketbase so we've got the pocketbase class we create a new instance of
00:01:36that then we can connect to our backend service and then now we can use pb throughout the rest of the
00:01:42application so the application itself is just a simple bug tracker we can drag items between columns we can
00:01:48create brand new issues so if we look inside the hook that controls the logged in user you can see
00:01:53initially we set the state with pb auth record so this would just grab the currently authenticated user
00:01:59from pocketbase and then we set up a listener as well so we say if the auth store changes with the
00:02:05on change event then we'll just set the brand new user into state so it is really as simple as that
00:02:11we can access state we can subscribe to state and the same is true for our issues as well
00:02:16so inside our use issues hook again we initialize some state but in this case we'll leave it empty
00:02:21then we have a use effect and we say that we'll grab all of the issues get the full list and then
00:02:27we'll set the issues with that list so that would initially pre-populate the data and then we can
00:02:32also again subscribe to issues so if you drag issues between columns or create or delete an issue
00:02:38we can then say pb.collection issues subscribe and then any time a new record comes in we can then
00:02:44append it to our state that means when we're interacting with the pocket base database directly
00:02:49like when we drag a card here the state would be automatically updated in the case of creating a
00:02:54brand new issue we can also attach a screenshot to that so let's grab a screenshot of the application
00:02:59itself we then click file issue and then the new issue appears here in the front end code this is
00:03:05handled through a submit function and then we append all of the form data and then finally we call pb
00:03:11collection issues and then create passing the data in what we have on the back end is collection api
00:03:17rules to prevent misuse of these apis so pocket base will give you this admin interface as default
00:03:24and then here you can see we've got the users collection and we've also got the issues collection
00:03:27where all of our issues live if we look inside the users collection and then press settings up here
00:03:32then we have this tab api rules and these are all the rules that restrict access to this particular
00:03:37collection so we say in the case of users the request auth id cannot be an empty string and then when
00:03:43updating or deleting users the id has to match the id of the authenticated user and we can access that
00:03:50with this special string here the at character and then request.auth.id if you've used super base
00:03:56in the past you'll find this kind of pattern super familiar now what happens if the back end doesn't
00:04:02do everything you need well luckily you can extend it via hooks with of course go but also javascript
00:04:08and typescript so we can hook into events such as on bootstrap when the app starts or on record
00:04:15create when a database record is created there are 82 unique hooks at the time of filming so pretty much
00:04:21everything you need would be covered now let's extend our pocket base service to see how it all works
00:04:27if we look inside the pb folder you can see we have our pocket base binary and this file is literally
00:04:32all you need to run the default version of pocket base in my case though i've written all of the hooks
00:04:38in typescript so i have some setup to compile those hooks into the pb hooks folder as javascript because
00:04:44pocket base only actually supports javascript natively so if you are using typescript you need to compile it down
00:04:50if we look inside the main hook file we can see that we've got a hook here saying on record create
00:04:55and this is specifically targeting when we create issues and what we're doing here is we're saying
00:05:00every time a record is created we're going to send an email to the user and we can do that by calling
00:05:05e.app newmail client and then send and then pass in the message object which we've constructed here
00:05:10you can of course hook into a ton of different features inside pocket base so any custom functionality
00:05:15that you might need is always going to be supported with the 82 plus hooks already available in pocket
00:05:21base because this runs sql lite it means we need persisted storage so past platforms like heroku render
00:05:28or railway would actually be a bad fit due to their ephemeral file systems basically you'd lose your data
00:05:33every time you redeploy your app to avoid this you can attach a permanent file system but the better and
00:05:39cheaper option would just be to host on a vps and that data lives inside the pb data folder so if
00:05:45we have a look inside here you can see we have a storage folder and this would contain all of the
00:05:50images that we've uploaded against our issues they just happen to be stored in the storage folder so
00:05:55inside this random id here for example you can see the image here that i uploaded against the issue
00:05:59earlier the database files themselves would also be persisted within this folder so data.db here this
00:06:05would contain all of our sql lite code so if i were to delete this file i would lose all the data in the
00:06:11application so obviously you need a good backup strategy rather than just leaving it as a single
00:06:16file on disk compared to tools like superbase which can start at 25 for the basic tier pocket base is
00:06:22basically free you just have to pay your vps costs which can be as little as four dollars and allows
00:06:28you to run as many projects as you like but of course you would want to scale this up with usage
00:06:33pocket base also comes with everything you need for production apps like migrations job scheduling and
00:06:38logging you can also serve static files directly with pocket base by dropping them into the pg public folder
00:06:44and this would be useful for something like a react front end alternatively you can also host
00:06:49dynamic routes with template rendering and this would be perfect for things like email templates so if you
00:06:54do want a single box setup then this is how you do it now the big question is this production ready
00:06:59well it does include all of the features that you'd need to build a modern sas app particularly the
00:07:04production grade features like migrations and logging it's also entirely extensible so you're not just
00:07:09stuck with the defaults but the big gotcha is that this is pre v1 so they do explicitly say to only use
00:07:15this if you're fine reading changelogs and running manual migrations from time to time but if that is
00:07:20you then go ahead you can just build the first single file unicorn you can learn more about pocket
00:07:25base by checking out the relevant links down in the description and if you love open source alternatives
00:07:29then check out our video on open code the open source alternative to clawed code i've been warren from
00:07:35better stack thanks for watching and of course i'll see you next time