Astro Crash Course in 20 Minutes!

Join the early access list for my course! learnastro.dev
Astro is a modern take on static site generators, but it's so much more than that! By default, it ships zero client-side JavaScript, so it's incredibly performant and ideal for content-rich sites. Better still, you can use nearly any UI framework for the markup and then only hydrate those components when they need to be interactive. Here’s the briefest of overviews in about 20 minutes.
🔗 Key Links 🔗
- Astro: astro.build
---------------------------------------
📹 Related Videos 📹
- Astro Live stream: • Live Code: Astro Stati...
- Astro Icon library: • Astro Icon Component (...
---------------------------------------
⏲️ Timestamps ⏲️
0:00 Introduction
2:28 Installation
3:04 Astro Structure
4:27 Astro Components
6:30 Layouts and Slots
10:43 CSS
14:10 Client-side JavaScript
16:49 Tailwind in Astro
18:14 React Components in Astro
---------------------------------------
🎨 VSCode Theming
- Font: Cascadia Code: github.com/microsoft/cascadia...
- Theme: marketplace.visualstudio.com/...
- Icons: marketplace.visualstudio.com/...
---------------------------------------
🌐 Connect With Me 🌐
- Website: codinginpublic.dev
- Blog: chrispennington.blog
- Twitter: / cpenned
- Patreon: / coding_in_public
- Buy Me a Coffee: www.buymeacoffee.com/chrispen...

[@astrodotbuild]

Astro seriously approves this message. Delivered by a true professional, such a great presentation of our framework, and thank you for the kind words. 💚🤘👩‍🚀🤘💚

[@CodinginPublic]

Thanks for the kind words and for the awesome framework! Go Astro! 👨‍🚀 🚀

[@jimitsoni18]

great work guys, I hope the yearly framework rotation in front-end ends with astro as the final choice

[@maikolhernandez9176]

You have such a great talent at explaining things... that was fluid and beautiful. Thank you so much.

[@CodinginPublic]

Very kind, Maikol! Glad it was a help. Go Astro! 🚀

[@nyashachiroro2531]

I've said and noticed this too. Lol I even asked if he took some public speaking course or something 😂😂😂

[@alexpiano]

A total teaser! thank you! I'll start following your astro series right now :)

[@CodinginPublic]

🙌

[@horusmabia8865]

This is one of the best introduction to a framework I've ever seen. I truly feel ready to be productive with astro. Thanks a lot for this awesome content!

[@CodinginPublic]

Glad it was helpful!

[@alittlegreyhair1104]

A great demonstration and clear explanation of Astro. Many thanks for creating this. Looking forward to Astro 3.0 later this week.

[@CodinginPublic]

Glad it was a help! Excited for 3.0, too!!

[@_ash64]

Starting to learn the Astro framework today! Appreciate the recommendation!

[@CodinginPublic]

🙌

[@omarjab]

you're really good at explaining technical things in such an easy way and also you're great at making it interesting to follow and not boring. im glad I found your channel today 🖤 you gained a new subscriber

[@CodinginPublic]

That’s so kind, Omar. So glad it was a help! Welcome!

[@nyashachiroro2531]

This channel is on it's way to becoming one of the best coding channels ever.

[@CodinginPublic]

🙏 very kind. Glad you’re enjoying the channel!

[@jayadky5983]

Amazing video man! Really interested to try Astro out for my next projects!!🔥

[@CodinginPublic]

Astro is the best! So glad you enjoyed the video.

[@bulelanibotman]

my god! i am really really interested now esp the island concept, running JS when the client is visible is awesome!

[@CodinginPublic]

It's such a good dev experience, too, for being such a good client experience.

[@uneverknow260]

One of the best frontend and Astro crash courses to ever exist. It is straight to the point. Covers every important topic in detail too. Thank you so much!!!

[@CodinginPublic]

So glad you enjoyed it so much!!

[@RodrigoDAgostino]

The way you teach and explain things is something hard to come by. So thank you for your valuable content and thank you for spending so much time going through very valuable technologies like Svelte and Astro :) Subscribed!

[@CodinginPublic]

Hey, that's so kind! So glad you enjoyed it! Thanks for taking the time to say something.

[@RodrigoDAgostino]

@@CodinginPublic it felt like the least I should do :) I’ve been going through your content since I found your channel (I have no clue why I didn’t run into it before), and I can’t wait to check your Astro Blog Course. Thank you! :)

[@felipegutierrez2944]

Your content is always awesome!

[@CodinginPublic]

That’s very kind, Filipe. Glad you enjoyed it!

[@CameronPak]

Great video! I Learned a lot!

[@CodinginPublic]

Glad it was helpful!

[@waqaskhandev]

Thanks for this video, it really gives full idea of how this framework works. I really like it.

[@CodinginPublic]

Glad it was helpful!

[@skb875]

As I commented before.. I have been wanting to play around with Astro, but I was scared and confused on where to start. This video was exactly what I needed. I love how quickly you moved through the steps, too. Can't wait for your longer series! Thank you :)

[@CodinginPublic]

Awesome! So glad it was a help!

[@viniciusalvess]

Dude you shine! Thanks so much for sharing such great content.

[@CodinginPublic]

So glad it was such a help! Thanks for saying something!

[@blokche_dev]

Already in love with Astro!

[@CodinginPublic]

Go Astro! 🚀

[@giroda]

I wish we had an option in youtube that we vote on the features of the videos and make the other video presenters could see, I would give the highest rate to the narration in here. One of the few videos ever seen in learning aspect without touching speed option or pause for any reason. It took my attention only once and kept it til the end like a water flow even in afternoon time which is the hours for me to learn something is not easy. Thank you.

[@CodinginPublic]

This might be the kindest comment I've ever received. Thank you so much for your kind words. So happy you enjoyed the video!

[@giroda]

my pleasure @@CodinginPublic

[@evelyn_ryan1]

Layouts and slots feels a lot like Django. Love it!

[@CodinginPublic]

It’s awesome!

[@ashuzon]

20 minutes is all I need as a developer. Thank you for the video!

[@CodinginPublic]

You're very welcome!

[@_the_one_1]

Awesome tutorial to get started with Astro!

[@CodinginPublic]

Glad you enjoyed it!

[@daniele.2944]

Astro is pretty darn neat. Going to have to give this a try on my next project!

[@CodinginPublic]

It's the best! Glad you enjoyed it!

[@user-kb6ck7gb6f]

Very simple and great. Thank you!

[@CodinginPublic]

Glad it was helpful!

[@oPatrickVico]

Awesome video! Thanks a lot.

[@CodinginPublic]

You are welcome!

[@adnanamin3666]

Much love & respect! 🙏🤟

[@CodinginPublic]

Thanks, my friend.

[@lucifer3646]

Best tutorial ever man You deserve millions

[@CodinginPublic]

Glad you enjoyed it!

[@DioArsya]

it's been a a year with vue & nuxtjs, then 2 years journey with nextjs & react, now I think I should try Astro. Great, thanks!

[@CodinginPublic]

Great! Hope you enjoy it!

[@FilledStacks]

Lovely introduction. Subscribed.

[@CodinginPublic]

So glad you enjoyed it! Thanks for the sub!

[@MrBrady95]

Liked and subscribed! Great walkthrough, thanks!

[@CodinginPublic]

Glad you enjoyed it! Thanks for the sub!

[@codehorror8076]

Only just discovered Astro. This is very awesome. I spent 6 months away from programming, came back and there's a tonne of new things going on in the JS world. Moves so fast I can hardly keep up. But this right here solves many of my problems with my current workflow which was ReactJS and Hugo.

[@CodinginPublic]

Yeah-it's CRAZY how fast stuff moves! Glad you enjoyed it. I came from Hugo, too, and have been loving Astro. Hugo is obviously a more robust project, but Astro is both so modern and simple in its approach :) Plus I like the JS over the GO syntax of Hugo :)

[@kzenmatthias]

Thanks for this video. You explain everything very clear.

[@CodinginPublic]

You're very welcome!

[@vinayjangra1401]

Best video on astro, i found it after scrolling youtube for like 3-4 hours. Thanku

[@CodinginPublic]

So glad you enjoyed it! Thanks for the kind words.

[@benberkayozdemir]

great framework, great video!

[@CodinginPublic]

🙌

[@meilyn22]

Lol, you make it look easy! Top notch tutorial.

[@CodinginPublic]

Glad you enjoyed it!

[@karnellschultz6446]

Wow what a video. Great job.

[@CodinginPublic]

Glad it was a help!

[@nushankodikara]

That's awesome, thanks mate

[@CodinginPublic]

Glad you like it

[@jm_rusty]

Thank you for this video

[@CodinginPublic]

You’re welcome! Hope it was a help!

[@qandos-nour]

this is the first time for me I saw a proficienal front-end developer in a video you are amazing

[@CodinginPublic]

So glad you enjoyed it!

[@markokraljevic1590]

excellent really, quick and clear

[@CodinginPublic]

So glad it helped! Astro is 🚀

[@megamind452]

Already waiting for astro series

[@CodinginPublic]

🙌

[@DanteMishima]

So am I 😁

[@dhuxdheerdahir2736]

Thank you!

[@CodinginPublic]

You're welcome!

[@MS-el8wj]

fast and good. I LIKED it

[@CodinginPublic]

Glad it was help!

[@cunny1307]

great video

[@CodinginPublic]

Glad you enjoyed it

[@bobdpa]

Awesome 😎

[@CodinginPublic]

Glad you enjoyed it, Bob!

[@Nad-gd1of]

This is a great overview💪, thank you! Question - you said here you prefer astro components over react.. is it still so?

[@CodinginPublic]

For most things, yes. Just sprinkle in react when I need an interactive component.

[@wusaby-ush]

You and net ninja the greatest

[@CodinginPublic]

🙏 Thank you for your kind words!

[@isaacqadri]

Astro is amazing

[@CodinginPublic]

🚀

[@VELIXYZ]

I ma on Vue currently and i love it. But Astro, damnnnnn. I want it now

[@CodinginPublic]

You can have both! :)

[@baka_thyron]

What terminal do you use at at 2:33? I don’t recognize the UI, but it looks neat Thanks for the overview, will be waiting for the series(played around with Astro, but haven’t built anything meaningful yet, so hoping to get motivated by your videos)

[@mariusraupach123]

it's warp

[@CodinginPublic]

Marius is right; you can learn more about it here: kzbin.info/www/bejne/rZXVm3x-r6yKbZY

[@hotza2581]

Your vscode looks awesome! Witch colorsheme are you using?

[@CodinginPublic]

Glad you like it. I think I'm using Community Material Palenight theme

[@FacePlat3]

I did not know you can add tags 😅. I kept wondering how I would add client-side codes in a component last time I used Astro.

[@CodinginPublic]

Yep! Astro just makes it where you have to explicitly say “I WANT JS here!" But then you can add it to your heart's content :)

[@pradeepjoshi9149]

this tutorial is best compare to other available on internet

[@CodinginPublic]

So glad you enjoyed it!

[@8koi245]

big big question, can I use solid & react? since they have the same .tsx

[@CodinginPublic]

Yep!!

[@daviddixx6737]

Im currently a react dev and i decided to go into nextjs but unfortunately, it doesn't run on my system(takes like 20min to install, no fast refresh, keeps crashing VS code) and now I've been looking for a different frontend meta framework to go into and i think astro might be it. I have some questions tho 1. Can i just write everything in react JS? 2. Do you think Astro is a good idea for building interactive web applications? Currently watching the video, thanks in advance 😁

[@CodinginPublic]

Glad you enjoyed the video! 1.Yes! You can just write everything using react if you want. You'll need to embed those components in an Astro “wrapper.” Personally, if you’re only writing in react, I'd reach for Vite for a basic site. But yes, you can do it! 2. I think that depends on what you mean by “interactive web applications.” It's optimized for heavy content site with moderate interaction. But if you’re talking about an in-browser game or something with lots of dynamic info, I think next is probably better suited. You can do it in Astro, but you’ll need to commit to it and build some of the pieces that Next gives you out of the box. I think Astro will get there, but I think they’re trying to make the best content-heavy sites right now and go from there.

[@studioph5.6]

Do I understand correctly like others js frameworks we need vps to deploy it to?

[@CodinginPublic]

I didn't show how to deploy because I was running out of time, but next week's video should! You can deploy most anywhere. If you run `npm run build` you get a dist/ dir with all the finished code.

[@akpewlfried2123]

Gained a sub 🙌🙌

[@CodinginPublic]

Hope you enjoy the channel!

[@Marcus1074]

I apologize in advance.. I'm just starting and I wonder about using API keys on the server side, @16:17 was mentioned about passing JS below the markdown for client-side, and everything else in the frontmatter.. Does this means I can pass API keys in the frontMatter? Thanks to anyone who can clarify it for me

[@CodinginPublic]

Hey! Everything in the frontmatter is invoked on build and not available on the client; obviously, you'd still want to practice good security measures with API keys and all, but that top section is server side.

[@Marcus1074]

@@CodinginPublic Thanks, will keep learning, :)

[@anuj7286]

Hi sir, i would like to know can we create large scale sites with astro. Like we do in react, next and remix. Thankyou

[@CodinginPublic]

Well, they say it can handle 10,000+ pages (I can't find that claim now, but I've read that). I haven't done that before, but I don't think size will be a big problem for most. It's more feature set. Next/remix are really full-stack frameworks, which Astro is not. But the hydration means you can have selectively reactive component as you need them. Does that help?

[@anuj7286]

@@CodinginPublic Thanks, sir!

[@MarshallSC1]

Anyone else getting error when using some script within tags? I am on Win 11 with updated NODE and VS Code. ...was looking forward to Astro series and now this prevents me in fallowing series on Astro...

[@CodinginPublic]

🤔 what error are you getting? And are you writing the code in the tutorial or trying to adapt it for your needs?

[@MarshallSC1]

@@CodinginPublic Chris, man, thanks for your effort, you are a legend and sorry for bothering you. Looks like adding "type="module"" to the script tag fixes this error. Hopefully this fixes it in the future and I can get back to learning Astro from the Astro series, too. Kind regards, kind sir!

[@CodinginPublic]

@@MarshallSC1 No worries! Glad that helped. Hmm…that's a little odd, but glad it's working now :)

[@MarshallSC1]

@@CodinginPublic Very strange, yes... Sow in the docs about similar error, decided to try and looks like it worked, don't know why... So far so good, works in fallowing the Blog tutorial for now... Hope it stays that way. TY and all the best!

[@allbriandoes]

As soon as I get to step "How would you like to start your new project?" and I choose "Empty" it displays "Template copying..." and it never resolves. Any idea why this might be?

[@CodinginPublic]

Hmm. That’s odd. I’d ask in the discord?

[@allbriandoes]

@@CodinginPublic On it.

[@videos6505]

How can I add scss to global style sheets?

[@CodinginPublic]

I believe with the sass package installed you can just import the scss file directly in your Astro layout page. The built in PostCSS should process it I believe? I’m away right now and can’t try; but wanted to give you a direction. Let me know if that doesn’t work.

[@videos6505]

@@CodinginPublic - Thank you. I will try.

[@moneyfr]

would you say solidjs is better than react ?

[@CodinginPublic]

Well, it all depends 😬. It really depends what you need. In some situations, yes. In others, no. Solid looks really promising.

[@mdkawsarislamyeasin4040]

Please create a next.js 13 tutorial video if you can .

[@CodinginPublic]

I haven't used NextJS 13, but if I do, I'll make a tut once I feel comfortable with it.

[@djoo110]

stupid question but... how can we have a terminal skin like yours ?

[@CodinginPublic]

Hey, not stupid at all! Here are two videos that may help: kzbin.info/www/bejne/enOkhJdvgZl6edE and kzbin.info/www/bejne/sJndmYeslquCn9k

[@Redyf]

what terminal is that?

[@CodinginPublic]

Warp!

[@AngelinCalu]

For me client:visible or client:load throws an error -> Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set throwIfNamespace: false to bypass this warning.

[@CodinginPublic]

Hmm. I haven’t run into this before. I’d check the discord support channel to see if anyone else has had this problem? Sorry I can’t be of more help!

[@AngelinCalu]

@@CodinginPublic Could it be a TypeScript specific issue? I have added the AstroBuiltinProps interface to my existing props so that should not be an issue.

[@dvikauglaumishrauca]

What is the terminal

[@CodinginPublic]

Warp :)

[@user-kb6ck7gb6f]

After selecting empty in template, it keeps saying "template copying..." forever

[@CodinginPublic]

I’ve had that happen before when npm was down. Still having this trouble?

[@user-kb6ck7gb6f]

@@CodinginPublic No fixed, thx!

[@user-kb6ck7gb6f]

Why does Astro is not good with bootstrap specifically in js components... this made me sad

[@CodinginPublic]

Astro is framework agnostic, so you should be able to use Bootstrap without trouble. What’s been the trouble you’ve had?

[@studioph5.6]

what are downsides of astro?

[@CodinginPublic]

I don't have any real downsides as long as you use it for its intended purpose. If you have interactive-rich site needs, I would probably go with something like NextJS or something? But that's not really Astro’s fault. There are a few features missing that are present in more robust frameworks, like a more customizable RSS experience, font directives like Next font, but V1 is not even 5 months old, so I can't complain.

[@AtomTCP]

its look like vite

[@CodinginPublic]

Yep, uses Vite :)

[@DanteMishima]

So we're saying Astro is so straightforward, all we need is 20 minutes? (he asks knowing full well how simple Astro is)

[@CodinginPublic]

lol :) I mean, I hardly felt like I had a chance to cover ANYthing in 20 minutes. It's both simple and extendable. How's that? :)

[@DanteMishima]

@@CodinginPublic That's perfect... Oh, also... I finally managed to get Astro running with PNPM

[@CodinginPublic]

@@DanteMishima 🤝

[@CodinginPublic]

what was the problem?

[@DanteMishima]

@@CodinginPublic For some reason pnpm hadn't been added to my PATH... Had to do that and delete the pnpm store folder so the changes would take

[@nested9301]

astro is just for content rich sites unfortunately

[@CodinginPublic]

That's certainly where it shines, but you can do a good amount of more dynamic stuff. For instance, I built a site with Astro recently that's mostly static (blog, content pages, etc.). However, I have an /admin route that basically wraps an entire React app for the backend. Once you’re in that route, react-router-dom takes over and the whole admin section is a self-contained reactive app. For me, that's the best of both worlds, but obviously your needs may be different. As a whole, though, you are correct-they’re focusing on content sites and that's where Astro does best.

[@nested9301]

@@CodinginPublic hmm one potentional problem will be with that self-contained reactive app in the /admin route is that it will be hidden from search engine crawlers , so that will lead to poor seo just for that Specific route. idon't know correct me if i'm wrong

[@mikeysauce393]

I just heard about Astro today and I like it. Thanks

[@CodinginPublic]

🙌