Astro Crash Course #1 - Why Astro? (& Setup)

Key Takeaways

All right, then, gang. Welcome to this Astro crash course, which I've been meaning to make for a long while now, but there's always been something else taking my time. But, I think it's a good time now to make the course about Astro because I think it's slowly starting to get more traction, and for good reason. And also, we've just got a new version released as well. So, in this series, we're going to talk about what Astro is, the kinds of websites we can make with it, and all the cool features that come bundled with it out of the box. So, very quickly, first of all, what is Astro? Well, put simply, Astro, in its own words, is a framework for creating content-driven websites. And that might sound similar to other frameworks like Next or Nuxt, but where Astro sets itself apart is in performance and speed because, by default, it doesn't ship any JavaScript to the browser. So, in that sense, Astro is a really good option for statically generated sites like blogs, for example, where we don't necessarily need a lot of JavaScript in the browser. And that's unlike sites built with Next.js that does ship a lot of JavaScript by default. And I've seen sometimes those bundles on websites well over a megabyte, not always, but sometimes. So, Astro is great for static sites, but that doesn't mean you can't use it for more dynamic applications that do require interactivity, as well. And Astro allows us to do that by either dropping script tags directly inside Astro components themselves, and those script tags are going to run in the browser as normal, or by using what they call client islands, which are self-contained interactive components that can be built using other libraries like React, Vue, Svelte, etc. So, for example, most of the page could be made using Astro components rendered at build time and sent to the browser as static HTML. And then, you could just have a single client island built with React, for example, that can either be fully rendered or just hydrated in the browser for an interactive segment of the page. So, this means we're still getting the most of the page quickly, and we're just only shipping JavaScript for the small islands where we need it. On top of this, Astro also allows us to build pages which are not rendered at build time to static HTML, but rendered on demand on the server when the page is requested. And that might be good for pages containing dynamic content which changes a lot like a user dashboard, for example, where the server needs to fetch user data when the request is made, or to render new content on dynamic routes without doing a full rebuild. So, we'll be looking at a lot of this throughout the series. Another nice feature that comes baked into Astro is something called content collections. And content collections are a nice feature which allows to manage and query local data like markdown files or JSON or YAML or TOML and so forth, and then use them in the application. So, for instance, we might have a collection of blog posts written in markdown files, or a collection of blog categories stored in a JSON file. And then, we can use Astro's content collections to manage that data and make queries for it. And the benefits of doing that is that Astro provides loaders for fetching and parsing all that local data out of the box. And also, through defining data schemas using Zod, we can enforce validation and guarantee type safety of the collection and intellisense for when we use that data in our components. So, it's a really nice feature baked into the framework, and we'll be taking a close look at it later in the course. On top of that, it comes with all of the features you'd expect from a modern web framework like file-based routing, layouts, reusable components, TypeScript support, and all that jazz. In this course, then, we're going to be using Astro to build out a small book review site like this one, and the data for these book reviews are going to be stored as markdown files locally. So, we'll be using Astro's content collections to query them. And we'll also be deploying the application to Netlify at the end of the course, as well. Now, I know this site doesn't look great, but I don't want to focus on the design in this series. I want to focus on all the different features that Astro brings to the table, instead. First, though, we need to create a new Astro site, and the easiest way to do that is by using one of these commands listed on the getting started guide from the Astro docs. But, before you do that, you'll need to make sure you've already got Node.js installed, ideally version 22 or higher. And there are some older versions of Node that are supported, as well, but not all of them. So, to install the latest version, you can come to nodejs.org and then head to the downloads page, where you can choose which version to download and install. Anyway, I'll come back to the Astro docs, and I'm just going to copy this NPM command, which we're going to use now to generate a new Astro project. All right, then. So, I've already navigated to a new projects directory, and then I'm just going to paste in this command, npm create astro@latest, and then I'm going to press enter. Okay, so next, it's saying we need to install the following packages, create Astro. Yep, okay, we can do that. Press enter. And now, it's asking us where we should make the project. So, I'm going to create a new folder, and I'm going to call this book-bytes. That's going to be the name of the project that we make. And next, it says, "How would you like to start your new project?" Well, I'm going to come down here and say use a minimal empty template. And yes, we want to install the dependencies. And yes, I'm going to initialize a new Git repository. That's going to be important for later when we come to deploy the application. All right, so it looks like it's all done. So, I'm going to CD into this new directory, first of all. So, I'll say CD, and then dot forward slash book-bytes, and press enter. And then, if I say code, and then dot, that's going to open this up in VS Code for me. Okay, so now we've created this blank Astro project, and you can see we've got all of these different files and folders over here, which have all been generated for us, as well. And we'll go through all of this in more detail as we progress through the course, but for now, let me just quickly walk you through it, so we've got a general idea of how an Astro project is structured. So, first of all, we've got the node_modules folder, which is where all the dependencies for the project are installed. Below that, we've got the public folder, which is where we'd put any static assets for the project. So, that could be images or favicons, etc. Then, we've got the source folder, which is where we're going to be spending 99% of the time in this course. So, any pages, any reusable components, CSS, or even any content like markdown files that we create, they're all going to go inside the source folder. At the moment, we've only got the pages folder, which is where page components are going to live. We'll talk more about that in the next lesson, but we're also going to be adding other folders and files in this directory, too. Now, inside the pages folder, we've also got an index page component, which, if we open, we can see it's just a simple HTML template. Also, notice the dot Astro extension, which is the extension we use for any kind of Astro component that we make. After that, we've got a .gitignore file down here, which you'll see if you initialized a Git repo for the project during setup. Then, we've got an Astro config file, which, to begin with, is going to define an empty config object, but this is where you'd add any kind of integrations or server options, things like that, if you needed to, which we probably will do later in the course. Then, we've got the package files, a readme file with some basic information about the starter project, and a tsconfig file, which includes some TypeScript configuration options. And like I said before, Astro supports TypeScript out of the box, so we can just start writing with it in our components when we need to. One other thing I do want to mention is the VS Code extension you're probably going to want to install for Astro, as well. So, it's this one right here, the official Astro package by Astro themselves, and it provides language support for dot Astro files, so we get syntax highlighting, intellisense, Emmet completions, and a bunch of other stuff, as well. So, I would definitely recommend installing this before you start anything else. All right, then. So, I think that pretty much covers everything for now. And like I said, we'll be diving much deeper into all the different moving parts as we go through the series. For now, though, I want to preview this application in a browser, and for that, we need to spin up a local dev server. So, to do that, open a terminal and type the command npm run dev, then hit enter. And when we do that, it's going to serve the site from localhost port 1234. So, we can use that address to view the site in the browser. And also, whenever we make changes to the code and then save the files, it's going to live update those changes in the browser for us. Okay, so there we go. That is the starter site up and running. It's nothing much to look at yet, but starting in the next lesson, we're going to be adding some more pages and some more content. And one more thing, before we finish this first video, I have made course files for each lesson, starting with lesson two, and you can view them on this GitHub repo right here. So, I will leave the link to this repo below the video. Now, to see or download the code for a specific lesson, you can just select that lesson from the branch drop-down right here. And when you do that, you should see all the folders and files down here, which you can then browse. You can also download a zip folder of the lesson by hitting the code button and then choosing this option right here. Or, you can clone the repo and pull down lessons as you wish, if you're proficient with Git. Anyway, that is your introduction out of the way, and next up, we're going to start exploring how to make additional pages to the starter application. By the way, if you want early access to this entire course now, you can access it at netninja.dev. It's just $3 to buy. Or, if you want access to every single course in the library, including this one, plus all of my masterclass courses and pro exclusive content, you can sign up for a Net Ninja Pro membership, which is just $9 a month, and you can get your first month half price using this promo code right here. So, I'll leave a link to this course down below the video, and also the link to sign up for a Net Ninja Pro account. Otherwise, I'll see you all in the next lesson. >> Oh. >> [music] [music] [music]