Introduction to Astro, The New JS Framework
Checking out the new lightning-fast framework Astro!
Astro is a reasonably new framework designed for speed. And it does that flawlessly. It can integrate with your favorite frameworks like React, Vue, and Svelte to create pages that are rendered into HTML to provide insane loading speeds.
It seems perfect for apps with a low number of interactive elements, but even with an interactive site, it can outperform some of the most popular web frameworks.
Are there any downsides? Of course, there are. But for now, we will keep positive and check out how to build a simple site with this powerful and lightning-fast framework.
Starting a new Astro project is as easy as with any other modern framework. It provides a simple CLI tool to set up your first site.
npm create astro@latest
While running the command, the CLI will prompt a few options to you. For starters, it will ask where to put the new project files, what template to use (I used “Just the basics”), if you’d like to install the NPM dependencies (yes), if you’d like to set up Git (I did), and finally, if you want to use TypeScript to which I said “Strict (recommended)”.
As you can see, everything we need has been generated and we can now run the project locally by running
npm run dev in the terminal.
Be sure to navigate inside the new project folder!
You will be greeted with a very standard welcome screen that explains a bit about the framework and where to check the files. And you might’ve already noticed that Astro uses its own
.astro files instead of
When you open one of the files like
/src/layouts/ , and one from
/src/components/ . Here we can see how custom components work. For example, we get props (or HTML attributes) like so by using
as Props refers to using the
Props TypeScript type.
The file structure speaks almost for itself.
publicfolder will contain all unprocessed files like images, fonts, etc.
srcfolder contains all components, layouts, and the actual pages.
- The routing is file-based, like in NextJS. This means that your
pagesfolder structure will also be the structure for your web pages.
componentswill contain reusable components.
layoutscontains components that have a
<slot />element within them where the rest of your code (the nested HTML) will reside.
Layouts are more clearly explained by looking at their code.
This layout file is simply a minimal HTML skeleton with a
body . Of course, your code should almost always use the same
head , and you’d only want the
body to change. So inside of our pages, we’d refer to this layout like this.
MarkDown Pages and Nested Layouts ✍
As with GatsbyJS, you can create new pages directly as MarkDown files. It will simply transform it into an HTML page that can use layouts to easily let anyone create new content for your site.
You can check this out by creating a new
.mdx file inside the
pages directory. And at the top, with the triple-dash syntax, you can enter the frontmatter for your post. Like the Layout, title, author, etc.
You can directly browse to
localhost:3000/post to check it out. Since our layout is unstyled, the post looks bland, and the
author frontmatter isn’t used anywhere yet.
We can define a new layout called
layouts to make something more interesting.
When you add this file and update the MarkDown file to include this layout instead of the default one, you will see that the page gets updated and will use the data from the frontmatter of the MarkDown file.
And if you’re paying attention you might have also noticed that we use the original
Layout.astro inside of our new
PostLayout.astro , so we can even nest layouts! This allows for great flexibility which we’ve shown here as well.
Astro seems like an amazing framework for pages that don’t require much interactivity. And there’s much more to learn about this great piece of tech that you can find in the official docs.
I hope that this was useful for some of you! Please check out my other articles on smart contracts if you’ve enjoyed this one!
Thank you so much for reading and have an excellent day.
Consider supporting me by getting a Medium membership. It helps me out a lot, it won’t cost you anything extra, and you can read as many Medium articles as you like!
Check out Pixel Pizzas on Polygon.