Astro Web Framework - what it is and how to get started

I have recently started using the Astro web framework. There are no easy-to-understand articles explaining what Astro is, why it is so special, and how to use it for web development in practice. So, I decided to launch this website here explaining Astro - the web framework designed for speed, dynamic content, and mixing it with static content.

Astro helps you build websites faster and easier by centralizing the frontend and backend code execution in one frontmatter file, a mix between JavaScript and HTML. It is a meta-framework that can be integrated with more JavaScript frameworks such as Vue, React, AlpineJS, Preact, Svelte, and others. The Astro Framework is a so-called all-in-one web framework. It has an awesome developer experience (dex).

We'll cover how to get started and also start building a static site website, dynamic sites, and a complete Server Side Rendered (SSR) website.

Welcome to your free Astro crash course, and let's start!

Astro - the Meta framework

Astro is unique. It is like a meta web framework that works well for the frontend and backend. One of the good things about PHP is that it is simple, and mixing code and HTML into one file is good. It also introduces many issues with code reusability, code quality, and others. Astro takes a similar approach but splits code into backend and frontend run code. This makes it super easy to work with. Getting started with Astro is extremely simple, as people need to read one file for functionality and then go to many different files to see what is happening.

This unique approach also makes it possible to use other frameworks. Such frameworks include VueJS, AlpineJS, React, and others. You can also do it vanilla style.

What to use Astro for?

You can use it for static site generators. Blogs? Great. Landing Pages? Great. Web shops? Great.  But you can also make fully-fledged web applications and avoid using other technologies like Express.js to deliver the rendered pages.

Developer Experience with the Astro Framework

When I started using Astro for my projects, Astro offered something special.

I never get excited by new JavaScript frameworks, but this struck a chord.

The first thing is developer experience. Astro will help you set up the right project directory and layout structure using npm and npx commands. It will even generate a GitHub repository for your project that makes a git ignore file. The URL routing is done automatically, depending on the structure of your folders.

This makes it easy to distinguish between a client-side and server-side rendered endpoint.

Getting started with Astro - your first Astro Project

Let's create a new Astro project by running:

npm create astro@latest

This will ask you for a lot of information.

Where should we create your new project?: protest
How would you like to start your new project?: Include sample files (recommended)
Do you plan to write TypeScript?: No
Install dependencies? (recommended): Yes
Initialize a new git repository? (optional): Yes

Astro has built a little static site generator, but we will change it slightly to create dynamically rendered content.

Let's start the web app by running the following command.

cd strictest

npm run dev

After this, you can see that there's an astro src/pages/index.astro- this Astro page uses two components: Layout and Card. It is a form of frontmatter file where the top is server-side rendered, and the other part is frontend rendered.

This is easiest seen by making a file src/pages/play.astro with the following content:

---
console.log("server side");
---

<div>
Hello
</div>
<script>
console.log("frontend side");
</script>

If you now head over to http://localhost:4321/hey and enable your console you'll see only "frontend side" in the console. But if you go to your terminal where npm run dev is running, you'll see "server-side"

Layout of the Astro project directory

The Astro command npm creates astro@latest, making a project directory that's good for websites like landing pages and websites like blogs. We can easily augment and use more advanced features. This is the structure:

Configuration of Astro

It contains all the configuration for the starter project and is situated in `astro.config.mjs

Public files

All are contained in the public folder and can contain favicons, CSS, JavaScript, and whatever else you need.

Components

Components are not visible to the browsers but can be used inside the pages. They are situated in src/components

Layouts

Like components, Layouts are not visible to the browser and can be used inside the pages. Layouts should be inside src/layouts

Pages

Pages where the meat is and are publicly available in the browser. Pages are situated in src/pages/

Configuring Astro for static and dynamic content

Astro's configuration system and build process is extremely simple and fast. Before starting a project, you'll have to think whether your website should be mainly a content-driven website offering static content or a more dynamic site with changing content.

Uniquely, Astro supports static site generation and dynamic websites without many problems. In the open-source community, other frameworks like Next.js and Nuxt.js support running on the server code. However, I have never been a fan. They're often complicated and have high build time and high memory. Astro is different.

We do this by choosing the rendering engine. We can choose between static (default), hybrid, and server.

See more here Configuration Reference on Astros' official website

In our astro configuration file astro.config.mjs let's update it to

import { defineConfig } from 'astro/config';

export default defineConfig({
  output: 'server'
})

This is much more interesting and will be used in the rest of the article. If you leave it static, then using the framework will make static HTML instead of dynamically rendering it as a server. It is good if you have a blog, webshop (with low-frequency updates), or other.` Using server mode makes an automatic API for each Astro file, making it possible to mix UI and server-side in one file.

Use React Or Vue as Astro integrations for interactivity?

I would say neither. Astro gives you a lot of things out of the box, such as code reusability, easy syntax, and making JS frameworks like Vue and React obsolete. Or at least not really that useful. Why have a React component when you can have an Astro component? If you need complicated things, it might still make sense to use libraries or frameworks for building more specialized things. It might make sense to use them anyway. For example, let's say you need to make a Kanban board. Well then, good luck doing that yourself. It's better to use a React-based library for that.

However, what I often resort to is using AlpineJS. This gives a little spice of interactivity while offering Astro the UI components and libraries.

Astro is truly an all-in-one framework, and when you use Astro to build web apps, it is often more productive to use no-library or smaller libraries such as AlpineJS.

Deploying Astro

Deploying Astro is out of the scope of this article, but it will come when I get to write it. Technical documentation is difficult to make.

In short, to deploy Astro:

If you have a static generated site with a content focus like a blog or landing page and want to optimize for SEO, you can build it.

On the other hand, if you have configured the output to be a server, you'll need to run this on a server and run it with Caddyfile or NGINX (or similar technology).

Subscribe to my newsletter if you want to be the first to read the latest article.

FAQs

Is the Astro framework open source?

Yes, it is, and it is released under an MIT license, meaning you'll use it as you'd like.

Is it good to use Astro for static websites?

For the most part. Astro is fast, and it is geared towards this. The only downside is that there are no themes to start with. This means you'll have to design most things using Tailwind, bootstrap, or custom CSS. 

Is Astro a static site generator?

Yes, but much more than that. It makes it possible to do SSG things while at the same time also calling APIs and mixing content-driven websites with dynamically driven websites.

How do I set up a repository for Astro?

Don't. Just follow the npm create astro@latest tutorial. It will create it for you automatically.

What file format is used for Astro?

It is a front-matter file format. This means it is split into two parts. The JavaScript code is in the --- top and the html-file after. It is typically used for static site generators as a Markdown format where the top is tabular data, and the bottom is Markdown.