It Doesn't Get Easier Than This
Вставка
- Опубліковано 5 січ 2025
- Building a full stack app with Astro JS, Solid JS and PocketBase.
💬 Topics:
Backend as a Service with PocketBase;
Authentication;
Real time APIs;
Working with Astro JS;
Styling with SASS;
Working with Solid JS.
🎈Links:
Solid - • Solid JS is a game cha...
Astro - • Astro JS is here to stay
PocketBase - • Backend Dev Is Easier ...
GitHub Project - github.com/awe...
#javascript
15 years of development experience, but he calls astro a meta-framework, lol ok
Just for my educational purposes - what is Astro then?
pro tip: whatever you call things doesn't change their functionality
Now I actually got curious about the definition. I call it a framework. a UI-agnostic framework
@@waltermelo1033 Fair enough.
@@waltermelo1033 My reason for calling it a meta-framework is the following:
Using the Astro "glue" you can integrate and use together multiple existing frameworks like Vue or Svelte (astro.build/integrations/?search=&categories%5B%5D=frameworks ).
In my mind this puts Astro on layer higher than the frameworks it can work with, hence the use of the "meta" word.
Thank you for this project! first time learning pocketbase , solid js
I'm glad it was helpful!
@@awesome-coding I wonder if I could get full source code and it is fullstack but you shorten it in 9 minutes, so a bit overwhelming
I've had great success with astro/htmx/alpinejs, very simple mental model, good server and client seperation while still allowing all the features of things like server components, suspense, client side spa like behavior, server side only by default, all the things.
Not that it was the hardest thing on the planet before, but with evolution of frameworks and services it is indeed becoming easier and easier. Time to rethink web dev as a career and move to some other field where you still actually need to learn stuff instead of plug-and-play type of activity that web dev is becoming.
Don't get me wrong, I have nothing against ease of use and productivity boost that this tools and services offer. I am simply referring to the fact that the demand for web devs will rapidly decline since many features that used to require development time will simple be available as a service that you simply plug via sdk. This will allow businesses to hire less developers to accomplish the same tasks. And at some point we are gonna get AI powered web builders too so it won't be much better situation on UI/UX side of things.
Better get into Game development
Its more about logics
@@ryanlog Maybe. Although I am more inclined towards Embedded programming since I have some background in electronics and power engineering.
The Major problem with PocketBase is that it uses SQLite & u can't change the database. Problem with SQLite is that it can only scale vertically... and not horizontally so... would cost alot if project gets big
Right! I agree that horizontal scaling is a must once you get to a certain point, and the traffic is higher.
The way I see it - PocketBase is a great tool for prototyping and early stage products. If your vertical scaling is not enough for your needs, I'd call that a problem I would love to have :))
Software is refactor / rewritten all the times so you can just transition out of PocketBase if the product "goes big".
@@awesome-coding Right ! Thanks to the ORMs available, one can easily migrate from 1 database to another
Btw bro I haven't found any good databse migrartion video on any channel
Please upload a video where u migrate your project to popular databases & clouds using Prisma as ORM. And Do include Pocketbase
That tutorial gonna be lit 🔥🔥🔥🔥🔥
@@ryanlog Will do! Thank you for the suggestion!
Heard abot marmot?
@@rohitbokade5771 Nope. What's up with it?
This content helped me grasp the topic better!
Glad to hear!
Congrats on getting to 10k subs!
Thank you so much!
Amazing video! Thanks so much. I discovered your channel today & subscribed
Awesome! Thank you!
I use astro+solid for a simple side-project. The biggest gripe I have with this stavk is the lack of good primitives library for solid. I had to dig into radix's accordion to make a nice looking one in solid. While I like tinkering and enjoy k owing more about this simple web component internals, it took me some time...
I agree with this. Clearly there are some missing pieces, especially compared to a React or Angular stack, but I believe we'll see more 3rd party libraries in the Astro + Solid world soon enough.
@Awesome it's really tempting to port radix to solid or help on solid-aria efforts... but it looks like first, there should be more interest, and then people and efforts will come. Tanner Linseley alone can't carry all framework-independant libraries anyway :)
Maybe im wrong as i am a Java dev who tries to start getting into web dev. But if my research didnt fool me what youre looking for is "ZOD" isnt it?
Its hard to get into JS with all this framework hell, but maybe i finaly found what i like and hope to get it working:
Solid + ZOD + Typescript + TailwindCSS = Frontend
Java + Spring Boot = Backend
Then i can have the coolest web apps while still staying in my java world kind of lol.
I love how you have component logic inside of the actuall component and below that the UI implementation. Thats like my favorite part about solid
@@Keptainsall these frameworks make your webapps "cool" is it?
@@gerooq with "cool" i mean ofcourse modern and good looking UI. Coming from Java with templating engines and HTML the things you can do with JS and their frameworks i would say the results are usually cooler yes
Great video. Really enjoyed it. Keep up the great work 💪
Thank you!!
In my experience it's not for all applications. It handles static websites quite well, but astro compiler struggles when theres a lot of javascript
Interesting. I never had issues with JS heavy apps yet, but you might be right.
Anyhow, Astro is working on improving the Client Side Rendering processes, and they are even adding a frontend router. So I expect things will improve.
Curios why you dont have an object in the signal rather than bunch of strings and callbacks to update just that string. Why not just update the objects keys value? Haven't used Solid yet cuz of work and time but I want to try -- and watching your videos I noticed this and wondered.
This would be a good approach as well. I find the separate values approach cleaner,.
If I were to used an object I would first declare a TS type or interface for that object. Then, whenever setting a new value, I'd have to use object destructuring, so, overall, I believe it's cleaner to simply use separate signals. Just my two cents ✌️
@@awesome-coding I get what your saying. I just thought maybe there might of been another reason I may be overlooking. Personally I have a rule of thumb I try to keep say one state per component so say I have form with 3 fields instead of having 3 states it be one state and yeah. That's programming everyone has a style 😅
how will pocketbase scale with SqLite DB
Sadly you can only scale it vertically at this point :(
Thank you. More video on solidjs and packetbase please.
Will do! Thank you!
Why Astro instead of SolidStart? You can do SSG with that, too.
Astro is more mature, and library agnostic. You could use Astro with Solid, or Svelte, or React or a handful of other options. Solid Start is actually going through a refactoring process where they'll use Astro under the hood as well.
Hey man, I enjoy your videos as they align with many of the things I'm interested in. If I can offer a small piece of (hopefully) constructive criticism, I find the cadence of your commentary a bit distracting, especially the tonal rise at the end of every pause in your sentences. I know that perhaps it's not the easiest thing to change, but I believe a slightly more monotone way of talking would be a beneficial for both comprehension and less distracting. Keep up the great work!
Hey!
Thank you for your feedback - I really appreciate it.
Indeed, I know this is an issue, but I find it hard to fix without ending up sounding "too boring".
Working on it though, and I hope it'll get better in time.
Thanks again!
I was planning to expand the Pocketbase routes so I can have a client side chat app with Astro.
I don't like waiting for the openAI's answer on the edge functions, it costs money to loiter...
Pocketbase and Astro are amazing. I paired pocketbase with Svelte as well. Hard to beat.
Everybody is praising Svelte. I just can’t get over their custom templating language 🥲
@@awesome-coding I personally think that's one of the perks!
@@name_less227 Oki, I'll force myself to give Svelte another chance :D
@@awesome-coding You won't regret it!
What are templating engines
Will do in a future video 👍
Thank you for the video. Would it be possible for you to create a lengthier (30 mins to 1 hr) step-by-step code-along video? It could be a simple ToDo app using PocketBase, Astro, SQLite/Postgres and any frontend framework (React/Svelte)? Thanks again!
Hey! I'm actually considering creating some long form videos in general (30 - 45 mins) with in depth coding sessions. However, these are not very "catchy" on youtube, so I need to figure out a good way to post them.
How about making it a series?
Another informative vide man 🎉
Btw, how do you deploy your pocketbase instances? Or are they just in local?
Thank you!
The easiest way to deploy PocketBase instances it is to just upload the executable on the server, and then youse a process such as supervisor to keep the process always running.
A more proper way would be to create a docker image deployed in AWS. You'd have to take care of your own database backups - but that's straight forward.
They have a "Going to production" section in their documentation which provides some more information - pocketbase.io/docs/going-to-production/
What is the difference between using astro ir sveltekit
Honesty? Not a big one these days. Astro excels when it comes to some performance metrics. Also, it is more flexible since you can choose different UI libraries to work with.
SvelteKit fully locks you in the Svelte world.
maybe once the clientside routing is available , astro will be better
I may end up using the KISSS stack (Keep It Somewhat Simple Stupid - Astro/Solid/Supabase) on a side project if I can be sufficiently convinced that this stack can have the snappy reactivity of a NextJS/React App and can support features needed in this particular project such as global state and pop-up modals.
Hey!
1. I believe any Solid stack will be by default more snappy / reactive than a React stack. Reactivity is a pretty complex topic (I'm discussing it in more detail here - ua-cam.com/video/XB993rQ-5DY/v-deo.html). Long story short, React uses dirty checking (diffing VDOM snapshots) and has the component as the smallest reactive unit, while Solid uses the Signal as the smallest reactive unit, and removes the dirty checking step from this process by being able to target signal changes to direct DOM updates.
2. Solid's signal's based reactive system is scalable, and they offer a store solution out of the box (which helps you handle global state more efficiently than the Context API / Redux / Recoil alternative).
3. Modals are handled by all UI libraries, and the element is standard in HTML for quite a while now.
Yeah, i personally liked the idea of that super-slim stack when saw your video about Solid+PocketBase, then i thought it'd be great to make case for another stack (we have MEAN, MEARN etc. today) and name it something like "min stack" (minimal), keep it maintained and grow community around, cos that sounds very promising..
And now its Solid+Astro+PB (!!)
I'm personally looking for some complete yet minimal (lightweight) yet with no big learning curve, suitable to solve administrative, smallerEntrprise needs firstly (as opposed to website building).
Want to keep SQL type dbs, but perhaps the best tool i've found so far (for myself) is Redwood fullstack, but again it is not really minimal (in terms of stack) or super lightweight, and my modest laptop freezes sometimes..
I actually looked into Redwood, and I was discouraged by the project structure you end up with after the setup 😅
Hi there, I loved the video, though I have a question. Isn’t Astro a bit unnecessary since almost everything on the app is client side? Wouldn’t be better to just use a plain solidjs? Keep the good work! 👍
Hey! You are right - for this specific example there is no good reason to use Astro. However, if you are planing to work on a larger project, it's always better to start from the beginning with the mechanisms that allow you to do SSR later on.
@@awesome-coding gotcha! Thanks :)
Awesome!!!
Server side rendering please
Will do!
6:40
Form with button onClick. You are the one who doesn't let me submit with enter from inputs
Guilty 😅
Where and how are you deploying this?
PocketBase does not have a dedicated deployment solution. The easiest way to do it is to just upload the executable on the server. A more proper way would be to create a docker image deployed in AWS. You'd have to take care of your own database backups - but that's straight forward.
The Astro project can be easily hosted in Vercel or Netlify.
Great video
Thank you!
Guys where i can deploy my pocketbase executable for free ?
Take a look at this service - pockethost.io/
@@awesome-coding major W
another pretty good stack would be directus + nextjs
Thanks for suggesting it!
I want a Smooch Stack
I don't know what it does, but I like the name of it 😅
That `send` method blew the whole video 😆
I know... 🤦♂️ Well.. I said simplicity is not always easy 😅
I very like your videos. helps a lot to be sync with FE stuff 💪 but... This code is so not testable 😅 this is great issue in FE world.. We should work really work more with TDD!
Noted! And you are right - I'm adding some testing related videos to the todo list :D
Thanks for the feedback!
As a beginner, i dont really understand. Please make video for solidjs and packetbase. Tnx
Will do!
Where you are from? You remind me of Pedro from Napoleon Dynamite.
😂 I’d say I’m hurt, but this is too funny! I’m from Romania✌️
@@awesome-coding Haha. Was just meant in good fun. Love your videos.
@@awesome-coding I'm romanian as well and wouldn't have guessed!
@@tears_falling Have u guys ever met Andrew Tate ?
@@ryanlog No, I did not 😂
i changed Solid with Svelte Js
Fair enough!
Simplicity and frameworks are the opposite things
Oh c'mon.. Solid is pretty simple :)
Pls explain ssr in astro 😢❤❤
Noted! Will do in a future video.
In the meantime, I did some general SSR explanations in this video - ua-cam.com/video/cLivMMSeFgE/v-deo.html
a better stack is next + trpc + pocketbase
trpc + pocketbase sdk?
@@awesome-coding yep, next -> trpc -> pocketbase, i think it's the highest development velocity stack right now.
requests never hit pocketbase directly, only through next, so the user facing surface can be tightly controlled.
i love pocketbase for its extensibility, performance, and ease of use, but i don't feel comfortable with users hitting the API directly yet, and you probably need a frontend, and it should do SSR anyway, so next is the clear choice.
and stuff like pocketbase-typegen and other cool toys make it a breeze to work with.
i can get an idea and ship a solid app with users, third party login, migrations, etc in weekend, when it would take me at least two weeks before (also because it was not fun and i would end up not working on it)
/tldr explore it, it's really awesome, i think you'll find it's the shortest path ever from creating a table for storing some kind of user input to having a form in your frontend that users can register data through, while being safe, fast, and end to end validated :praise-zod:
@@andreineculaesei2394 Thank you for the detailed explanation!
trpc with next 13?
@@denissorn yep, been using this stack with next 13.3, but I don't plan on using server components after upgrading to 13.4, though calling pocketbase would be a great use case for that for those who miss the php vibes 🤣
Sus
Sussy baka
Wow. Bro pulled the worst possible example of all times
what do you mean?
@@awesome-coding you created 3 different SPA using a MPA framework. Forms are made using solidjs. Requests are made from the client to the backend and storing the tokens on local storage.
You basically used Astro as a router and took the most difficult path to do anything.
Wdym
Record about PHP
That would be an interesting video for certain. I used PHP probably around 10 years ago - I'd have to get up to speed with the updates that happened in the paste decade. 😅
@@awesome-coding Drop eye on php 8
@@awesome-coding I just got back into Laravel after a decade of node. Feels amazing.
@@name_less227 Will do! Thank you!
Try Nhost for backend
noImplicitAny --> false, strictNullChecks --> false
*(enjoy)