Astro

Table of Contents
  1. Syntax
  2. No Client-Side JavaScript
  3. Get Started!
  4. Summary
  5. Footnotes

Astro is a relatively new1 kid on the web development block. It’s gaining popularity and now is my go-to when it comes to web dev. What is so cool about it? Ability to use TypeScript, JSX, and components with no client-side JS shipped by default!

Syntax

Astro has a unique syntax, where the file consists of a frontmatter written in JS/TS and the rest written in HTML. An example .astro file could look like this:

---
// This is JavaScript/TypeScript
interface Props {
    name: string;
    surname?: string;
}

const { name, surname } = Astro.props;

const fullName = name + (surname ? " " + surname : "");
---

<!-- This is HTML -->
<html>
    <head>
        <title>{fullName}'s Site</title>
    </head>
    <body>
        <slot />
    </body>
</html>

The bits placed in the frontmatter are computed either at the server (server-side rendering) or during static site generation. An astro file is a component that you can import in another file’s frontmatter and use within the HTML part! Attributes are defined by the special Props type or interface.

With that in mind, if we saved the above snippet under src/layouts/Layout.astro, then we could have a src/pages/index.astro page to have a complete working Astro example:

---
import Layout from "../layouts/Layout.astro"
---

<Layout name="Tymek">
    <h1>Hello Astro!</h1>
</Layout>

No Client-Side JavaScript

The magic of Astro is the ability to use all the goodies modern web dev has, but keeping it sane. You effectively write JSX, use TypeScript, use framework components, yet all that’s shipped to the client is HTML and CSS (unless you explicitly use <script> that is). Astro puts you in charge of determining where client-side JS should be loaded with its client directive.

Get Started!

Personally, I use pnpm instead of npm. From my perspective, its CLI is a drop-in replacement. pnpm is a bit more clever, and therefore faster, about installing dependencies.

You start off with a creation wizard that Astro provides:

pnpm create astro@latest

Oftentimes I find myself deleting as much as I can from templates to see what is really needed. However, that’s not the case with Astro. Running the above command creates a lean structure from which I only delete .vscode/ directory solely because I use a different editor.

Then you can add one of Astro integrations using:

pnpm astro add tailwind

Personally, I always use both TailwindCSS and TypeScript, so I would top it off with:

pnpm install --save-dev prettier prettier-plugin-astro prettier-plugin-tailwindcss typescript

The final piece of the puzzle, is .prettierrc.js which is required to make a use of the plugins installed with the above command:

/** @type {import("prettier").Config} */
export default {
  plugins: [
    "prettier-plugin-tailwindcss",
    "prettier-plugin-astro",
  ],
  overrides: [
    {
      files: "*.astro",
      options: {
        parser: "astro",
      },
    },
  ],
};

Summary

If you need some more composability than plain HTML and CSS provide, then I would recommend trying Astro out! HTML is a 100% valid Astro syntax, but the ability to use the components really shines when it comes to reducing redundancy.

I have yet to try some of the features Astro provides such as mixing different frameworks or using it as blog generator. I am definitely looking forward to this, especially the latter!

Footnotes

  1. Astro 1.0.0 was released just a year and a week ago! ↩︎