Quick Start Guide to Astro

Last Updated: December 26, 2024 @ 2:38pm

Astro is the new kid on the block in terms of Javascript rendering engines, and it’s quickly growing in popularity. For our team, it makes great business sense to use Astro for a few use cases, so I wanted to provide a quick-start guide.

Their tutorial is fantastic and doesn’t take a long time to complete, so it’s 100% worth going through!

The `.astro` File

Astro components (files ending in .astro) are special. They can contain up to 4 parts, or they can only contain HTML. Let’s dig in.

The anatomy of an Astro file

Frontmatter
Body (the only required bit)
- Styles
- Scripts

The Frontmatter

Nestled inside of opening and closing triple-hyphens (---), frontmatter is where you define file arguments (or “props”) to pass into the astro file from somewhere else.

The WordPress comparison

A file’s “Props” are like using get_template_part() with an $args array. For example, in a Countdown component, you might pass the countdownEnd prop as a date-time string (e.g. ” 01 Jan 2025 00:00:00 CST”) and consume it in the frontmatter.

Copy Code

---
// define the Props with a Typescript Interface
// to give developers hints about what the component expects
export interface Props {
  countdownEnd: string;
}

// extract the variable from props to be used later
const {countdownEnd} = Astro.props
---
<div id="countdown" data-countdown-end={countdownEnd}>
<!-- some code -->
</div>

The Body

The body is where you’d write your HTML. You can use JSX to loop through data, but you don’t need to.

Styles and Scripts

Styles and scripts are defined with inline <style> and <script> tags, and Astro handles imports automatically! Instead of building a separate .css and .js/.ts file and then having to build and enqueue it (like in WordPress) and then jump to 3 places to make changes to a component, Astro helps you keep all the things for a single component together in one place.

You can still define things separately and import them if it makes sense (e.g. with a really long files), but you don’t have to.

Even though you define styles and scripts with inline tags, Astro scopes them to the component. This can be nice or annoying depending on what you expect. If you have 2 different components with an h2 element, any styles you define for that <h2> wouldn’t cross over.

The WordPress comparison

Just like a php file in WordPress, after the opening php tag with the file details in a comment, what you put is up to you! You could use PHP, or you could just stick to HTML.

Astro doesn’t have an equivalent to wp_enqueue_script() or wp_enqueue_style(), all your assets are handled automatically based on what you define inside the .astro file!

What Makes Astro Great

Here’s a quick overview:

Astro serves HTML by default
- Even though it uses JSX as a templating language, it doesn’t require you to know any Javascript at all
Astro scopes CSS to a component, or allows you to import styles as “global” to make use of the cascade
Astro makes it easy to grow from one page to many using “Layouts”
It’s super quick and easy to deploy Astro sites to a Github Page

Astro serves HTML by default

Although Astro’s templating language is JSX, Astro serves as much HTML as possible by rendering the JSX to HTML at build time (unless it’s used in SSR mode, which we probably won’t ever be doing).

The WordPress Comparison

Astro uses JSX to build HTML, whereas WordPress uses PHP

Astro doesn’t technically require any Javascript knowledge

In a .astro file, you can just write HTML! You don’t need to use frontmatter (the top of the file with the starting and ending --- lines), you can just write a little block of HTML. This keeps things organized and keeps a developer from re-writing (or copy-pasting) their code.

Astro allows for quick site composition by using special components

Since Astro uses JSX, your files will look really close to HTML files, but with special syntax. For example, an index.astro file might look something like this: