PocketBase: Free Open Source Backend as a Service Platform

are you looking for a simple and high performance backand as a service solution for your next project discover pocket base a powerful free alternative to Firebase SE base and ight it's interestingly written in go runs with sqi database and includes a real-time database authentication authorization file storage and an admin dashboard currently they provide two sdks JavaScript and that which means you can use it with your favorite framework and even on mobile applications everything you need to build your next SAS before jumping to the platform overview let's see how to start using pocket base first you can self deploy it on your server on your own based on its architecture it's very simple you have one binary to download and run or you can use a cloud provider like us lso to take care of the installation backups updates and maintenance for you to install pocket base on our platform go to ls. hit login then click on deploy my first service search for pocket base hit select choose your cloud provider your region and the resources you need such as the CPU and the ram then hit next adjust your level of support rename and change the advance configuration if you need to and when you're ready hit create service once you receive the email telling you that your instance is ready you can go to its admin dashboard click display admin UI copy the password into your clipboard and access pocket basee then enter your email it's the one from your LS account and the password from my clipboard there is no onboarding process we arrive directly on the collection of users it is created by default to handle the authentication and authorization let's create a project we'll be using nextjs to interact with our pocket base back end let's open a terminal and create our next app yarn create next app the project name we'll use demo pocket base I won't use typescripts yes lint no Tailwind okay Source directory no and upter no I don't want to customize the import alas my project is created I can open it in Visual Studio file open folder and open it now I'm inside I can run yarn Dev follow the URL and we arrive on the starting pack when we create an xjs app let's start by creating a login page go to Pages create a new file name it login.js it will handle automatically the login route const login we will create our page component for now let's return null export default login because we don't want to spend time creating the UI let's go to Tailwind UI sign in and registration forms and let's choose the first one go to code switch to react and copy everything inside the the return let's return it within our code save now let's try to go to slash login and we have our signin sign up page the first thing we want to do is to create a user thanks to pocket base it's pretty easy to interact with our database go to API preview we can select what kind of action we want to do so us in our case it's create they have an example containing all the required code in JavaScript and inart we will be using JavaScript let's start by the import of pocket base and instantiation to make it generic let's create a Libs component so on the root folder create a Libs one create a new file pocket base.js paste the code we found in the documentation and we just export it so it's available everywhere automatically it said the address of our LS instance some open source tools don't provide it automatically and you have to write it after that's a good thing it's automatically generated in the documentation now let's take the rest of the example data record and then it's optional we can send an email verification we won't do it okay now let's go back to our login and in our code on the top we will create a signup function it will be an Asing function and we paste the code so we have our data to create the new user and we have the newly created user we will be able to log it after now let's plug this fake signup function to a click event so let's find not a member instead of having a link here we'll replace it with a Buton we can remove href and add on click we call our sign up function now let's try to create our user clicking on start a 40-day free trial and we have an error because I forgot to import pocket base okay let's go back to our code pocket Bas is here and let's import it from our Libs folder and we also forget to install the dependency so yarn add Pocket base we can restart our development server add the terminal and now we should be fine so let's click on start a 14-day free trial and in the log we didn't do any display in the content it's just an example we can see we have our user created with the data we set and some additional field like created updated and verified if we refresh our data in Pocket base we now have our user created here now we have created our first user let's try to log in so API preview go to O with password we copy the code so we just need this to log in our user and then we can console log what we get from it and we can see just below how we log out a user now let's create our login function const login is equal to async 2 we paste our code we already have PB imported your username or email we will create a state to store it const email set email is equal to use state of nothing same for the password now we can replace your username or email with the email State and same for the password now let's connect the login function by default it's creating a form so let's replace it with the div so it won't reload the page okay we can remove all of this now we have our input so value will be equal to email and on change we will set the email with the content of the input for the passwords we do exactly the same value is equal to password and onchange we set the password now let's find the signin button unclick we connect it to our login function now let's try to log in with fake info so I'm using my email and a random password sign in and we have an exception telling us failing to authenticate of course in a normal project you would add a spinner to show you are trying to log in and then you display an error invalid email and or password now let's try to connect with the real user let's go back to our signup function to find the data we set so test at example.com we can hide the error it's okay paste it into the email address and the password is 1 2 3 4 5 6 7 8 sign in and now you can see we don't have an error we don't display anything so it's not very visual but but in the console we can see that we are logged in we have our JWT token and the ID of our user in the database of course you have access to all the other information what you can see in the code is that we are not displaying data that we just get from the authentication but we are displaying bucket base. store so we have access globally in our project to this as soon as we log in it's very handy we don't have to create a context to store our user session it's made through the SDK we logged in using the email password but if you go to your settings of providers then you can add some social login such as Google Facebook GitHub whatever swits your project but we won't cover it in this demo just know that you have to go on the Cog pass your client ID and client secret and you can find the instruction to get your client ID and client secret directly in Pocket based documentation okay let's go back to our database collection and we will create a new collection we have to name it in the example is post it's what we will use you can create three type of collection either a base collection in the default way of creating listing updating delete data or a view collection which is just meant to display data to the user based on different rules or an earth collection it's the default one we already have with the users so we don't need another one so let's keep the base collection we need to add some fields to our collection by default it will create a unique ID the date when it has been created and when it has been updated so it's updated automatically when we do some operation on our data let's add new field for our post we will need a plain text let's name it title another field we will use Rich editor for the description or content and we will also add an image so it will be a file and name it image we can choose between a single one or multiple one but let's keep single we can add some constraints to to it but for now it's pretty simple we don't need it and hit create now we have our collection created we can either create post using the API like we did for users or we can do it visually through our admin UI let's add a new record the global UI of pocket base is pretty simple but very nice the title will be using our latest articles from LS let's post here we have a nice Rich Text Editor let's add an image at and dies and hit create automatically it generated the ID creation date updated we have a nice thumbnail to the image let's add two other records title what is open tofu I'll paste in the first paragraph upload the thumbnail of our article hit create and do it one last time flow wise AI I paste the description you can see to automatically attach the link which is Hy upload new file flow wise Ai and create create now we have three posts inside our collection we want to list them inside our front end so in our nextjs application API preview we are at the right place list so we are at the right place list and search if we want to see only one it would be the view one but here we want to list all of them so we have different option either get a paginated record list from 1 to 50 and do some pages or get all at once using get full list or limit some with some filters let's take the paginated one we go to our code inside the index we have our home function so we will do it directly here let's create a method named load post it will be an Asing function we will need a state to store our posts it will be an array we should also add a loader but we won't do it for the demo you can paste the code from your clipboard and we will log what we have and now in a use effect when the component is mounted we will call our Lo post function now let's go back to our homepage and we have an error because the request was autoc cancelled what it says is if a request is done twice it will cancel one of them so we can either try catch the issue or disable the autoc cancellation if you wonder why we have our request done twice it's because we using react in strict mode and by default it will trigger twice the use effect let's just disable it we can do it just before calling our loot posts we have only admins can perform this action it's because we didn't Define rules on our posts and currently only the admins have access to it it's more secure than giving access to everyone and then restricting it so to change the access go to the collection settings API rules and here you can see the rules for each which kind of operations we want to do currently we want to do a list search we can unlock and set custom rules either we can define a rule let's say um generic users it's an example we don't have one but you can you could Define rules on your users and have fine control over it instead we will just leave it empty to Grant everyone access now let's save the changes we reload and we have another problem it's because by default the filter provided from the documentation with the created date is interesting but some field one and some field two don't exist so let's just get rid of the filter go here and get rid of it now if we reload we can see in the console it's called twice I said it's the use effect trigger twice in development mode we have the current page the number of items per page the total number of items and pages so if you want to build a pagination it's pry pretty handy to have it and the list of items we fetched now we will be able to iterate through them and display them in our UI as we've seen in result list so let's set our post result list. items then we will render them so we'll get rid of all that big block here instead we will map our posts so for each post we will render a div the key will be the post. ID because it's a unique ID represent ing the post we display the image the post. image the alt we can use the post. title even if it's not very accurate H2 will be post. tile and P it's post. description okay so what can we see we have an issue with the image and with the text content it's displaying the link and so on for the content it's pretty easy instead let's use div and then dangerously set inner HTML it will convert the HTML content instead of displaying it as text but the syntax is an object if I remember correctly it's oh HTML and it should work better okay now we have our content display without the HTML tag attendi is a link but we still have an issue with the image let's fix it the problem is when it's a file if we only use its column it's using the end path so how to get the URL we go to the documentation files upload and handling go to file URL and they explain us how it works what we need to do is to have the complete URL with our instance the collection ID record ID and the file name we can even add optional parameter Define the size of the image so it's resized before rendering it to the user but you don't want to generate it every time so the SDK provide a method to do it what we need to do is called pb. fil get URL pass the record the column value and optional parameter such as thumb let's copy it only this part now in our image instead of using po. image as the source we call pb. files. getet URL for the column value it's post. image the record it's the post and for the thumbnail let's use 40 by 250 and now we have our posts with their image displayed correctly even if the UI is not very good you now know how to access your data using pocket base now we have seen how collections work you have seen that we can add image directly into the data but you can use the documentation if you need to upload them or delete them directly from your code let's have a look at the other features we have the logs here and it's displaying everything that is happening on our instance so we can see for the images the records when we load our page it was called many times the first time it had that filter error so we have a warning showing us we had an error doing it it's very useful if you need to debug or monitor what is happening over your API let's go to the settings here we can configure all our instance by default we have a name set when we create our instance so the application is named amme rename it to your project you can decide how many days you keep the logs you can also adjust your email settings if you need need to send email out of the box you need to do one more step because pocket based selfhosted version requires it can set up automatically with environment variables so you need to go to use SMTP mail server and follow the instruction from our documentation what you need to do is to define the SMTP settings for the sender address field let's copy it so sender address here we modify it and domain we replace it with our instance here then for the SMTP you copy it replace SMTP example.com with it then we have Port 25 encryption Auto and mtmt for username and password so Port 25 Auto Mt Mt save changes successfully saved mail settings with bucket base you can send default emails so verification password reset or confirm email change when you use the authentication features let's try the verification one everything is configured automatically here we can edit the HTML but we will keep it like this let's send a test email I'll put it to my email address and send and we have successfully send test email which means our settings are correct then we can adapt our file storage settings by default it's storing files into your instance but if you want to store it elsewhere you can use an S3 compatible storage so either awss 3 or minio for open source solution or CL Cloud flare R2 you also have access to backups you can export and import your collections it's generating everything automatically you can adjust your o provider but we already saw that part you can change the settings to the different tokens so their lifetime and duration and you can invite other users to be admin of your pocket based instance for example if you want them to have access to the collections and set data manually from it thank you for watching we hope you enjoyed discovering pocket base with us and we'll give it a try we plan to release very soon a comparison between the best different open source backend Solutions don't forget to subscribe and click on the Bell if you don't want to miss it if you want to continue discovering great features with us I recommend you this video here

Channel: Elestio

Views: 6,562

Keywords: open source software, open source alternative, elestio, open source, free software, free open source software, pocketbase, app development, backend as a service, open source backend as a service, free alternative to firebase, free alternative to supabase, free alternative to appwrite, baas, backend development, open source backend, open source backend platform, how to use pocketbase, how to create a backend

Id: kOOj3FY8w94

Length: 19min 48sec (1188 seconds)

Published: Fri Dec 01 2023