Astro Explained

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

[@JaskierRezzo]

Another great video! Straight to the point and still easy to understand as usual!

[@awesome-coding]

Thank you!

[@sdvogo1520]

Best video about astro I've ever seen

[@awesome-coding]

Glad to hear! Thank you!

[@medivix]

I reach you content searching stuff about Astro but in the end I've learn how to use Turso a little too. You're as fast as Fireship but in the end, user can get a good idea about new tools: that's all that matter, thanks for your good content !

[@awesome-coding]

Thank you for your feedback!

[@armant11]

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.

[@awesome-coding]

yep.. if you have a “faceless” channel, the tools you can use are rather limited

[@casperengelmann4575]

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.

[@TechBuddy_]

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

[@awesome-coding]

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!

[@pawan29121991]

I saw solidjs in integration part of astro config

[@mawill432]

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!

[@awesome-coding]

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 - kzbin.info/www/bejne/oYuqZJywf9pqp6c 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!

[@allan_archie]

What software do you use for animation? I like it and would like to use it.

[@awesome-coding]

Hey! I'm using the Adobe Suite (Premiere, Illustrator, Photoshop, Rush)

[@MarekLichtner7]

Great, can you do this app in remix 2 (released week ago) a compare these two frameworks?

[@awesome-coding]

I'm working on a remix 2 video, which should be out next week.

[@samlee4958]

Im confused on something csn someone help? Let’s say you have a React component that you put into an Astro component and add the client:load directive. Does that mean the jsx for the React component is sent from the server as html and then just the event listeners are hydrated, or does the entire component revert to default React, where it sends as a blank html and then hydrate’s on the client?

[@awesome-coding]

1. The react component will be server side rendered, and sent as static HTML to the client; 2. The browser loads app the HTML and displays it in the page; 3. At this point the component is visible in the page, but you cannot interact with it. (it is just HTML, so no internal state or JS event handlers); 4. The browser finishes loading the page, so the Hydration process for your component (also named an island in this architecture) starts; 5. This means that React is also present in the page, and is used to rebuild your component on the client (process known as CSR); 6. Once the component is built, the static HTML will be replaced with the interactive DOM nodes.

[@MikeNugget]

Islands and hydration in Astro look a little bit overwhelming. Why not just to use Nuxt with it's versatile composables?

[@qwoolrat]

- less data needs to be transferred - no reliance on Vue + Nuxt ecosystem - also ability to use something like alpine with its 6kb of data

[@acopier]

Nuxt is bloated af

[@hoaxygen]

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.

[@awesome-coding]

This is a fair assessment!

[@TechBuddy_]

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

[@christopherkapic]

Yeah, improved TS support would be great.

[@TechBuddy_]

@@christopherkapic wdym ?

[@null_spacex]

​@@christopherkapicTS support is pretty great. Better than expected.

[@emptybottle1200]

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.

[@ways.]

I'm in the same place as you

[@stln768]

Another great video. How would you compare this to remix?

[@awesome-coding]

Thank you! Remix is one of the OGs in the space. However, I feel there is more flexibility and momentum behind Astro these days.

[@stln768]

OG? Isn’t remix fairly new (having just reached 2.0)?

[@awesome-coding]

@@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.

[@stln768]

@@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.

[@TheBejbiborn]

Which vscode theme / UI plugins are you using? I love how your editor looks.

[@awesome-coding]

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.

[@TheBejbiborn]

@@awesome-coding Oh! Disappointing! Ever thought of making that into a theme? :D Great job on the video btw and thanks for answering!

[@TechBuddy_]

@@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

[@sirisaac8727]

Whats your tech stack for editing these videos?

[@awesome-coding]

Hey! This one was made with Adobe Rush for video editing, Photoshop for the actual graphics and a LOT of manual work 😅

[@TechBuddy_]

@@awesome-coding Adobe rush ? What !

[@awesome-coding]

@@TechBuddy_ Smooth and easy 😅

[@TechBuddy_]

@@awesome-coding cancelled. Unfollowed. Unsubscribed. Flagged as inappropriate. You are a racist. /s

[@bobweiram6321]

We need a moratorium on new JavaScript frameworks. It's getting beyond ridiculous.

[@awesome-coding]

😅

[@kumekster]

Hi, do you provide link to github project?

[@awesome-coding]

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

[@kumekster]

@@awesome-coding Thanks :)

[@matanon8454]

Pls more about Astro fullstack

[@awesome-coding]

Sure thing! More to come!

[@ayoubkrt5018]

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

[@awesome-coding]

Fair enough! I like Astro more because of the dev experience.

[@TechBuddy_]

Holy crap that was dense 😯 awesome work ❤ you are copying beyond fireship now 😂

[@awesome-coding]

Thank you! 😅

[@blackpurple9163]

This looks similar to svelte

[@awesome-coding]

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.

[@blackpurple9163]

@@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?

[@TechBuddy_]

@@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"

[@allan_archie]

Nuxt, is this you?

[@awesome-coding]

😂

[@soumyaripan5131]

..

[@edhahaz]

To astro or to next hm......

[@awesome-coding]

To astro!

[@naranyala_dev]

bun bun bun

[@awesome-coding]

😂 suspenseful music intensifies!