What you’re looking at is the actual side projects directory on my computer none of these side projects have gone on to become the next Facebook yet but I have not failed I’ve just found hundreds of apps that don’t work if you’re a developer entrepreneur it’s extremely important not to over engineer things
Andy jassy once said invention requires two things one the ability to try lots of experiments and two not having to live with the collateral damage of failed experiments in today’s video we’ll build a full stack chat app using pocket base and svelte then deploy it to
A Linux server on the Node for just five dollars I call this the Spock stack and prepare to be amazed at how quickly it can get things done stupidly I made this demo public so you can actually try it out on the internet right now this is
Not my first rodeo and I know you guys will spam it with the most horrific comments imaginable but this time messages can be moderated with Community reactions if a comment gets pooped on five times it disappears from the UI the back end magic behind this application is a relatively new tool called pocket
Base which is like a free and open source Firebase written and go that provides user authentication along with a real-time database powered by SQL Lite but unlike any other base out there it compiles everything to a single executable and that means to self-host it all you need is one little server
Which costs less than your Grande soy milk macchiato Simplicity is the ultimate sophistication but today we’ll find out if the Simplicity of pocket base can actually scale to kick things off we’re going to start things in Reverse by deploying pocket base to a Linux server in the cloud luckily for us
Lenode has sponsored this video which means I get to Make It Rain with a hundred dollars in free credits for everyone watching this video for those that don’t know lenode is one of the original cloud providers that’s been around since 2003. their platform is a perfect fit for this project because
Like spelled and pocketbase it’s famous for Simplicity unlike big cloud providers you can get a Linux server up and running with a few clicks with flat predictable pricing that won’t cause collateral damage later after you register go to the dashboard and click the button to create a new node then
Choose an image with your preferred Linux distro I’m going going with Debian but the real Chads out there will use Arch by the way then choose a region and the size of your machine and finally give it a password and click create Step One is complete we now have a Linux
Server running in the cloud I told you that would be easy let’s go ahead and make a note of its IP address to access it on the internet now in Step 2 let’s deploy pocket base to it first download and unzip pocket base from the website I’m also using Debian on my local
Machine so we’ll download the Linux version unzip it to get this single pocket base executable you can run it locally by running pocket based serve but I want to run it in the cloud on my lenode server so I can access it from anywhere just like a platform like
Firebase let’s open up the terminal and use secure shell to access the lenode IP address as a root user it’ll require the password you created earlier and now we have access to the Mainframe we’re currently in the root directory so let’s go ahead and create another directory
Called PB and now we just need to upload the pocket base executable to this directory we could do it with rsync or an application like filezilla but I think the easiest approach is to use secure copy which will simply copy the local file over to the remote directory
We just created run this command from a separate terminal on your local machine once that’s done we can go back to the terminal on the lenode machine and run the pocket-based serve command and to make it accessible over the Internet we’ll use the HTTP flag followed by our
IP address and Port 80. congratulations you just self-hosted your own back end that you can now access over HTTP with the IP address it serves a rest API as well as an admin dashboard that you can access with the underscore URL however there’s a few more things I want to show
You to make it fully production ready the first thing I would do is bring my domain over to lenode it has a fully featured DNS manager and pocketbase uses let’s encrypt to automatically generate an SSL certificate to serve your backend over https all you have to do is add
This extra flag to the serve command now the next thing I would consider doing is mounting a volume to the PB data directory this is where pocketbase stores all of your data a volume is just its own file system that can be moved around to different servers on node we
Can easily attach an extra 20 Gigabytes for Just Two Dollars and then finally I would recommend setting up a systemd service to automatically restart pocket base whenever the server reboots and now it’s time for step 3 where we model the data for our chat app navigate to your pocket-based dashboard and create an
Admin user from here we can go to the database and by default it has a collection for users these are the users of your application which contain Fields like username email password and so on what we need is a way to create a one-to-many relationship between users and chat messages create a second
Collection called messages and give it two Fields the first field is text for the message content itself and you can add some optional server-side validations here like Min length and max length while the second field user creates a relationship that says a message belongs to a user under the hood
Pocketbase creates a foreign key for the user ID on the messages table in the sqlite database go ahead and click create to update the schema and now you should be able to create new records in the database the that takes care of our data modeling now let’s make it secure
Every collection in Pocket base can have API rules these rules determine who can access your data from a front-end application by default the messages collection can only be accessed by admin users however we want anybody to be able to view the messages so let’s go ahead
And hit the unlock button for list and view users also need the ability to create new messages but it’s critical that they only create messages Associated to their own user ID we can enforce that rule by ensuring that the user property is equal to the request
Auth user ID and just like that we’ve eliminated tons of complexity that we would need in our backend code otherwise save the changes then head over to the users collection for users we already have a bunch of rules built in but we want to give users the ability to view
Each other’s profiles so let’s go ahead and remove the rules for View and list to make this data public now that we’re somewhat secure we can start building out the front end with svelte as you may know I use spell to build the fireship i
O website but it’s also been used by the pocket-based developers to build their admin and UI as well it’s a great fit for this project because it’s really good at building real-time uis thanks to its built-in reactive stores generate a new project with Veet then select the
Spelled option and we’ll also go with typescript open the project run npm install then npm run Dev to serve it locally then in the code delete all the boilerplate and create a new file called pocket base in the lib directory whenever building a new app I usually start by thinking about user
Authentication what we’ll do in this file is provide a way to listen to that current user in real time from anywhere in the application to handle that we’ll install the pocket-based JavaScript SDK with npm Once installed we can then import it in this file as well as
Writable from svelt store now to connect to our backend all we have to do is initialize pocket base with the URL it’s hosted at which in this case would be the lenode IP address from there I’m creating a variable for current user that’s equal to a writable store its
Default value is the pocket base off store model which is equal to null when the user is not logged in n or equal to the database record of the currently logged in user that contains Fields like the user ID username and so on now the value of this model will change when the
User signs in and signs out and we can listen to those changes by registering a callback for the on change event when this event fires we can update the spelled store with the current model that gives us a way to subscribe to the current user let’s put it to use by
Creating a login.spel component inside this component we’ll log in a user with email and password what’s awesome about that store we just created is that we can subscribe to the current value anywhere in the application reactively by putting a dollar sign in front of it for example we might say if current user
Render the text signed in as current user dot username now the question becomes how do we sign in a user well let’s start by creating variables for username and password then create an HTML form that has two inputs for those values and it’s felt we can easily bind
The variable to the form value with the bind value directive now we can access the current form value in our script let’s create an async function called login that awaits a call to the pocket-based collection of users then calls the auth with password method using the username and password as
Arguments and that’s all the code it takes to authenticate a user however we don’t have a user yet which means we’ll also need another function named sign out and this function we’ll set up some initial data for a new user like the username password and we could also pass
A name and email address here as well or whatever custom Fields you configured in Pocket base we can then take that data and create a new record in the users collection once created we call login with that same user data and that’s all it takes to sign up but it’d be a good
Idea to wrap this in a try catch block and render an error message if a bad username or password is used we also need a sign out function which is accomplished by calling auth store clear now let’s go into the HTML and bind these functions to buttons which is
Accomplished and spelled with on click and as one final touch I’m also going to listen to the on submit event on the form and prove prevent the default action so it doesn’t refresh the page when submitted now let’s open the app.spel file and declare the login
Component there if we view the app in the browser we should now see this login form and when you enter a username and password and click sign up the UI should automatically re-render to show the current user’s username and now we’re finally ready to build the fun part the
Real-time chat messages feature let’s go ahead and create a new component called messages we can import the on Mount and on destroyed lifecycle hooks from spelled as well as pocket base our first goal here is to fetch the most recent messages which we can represent initially as an empty array from there
We can fetch the messages when the component is first initialized with on Mount and this code will run once at the beginning of the component lifecycle to make a query to the messages collection use get list to fetch a paginated list of messages that starts on page 1 and
Has 50 messages per page it also takes an object where you can do things like sort and filter the query in our case we want it sorted by that created field what’s really cool though is how easy it is to join in relational data remember every message has a user field that
Points to a user record if we want to also include the user data on every message we can do that with the expand option and that means we get all the data we need without any complex SQL joins now the return value is a result list and we can set our messages array
As the result list items from there we can go into our HTML and loop over the messages with a spelled each block notice how for each message I have the message ID in parentheses this creates a keyed Loop so svelte can keep track of all the items in the list to render them
More efficiently for each message I’m going to render out the message text in the database and also because we join in the user I’m going to render out the user’s username and also generate a unique avatar for each user using an awesome little service called dicepair
Let’s go ahead and try it out in the browser I also have the pocket based admin UI side by side and as you can see here it fetches all the messages from the database that’s pretty cool but how do we create a new message message let’s
Go back into the code and set up a variable for a new message then Define a function called send message for a data we’ll need the text of the new message and also that current user’s user ID remember we can always get that by putting a dollar sign in front of it
Because spelled is awesome and now we just tell pocketbase to create a new message let’s go ahead and take this function and bind it to the on submit event on a form that also prevents the default action and binds the value of the text to that new message variable
Let’s go ahead and open it up in the browser again and try to create a new message as you can see here it creates a new message but we need to refresh the entire page to actually see the message and that’s not going to fly for a
Real-time chat app the final thing we’ll do here is make these messages update in real time let’s go back into the on Mount callback and then we’ll call pocket base collection messages and subscribe to the entire collection with the star symbol this allows us to run a callback anytime a message is created
Updated or deleted the action tells us what happened in our case we want to update the UI if a new message was created or deleted when created we can update the messages array with that new record one caveat with real time though is that it won’t include that expanded
User record although we can easily fetch it with a get one query if needed then for the delete action we can filter out the ID of the message that was removed that gives us a real-time listener but whenever working with real time it’s a good practice to unsubscribe when the
Data is no longer needed because otherwise you could end up with memory leaks and unnecessary reads on the database create a variable to represent a function named unsubscribe we obtain this function from pocketbase when making the call to subscribe once we have that function as state we can then
Call it on the on Destroy lifecycle hook to end the subscription when the user logs out or if they navigate to a different page let’s open up the browser and try it out you should now have a chat application that updates the messages feed in real time and now we
Can run npm build to build our site for production and deploy it somewhere on the internet in fact because we have a single page application we could actually do this online node by uploading the generated files to a storage bucket then configuring it as a static website host the final thing you
Want to know is that as your website grows pocketbase will need to scale vertically with more CPU and RAM to handle more and more traffic this can be easily accomplished by simply resizing your lanode a bigger server can handle more traffic it can easily handle tens of thousands of concurrent users and
Should be more than adequate for the vast majority of projects out there this allows you to fail over and over again as a developer without a bunch of wasted time and money as collateral damage thanks for watching and I will see you in the next one
#built #chat #app #Pocketbase #Svelte #scale
For More Interesting Article Visit : https://mycyberbase.com/
