Introduction to Astro, The New JS Framework

Checking out the new lightning-fast framework Astro!

Photo by SpaceX on Unsplash

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.

Setup 👷‍♂️

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)”.

The file structure of a newly made Astro project

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!

Structure 📃

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 html or ts / js .

When you open one of the files like index.astro inside /src/pages/ , you will see that the syntax isn't that much different than something like React. it just uses less JavaScript. And the JS that it uses is between triple-dashes.

In the index.astro file the JavaScript only imports two components. One from /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 Astro.props .

Where as Props refers to using the Props TypeScript type.

The file structure speaks almost for itself.

• The public folder will contain all unprocessed files like images, fonts, etc.
• The src folder contains all components, layouts, and the actual pages.
• The routing is file-based, like in NextJS. This means that your pages folder structure will also be the structure for your web pages.
• components will contain reusable components.
• And layouts contains 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 head and 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 .md or .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.

post.md file inside /pages/

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 PostLayout.astro inside 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.

Conclusion

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!

Follow me on Twitter and gm.xyz to keep up with me and my projects.

Check out Pixel Pizzas on Polygon.