Create an Astro Project and Set up the Dev Environment
We'll set up our initial Astro blog using Houston, Astro's official CLI.
After stepping through the CLI options you'll get a tour of the generated files that Astro includes in a new project. You'll see what file structure you are working with and also get an introduction to the .astro file type where we will be doing a lot of the work in this course.
Man: [0:00] Let's start by creating our project. With our terminal open to the directory we'd like to create our project in, we're going to run npm create astro@latest and type in y. Houston, Astro CLI assistant, will prompt us a few questions.
[0:20] First, it's going to ask us where should it create our new project. Let's type in ./astro-blog, for example. Then it'll ask us if we want to include sample files, use the blog template or create an empty project. Let's include the sample files.
[0:37] Do we want to install the dependencies? Sure, why not? Do we want to include TypeScript? Of course. How strict should TypeScript be? Let's make it strict. Do we want to initialize a new Git repository? I'm going to leave this up to you, but it's always a good idea to initialize a Git repository from the very beginning.
[0:56] OK, and that's it. Now, we can cd into the astro-blog directory and open it with VS Code. First, we want to make sure that we have the Astro extension enabled. This is Astro's official extension that will highlight our syntax, give us IntelliSense with auto imports, Emmet, code actions, formatting, and lots of other useful features, so make sure you have this installed.
[1:22] All right. Let's check out the folder structure now. Right away, we can see a standard top-level structure that includes the node modules, the public, source folder, the package.json, a readme, TypeScript config, etc. Then we have the Astro config file, which imports the defineConfig method from astro/config and exports the return result of that method as the default exports.
[1:49] The public folder contains a favicon.svg file, the source folder contains folders for components, layouts, pages, and then there's also the TypeScript declaration file for the environment. If we expand the components, layouts, and pages directories, we're going to see .astro files inside.
[2:10] Just by their extensions, you guessed it, they are Astro files. What's cool about them is that they have an interesting file structure. The code that you see here between the three dashes is TypeScript, and below that, it's a code that seemingly looks like HTML.
[2:26] That's because it is. Astro files or Astro components are HTML-only templating components that don't have a client-side runtime. As we can see inside of the component script, which is the block at the top, we can import other components and use them below.
[2:42] We can also declare variables and use them in the HTML below wrapped with curly brackets. We can also define the component props and obtain them by destructuring the astro.props property.
[2:55] What's important to know about the component script is that it either gets executed at build time or on server-side, depending on your Astro configuration. Have that in mind, because you won't have access to the window object or any other browser APIs in this block. Let's run npm run dev and see how the initial page looks like.
[3:18] There we go. This is the default page that comes with the Astro new project. If we go to the index page and change the message and just save the file, we'll also see that there's hot reloading as well. Neat. Let's do a quick recap.
[3:33] We created our project by running npm create astro@latest and answered a bunch of questions Houston asked us about our project. Then we checked out the project structure and learned about Astro's component syntax. At the top of the file leaves the component script wrapped with triple dash blocks. Below the component script, we had the HTML template that gets rendered.
[3:57] We learned that we can import other components, create variables, and use both the variables and components in the HTML below. Also, define component props and extract them from the astro.props property.