Astro Project Setup

[00:00:00]
>> Let's talk a little bit about what we're gonna build today. We are going to be building a full-featured modern web app. It's gonna have a marketing homepage, because that's kind of the bedrock of the Internet, everything has this no matter what it is. We're gonna build an e-commerce store, so we're gonna get products from an API, we're going to build a shopping cart.

[00:00:18]
We are going to set up a blog and add an RSS feed to that blog. And we're going to set up a newsletter signup form that will work without JavaScript. So we're going to add a little bit of server side rendering into Astro to show how that would work if you want to run it that way.

[00:00:34]
So how we're gonna build it, we're gonna make sure that the whole site works with JavaScript disabled with the exception of the cart, but we are gonna add a no script fallback for the cart. We're going to do cross-framework state sharing. So we're gonna set up both Solid and React in this app as a means of demonstration, and then we're gonna have state that gets shared between the two.

[00:00:53]
So you'll be able to act like update state in React and access that changed state in Solid in a way that still respects the partial hydration or the Islands architecture of Astro. We're gonna write Type-Safe Markdown. The blog is gonna be using Astro's content collections, which means that we can provide a schema and validate that people are using the allowed fields.

[00:01:15]
If you've ever worked with a markdown blog, one of the most challenging pieces of it is that it tends to kinda run away from you in terms of frontmatter. Where some of them have categories, some of them have tags, some of them add a special field about whether or not you should show the newsletters opt-in.

[00:01:32]
And over time, all those fields become somewhat meaningless. So what we'll be able to do is actually add schema validation. So you can say, these are the categories you can choose from. It's not a it's not a freeform fill anymore, it's gonna actually throw an error if you're not using an allowed category.

[00:01:49]
We're gonna fetch data from external API, so we're gonna show how Astro handles data fetching. We're going to set up some server-rendered pages, but only when necessary. So we're gonna use a feature that I love about Astro, which is called hybrid rendering. Where instead of having to opt all the way into server rendering, you identify one or more pages to be server rendered, and the rest of them are static by default.

[00:02:10]
So things that you're gonna need today it are a GitHub account. You're gonna need git installed locally, because we're gonna be cloning and pushing the repos, Node version 16 or higher. I didn't use to call this out, but I've started. If you're on a work computer, you are gonna need permission to clone and run repos on your local computer.

[00:02:29]
That has been a challenge in the past. Things that I will be using that you don't need to use, but this is what's gonna be on the screen. I'm gonna use VS Code for both the terminal and for my code editor. I'm gonna use the GitHub CLI. I love the GitHub CLI, it saves me a ton of time.

[00:02:45]
If you haven't used it before, it's definitely worth checking out. I'm not gonna go into it today, I'm just gonna use it. Again, you don't need it that's why you'll see me typing the gh command in my terminal, that's what that is. We're gonna be using Netlify, that's how we are going to deploy the site today.

[00:03:01]
You can deploy to whatever platform you wish, but this is what I'm gonna demonstrate at the end of the workshop. And yeah, just as a note for posterity. You don't need these, these are just my preferences. So assume knowledge, I'm assuming that everybody here has some beginner JavaScript capabilities.

[00:03:18]
You don't need to be a JavaScript pro, but I am not going to explain the mechanics of JavaScript. So if you're not familiar with JavaScript at all, there might be some parts that are a little dense. Feel free to ask questions, but yeah, I probably won't be explaining JavaScript syntax today.

[00:03:34]
General knowledge of Typescript, we're not gonna write a lot of TypeScript, but I will be using Typescript for autocomplete, so there will be some points where I'm including type definition stuff. The starter repo comes with all the required types already in it, so we don't have to write TypeScript.

[00:03:49]
We're just gonna have them there. But if you've never seen it before, it might look a little bit wild. Again, feel free to ask questions, but we're not gonna get into the nitty-gritty of how types work and stuff. Basics of JSX and components, not gonna do an intro to React, or Solid, or Vue or Svelte, just gonna start using some components.

[00:04:09]
So if you've never seen those before, might be a little bit of a wild ride. Familiarity with Markdown, if you've ever written a README, you'll know enough about Markdown. That's all we're really looking at today. Basic usage of the command line, we're gonna be running some commands. So knowing where your terminal is, how to execute commands in it, that's gonna be important.

[00:04:30]
And a basic understanding of API calls, we're gonna be running the Fetch API today. If you've never used it, it is a reasonably straightforward API to use. You don't need to understand all the ins and outs of it. But if you've never seen it before, I'm gonna go a little bit quick over those.

[00:04:45]
So a quick demo to start, we're gonna use a starter repo, but I wanna show how the start-from-scratch experience works in Astro, because it's just so good. So let me get a terminal up, and I'm gonna collapse this down so that we can see this. And so the way that you start a new Astro site is you can run npm create astro.

[00:05:10]
And what this is gonna do is shows this little Houston robot, which is adorable, and then it asks you for some details. So it'll auto generate a name of a project if you want. And since we're not actually working in this project today, you can just hit Enter to continue and then it lets you choose what you want.

[00:05:30]
So if it's me, because I've done this a few times, I'll start with an empty project. If you wanna see how the best practices work, you can choose this one. And then it starts just kinda stepping through everything, so it's gonna install our NPM dependencies. And it's going to give us some words of affirmation.

[00:05:48]
It's going to just kinda be a little pleasant experience that I really love. And do I wanna initialize the repository? Sure, I do, and then it asked about TypeScript. So strict is the default, and then it tells you what to do next. So we can move into this project and start it, and it's gonna open up in localhost 3000, and this is your Astro site.

[00:06:19]
So here, you're running, you have a site installed and running and ready to go. This is not super novel in the framework world anymore. They've all got pretty good getting started experiences. To me, thing that sets Astro apart is the attention to detail with the little robot saying fun, cute things and the fact that they are installing your dependencies and setting up TypeScript.

[00:06:43]
And just making sure that you're set up in a way that allows you to quickly get up and running. So we're not actually gonna run off of this site because, again, the starter repo is effectively this. It just has also some images and style sheets that we're gonna use so that we don't have to write all those by hand.

[00:07:05]
And as well as the Markdown files so that you don't have to write the Markdown. So next up, let's actually get started. So we're gonna use the start branch of this repo here. So I'm gonna run this command. Let me open Code actually. So we're going to move into GitHub, and we're going to gh clone repo, and then it's gonna be learnwithjson and astro-frontend-masters.

[00:07:51]
And then I want the start branch, so I'm doing the double dash to kind of escape the GitHub CLI, and then I can add any git commands that I want. So -b is a branch. So I can say, I want the start branch of this repo. So I am, what did I just do?

[00:08:09]
I know what I did wrong. I did these commands backwards. So github-repo-clone is what I meant to do. And that is going to give us our site.
>> Alternatively, you could probably just clone the repo and then "cd" or check out the start branch.
>> Yes, yeah, so if you wanted to get into it like that, you can also go into astro-frontend-masters here and you can grab one of these.

[00:08:48]
So you can use the SSH or the CLI. And then once you've got it, just do a git checkout start and that will move you to the start branch. Okay, so we're in this repo now, and we've got everything. We're gonna install the dependencies, so npm i to install, and then we can npm run dev.

[00:09:09]
And that, again, is gonna start on localhost 3000. I've stripped out the defaults and all the things that Astro provides so that we're not having to remove code, we're just gonna be writing code Okay, so to actually get running here, what we're gonna do is create a new page.

[00:09:36]
So the way that an astro directory works is we have this source folder that's got pages in it by default. You can put anything you want here, components, layouts, etc., we'll step through those as we go. In the package json, you can see here that it gives us a handful of commands.

[00:09:56]
Dev is the one that we're gonna spend the most time on today, but later we will be building it. And I've added a few type packages, but we'll install everything else as we go in the starter. You've got an astro.config, which right now is just empty. This comes with the npm create astro, we'll use this later.

[00:10:17]
But I'll show you one of the other reasons I love Astro is that we won't have to manually touch this file almost at all, because they've got this wonderful flow of adding integrations that just works. The other things that are worth noting, the types here, those are types that we're gonna use.

[00:10:36]
Again, we're not really talking about TypeScript, it's just to make sure that we've got autocomplete and everything. Astro as well has some types, this is supplied by the npm create astro. Public is a place where we can put anything that we want to be published as part of the build.

[00:10:52]
So anything that we put in this folder will be URL addressable. So in this case, the favicon will be addressable at your site.com/favicon.svg. And anything we wanna put in here can go in here. If you wanna put PDFs up on your website, you wanna put images, etc., you just drop it in here and it just works.

[00:11:11]
The source folder is what will actually be processed as part of the Astro build. And inside of that, you can see we've got this, Simple page. And this is, by default, it's just HTML. There's nothing special going on here. The only thing that is different from plain old HTML is this generator tag, which is optional.

[00:11:35]
It's just there so that we can identify whether or not a site was built using Astro, which is helpful for adoption for somebody who wants to snoop a little bit on your site and learn what technology you use and all that kind of stuff. That's all this is really here for.

[00:11:51]
Otherwise, we're just putting out a little h1 tag, and that h1 tag is telling us what we need to do.