Life is easy with Solid JS, Tailwind and PocketBase
HTML-код
- Опубликовано: 20 янв 2023
- Build an app with Solid Start, PocketBase and Tailwind CSS.
💬 Topics:
- Working with Solid start;
- Working with PocketBase;
- Working with Tailwind CSS;
- SQLLite tables & collections;
- Real time notifications;
- Styling and utility classes.
🎈Other links:
- More about PocketBase - • Backend Dev Is Easier ...
- More about Tailwind CSS - • Is the Tailwind hype l...
- More about Solid Start - • Solid JS just got better
- Github Project - github.com/awesome-club/solid...
![[DOKKAN BATTLE] August Producer's Letter](http://i.ytimg.com/vi/JUTYpaV_4Ic/mqdefault.jpg)
i've tried this exact tech stack for a small project and i think it's the definitive stack for small apps, everything is done very quickly with it. if SolidStart matures i think pairing it with something like Supabase might make for a solid (pun not intended) stack for complex apps in the future
Right! I think there is a lot of potential to scale things up with this one.
Even PocketBase might turn out to be suited for larger apps in the future - they are still at version 0.1, so there is a lot of room to improve things.
The combination is legendary.
Great video as always, thank you. This rapidly becoming one of my favourite dev channels. Thanks also for the amazingly useful Inline Fold plugin heads-up - one of those plugins you never knew you needed until you use it, and then you wonder how you ever coded without it. I would definitely recommend setting a key-binding in VS Code to toggle it on and off though - sometimes you do need to see all the Tailwind in a file at the same time..
Thanks for the kind words, Matt!
I know, right? the HTML clutter was the main issue I had with Tailwind. Inline Fold does such a great job to hide all that away. Good point regarding the key-binding!
Keep up the great work. I love your content.
Thank you for the kind words!
Easy (read 'great') video :D Thanks!
Great vids! Keep it up
Thank you!
It's so crazy how easy it is to do realtime collaboration these days.
@bigmistqke I know, right? I remember the days of long polling, and then how my mind was blown away by websockets, even though implementing them was a real pain both on the backend and on the frontend at first.
@@awesome-coding ye ngl, until last month i thought for realtime collab we still had to go through all the websocket-hoops... But then i did a small project w firebase and i was just blown away. Ur video inspired me to play around with the other bases too!
@@bigmistqke I get what you are saying. This is one of the main reasons I started this channel - I was getting so comfortable in my Kotlin + React world that I started to believe I have all the answers :) Now I'm "forced" to explore other options and ideas, and it has been mind blowing at times.
iti multumesc foarte mult pentru acest video!
Cu placere! :D
I fucking love this video!! Like holy shit! Thank you for making it. If you could do more with this same tech stack it'd be amazing. You could easily make a course on it and I'd happily pay
Haha! Glad to hear it!
Will definitely work on more content like this. It is one of my favorite tech stacks these days.
I think i've been looking for this kind of simplicity in stack (tool-set) choice: Simple yet robust frontend for UI, ready made backend + CSS lib, and that's it(!)
Seemingly rarely some shiny dev on public platform talks or reasons beyond conventional stacks we have for a long while now (MEAN, MERN .. and all these names invariably propose Mongo), and hearing talk like this one feels to me like breath of fresh air. Nowadays world's increasingly demanding flexible yet FAST and less expensive solutions to business needs, so Thank you!
My question is: how flexible potentially this stack thing is to build all kinds of apps, including say CRM like systems, POS terminal, E-commerce module etc (not talking about scale yet, though assuming it fits small to average entrepreneur)
Hey! I honestly believe that Solid and Tailwind are production ready, and can handle any kind of application ranging from small side projects to enterprise software.
I can't guarantee for PocketBase yet, because it still is far from a stable v1 release. PB can act as a framework as well, and if you are familiar with Go you can extend its functionality fairly easily, which is a plus and gives you a lot of flexibility to handle more complex scenarios. I have my doubts about SQLite though. I would love to see PB support other vendors (such as PostgreSQL for instance) as well. If they figure that one out, I'm pretty sure PB can handle any type of load.
Authentication and authorization. Thanks!
@devcaio I'll add it to the list! Thank you!
@@awesome-coding Yes please, and using the same tools as this vid.
@@MarkConstable Will do!
Great video. Thanks a lot. Please add advance settings with PocketBase such as authentication and deployment.
Thank you for your feedback! I have more PocketBase content planned for the following months!
@@awesome-coding Great! Looking forward to it.
I use Svelte instead of Solid, I'm not used to JSX, but definitely a great stack 👍
Hi, what's the (assumably) plugin you are using, which hides the css in vscode? 6:22
Hello! Inline Fold - marketplace.visualstudio.com/items?itemName=moalamri.inline-fold
@@awesome-coding Thank you, helps alot!
I am very interested in learning vue, solid, qwik, and svelte too
Dumb question, but do you still need a server to handle routes and serving the JS app initially, or is that done with pocketbase as well?
That is handled with Start: the meta framework for Solid
@datguy4104 There are no dumb questions :)
@Solanaceously is right. Server routing and rendering will happen in solid start, in the part running on a node js server to be more exact.
Pocket is a golang server running on a separate process.
yep my stack rn is sveltekit with skeletonUI(tailwind) and pocketbase/strapi or supabase as a backend , and rust/python for some advanced custom apis and that's it
Nice! Do you recommend Rust? I want to learn some new languages, and Rust is on the short list.
after the new policy idk , but it is exactly what i was searching for , compiled static typed , fast as c , good syntax with functuonal programming paradigm with gr8 buildins and ecosystem , lsp , compiler , cargo ...
Is there a way to build the solid start project and then run the pocketbase at the same time using only 1 script??
Sure! You could use a npm package such as concurrently (www.npmjs.com/package/concurrently) and then run the commands in parallel.
I like mpa spa-like, but I don't want a fullstack framework. I always in doubt if using metaframeworks like Astro or SolidStart is overwhelming and I just have to using solid-router, or if made trough about the spa-like experience.
I'm actually sold on Astro. It saves me a lot of headaches. I honestly don't see me starting a new project without a meta framework these days - preferably one that does a lot of JS delivery optimisations for me.
@@awesome-coding I finally made hello world projects with the 2, for me astro is not what i'm looking for, it really is a mpa that support reactive frameworks, but not the spa xp. Solid Start solves a problem that I have with solidjs, smooth transitions between pages (remember me when i was using client-side router in ReactJS).
How would you recommend hosting pocketbase?
Hey! They have some explanations about going to production here - pocketbase.io/docs/going-to-production/
Probably using docker is the safest way.
Please remember though that PocketBase is still in its early stages of development, and is not yet production ready.
Awesome 🙌. Please share github link 😬
@mainendra7785 Sorry about that! Here it is - github.com/awesome-club/solid-pocketbase-tailwind.git
starter repo examples will be good in the future
@naranyala_dev Thanks for reminding me :) Forgot to add it in the description.
Github repo here - github.com/awesome-club/solid-pocketbase-tailwind.git
Could have used the Show component instead of writing conditional statements directly in the jsx.
Yes, you are right! Thank you for pointing it out.
I guess React habits die hard 😩
@@awesome-coding Can relate. 😆
Plz guide on setting up pocketbase auth
Will do for certain! I'm planning to work on a more detailed video regarding auth in web apps. In the meantime, you can find more about the basics of pocketbase auth here - ruclips.net/video/HlA3Pl8YkRg/видео.html
i thinking it is time for tailwind to be replaced by unoCSS
Nothing like some solid peanut butter smelling in the wind
:))
HTMX + Tailwind😈👍🏼
amazing stack
Do more about Auth pls
It's on the list! Thanks for sharing your thoughts!
Why not appwrite ?
I don’t have that much experience with AppWrite, but I know they are self hosted and pretty powerful.
I went with Pocketbase because the theme of the video is simplicity. Of course, this simplicity comes at a price, and PB doesn’t have a reach feature set (yet - they are still in early development), but it’s more than enough for prototyping or building smaller apps.
For more serious / complex projects, a more mature BaaS solution would be a better fit for certain!
I love pocketbase... locally at least. Going to production is a pain in its current state as there is no simple way to migrate your schema
Ah, good to know
There are some tools allowing you to migrate SQLite, but, I agree, it's far from a mature solution.
Let's keep in mind though that PocketBase is still in its early dev stages, so I expect this stuff will improve in the future.
You can migrate (import/export) the schemas through JSON
I you want make it more simplier use picocss
This is the second time this week PicoCSS is recommended to me 😅. Thank you for the suggestion, I'll give it a try!
Pocket base is neat but Supabase is way better and way more scalable and just as easy.
@konga8165 - I agree, Supabase is more mature and powerful. (I actually posted a video about it a while back - ruclips.net/video/9CuTxeioKF4/видео.html)
What I like about Pocketbase is its overall simplicity. You download a 14mb executable file, and you gain access to a pretty impressive set of features in no time. Another benefit is the option to use the library as a framework you can extend on your own. I think there is a lot of potential here!
@@awesome-coding Definitely agree. It's excellent if you do not want to use 3rd party services.
Replace Solid with Sveltekit.
Thanks for the suggestion! I spent some time looking into Svelte and Kit, but I'm still a bigger Solid JS fan
Not even a demo.......?
@oussama40612 Sorry about that! Here is the github repo - github.com/awesome-club/solid-pocketbase-tailwind
Even though I agree with the overall spirit of the video (make it simple), I completely reject the idea that building an app on top of projects that are still in beta (pocket base, solid start) make life easier. Infact I'd argue it makes it hard and annoying.
I fully agree - PocketBase is not ready for production yet. It could be easily replaced by Supabase or Firebase for know. I'm experimenting with various new tech on the channel, and I think PocketBase deserves a shoutout because it really is so easy!
Anything that adopts react nonsense syntax must be banned, so react, next and solid libraries must be banned by governments.
@Almighty_Flat_Earth I'm really curious at this point - why so much hate for React?
the amount of ads here is crazy couldn't even see the video
boaring solid.
svelte is king.
I like both equally ✌️