Astro Explained
Vložit
- čas přidán 18. 09. 2023
- The Astro crash course.
💬 Topics:
- Building an Astro App;
- Layouts and templating in Astro;
- Astro Frontend Integrations;
- Build an Astro + Solid JS app;
- SSG vs SSR vs CSR;
- What is the islands architecture;
- Astro file system based routing;
- Astro endpoints;
- Turso database & SQLite.
#javascript
Patreon: / awesomeclub
Another great video! Straight to the point and still easy to understand as usual!
Thank you!
Great zero-to-Astro vid!
Nitpick: Instead of using a section to wrap form elements, a form will enable other fields than the save button to submit the form. Instead, use the onSubmit on the form. The example given in the video may even warrant using a plain old form without Solid JS, because of the simplicity in the implementation.
I never really got the sentiment that Astro is a good replacement for full-stack applications, at least not in the same vain that Next.js is. As soon as you needed authentication, the only resource I was able to find was a hardly maintained OSS library. Looks like there's an Auth JS core library now, which could possibly be made into a video.
Do auth on your server. I have built like 4 production apps for my clients with astro they are super fast and responsive even with complex forms and dashboards. Astro is a very good "Full stack" framework for most apps.
Btw next or sveltekit are good where the user sessions are more than an hour or two but for all other sites and apps astro is very much sufficient
Edit: lucia auth is very good for authentication or supabase works well too
Thanks for the zero-to-Astro suggestion. I'm gonna steal it for the Video title 😅
You are right about the issue - I appreciate you pointing it out!
As a junior dev, some of this is really hard to wrap my head around, but everyone raves about Astro, so I would love to learn more about it. I guess i'm just having a hard time understanding what benefit there is from using Astro with your existing framework (such as SolidJS).. Am I dumb?? BTW congrats on your work with the Deno YT channel! As always, great vid!
Thank you!
So Solid JS will only tackle the CSR part of your app (the stuff that runs in the browser).
With Astro, you can employ the server in the Rendering process, and also run other code on the server for various purposes (database work, rest APIs).
Here is another video explaining the SSR & Hydration process - czcams.com/video/kZG3izJu7qE/video.html
Also, my next video (will be released tomorrow) discusses SSR in more detail.
Don't worry if things don't click fro the get go - there are a lot of concepts and tools used in web development these days. Just stick with it. Good luck!
bro im planning to create a new blog website of mine and im having analysis paralysis between nextjs and astro, im from react. i cant decide.
What software do you use for animation? I like it and would like to use it.
Hey! I'm using the Adobe Suite (Premiere, Illustrator, Photoshop, Rush)
I've been using Astro and it's honestly not anything mind-blowing, it's just fine. It does some neat things but it needs better TypeScript support and better props support for its own .astro components. I can also see how its documentation can also be a bit confusing for web dev beginners, particularly figuring out what runs on the server vs what runs on the client. We'll see how it matures.
This is a fair assessment!
Everything runs on the server and any components with client directives run on bot client and the server unless you use client:only
I don't understand what you mean by props support but assuming you meant ts support for props just do something like
interface Props {
name: string;
...your props here
} in the front matter script ( or whatever it is called ) and you get full type safety when using.astro components
Yeah, improved TS support would be great.
@@christopherkapic wdym ?
@@christopherkapicTS support is pretty great. Better than expected.
Which vscode theme / UI plugins are you using? I love how your editor looks.
Hey!
The code in the video is not actually in an editor - it's a combination and styles and graphics, all mashed together in Photoshop.
My goto editor is IntelliJ Idea with its recent modern UI update.
@@awesome-coding Oh! Disappointing! Ever thought of making that into a theme? :D
Great job on the video btw and thanks for answering!
@@TheBejbiborn well that theme already exists and it is called one dark
Edit: the file explorer is an imaginary movie magic so I don't know how you'd achieve that in vscode
Another great video. How would you compare this to remix?
Thank you!
Remix is one of the OGs in the space. However, I feel there is more flexibility and momentum behind Astro these days.
OG? Isn’t remix fairly new (having just reached 2.0)?
@@stln768 They actually first released it back in 2020, but you had to pay to use it. They came up with a lot of new ideas in SSR, and frameworks like Astro, SvelteKit or Solid Start drew inspiration from it.
@@awesome-coding I suppose that “new” is relative when it comes to JavaScript frameworks. 😆
Don’t you feel that remix still is better for full stack dynamic applications and Astro is a better fit for content focused sites? (As stated in the docs)?
Not trying to argue here, just trying to figure out if it’s worth it building a poc in Astro or if I should just stick to remix.
Great, can you do this app in remix 2 (released week ago) a compare these two frameworks?
I'm working on a remix 2 video, which should be out next week.
Islands and hydration in Astro look a little bit overwhelming. Why not just to use Nuxt with it's versatile composables?
- less data needs to be transferred
- no reliance on Vue + Nuxt ecosystem
- also ability to use something like alpine with its 6kb of data
Nuxt is bloated af
Video immediately makes me think Fireship. Similar style but slightly longer video. Inevitable that his style would have been "adopted" for these kinds of videos.
yep.. if you have a “faceless” channel, the tools you can use are rather limited
I saw solidjs in integration part of astro config
Whats your tech stack for editing these videos?
Hey! This one was made with Adobe Rush for video editing, Photoshop for the actual graphics and a LOT of manual work 😅
@@awesome-coding Adobe rush ? What !
@@TechBuddy_ Smooth and easy 😅
@@awesome-coding cancelled. Unfollowed. Unsubscribed. Flagged as inappropriate. You are a racist. /s
Pls more about Astro fullstack
Sure thing! More to come!
We need a moratorium on new JavaScript frameworks. It's getting beyond ridiculous.
😅
Holy crap that was dense 😯 awesome work ❤ you are copying beyond fireship now 😂
Thank you! 😅
im just here to say
QWIK
but nice video on astro, looks very cool, but to me nothing seems to be cooler than qwik and what it does in the background for the dev
Fair enough!
I like Astro more because of the dev experience.
Hi, do you provide link to github project?
Hey!
I don't have a repo for this specific video, but here it is a repo for a past video I did on Astro - github.com/awesome-club/awesome-astro
@@awesome-coding Thanks :)
bun bun bun
😂 suspenseful music intensifies!
Nuxt, is this you?
😂
This looks similar to svelte
It is more similar to the SvelteKit, in the sense that they both address the same issue.
In the video I used Solid as the UI integration, but you could use Svelte instead of Solid, or both of them at once.
@@awesome-coding I'm still learning svelte (not sveltekit yet), it seems fun for now, the one thing I don't know if possible is exporting multiple components from the same . svelte file like in react I used to make custom form input components in the same file, then export them individually since there's different kinds of inputs needed so making one custom input with ton of props is unreadable when compared to simply making seperate individual input components in the same file, is that possible?
Like in a Inputs.svelte can I export a normal Input tag, a custom input for password, a custom input for telephone number, one for email, one for date etc?
@@blackpurple9163 exporting multiple components from a single file is possible but writing then in the same file is not
Create a new file say inputs.js/ts and do
export { default as EmailInput } from "./EmailInput.svelte"
export { default as PwdInput } from "./PwdInput.svelte"
You can now import that from another svelte file like
import { EmailInput,PwdInput } from "./inputs"
..
To astro or to next hm......
To astro!