Member-only story
Working With Astro — The Super Fast Web Framework
Ship minimal JavaScript
Astro is an all-in-one web framework for building fast, content-focused websites. Astro was designed for building content-rich websites. This includes most marketing, publishing, and documentation sites, blogs, portfolios, and some e-commerce sites.
Meanwhile, Astro might not be the right choice for some complex applications, such as admin dashboards, inboxes, social networks, to-do lists, etc.
Astro leverages server-side rendering over client-side rendering, and it is a Multi-Page Application (MPA) framework. An MPA website consists of multiple HTML pages written with HTML, CSS, and JavaScript (or TypeScript). MPA differs from Single-Page Application (SPA), which uses client-side rendering, and renders each route dynamically and directly in the browser.
Astro is superior to SPA for fast initial loading and short Time to Interactive (TTI), where TTI measures how long a page takes to become fully interactive.
Astro is UI-agnostic. Astro officially supports React, Preact, Solid, Svelte, Vue, and Lit. Code written by different frameworks can be mixed on the same page.
Does it sound like an amazing web framework?
Without further ado, let’s see how Astro works.
Install and Run Astro
Astro requires Node.js version “^14.18.0 || >=16.12.0”. Run the following command to install Astro:
% yarn create astro
yarn create v1.22.10
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Installed "create-astro@1.1.0" with binaries:
- create-astro
[##################################################################################################################] 114/114
Welcome to Astro! (create-astro v1.1.0)
Lets walk through setting up your new Astro project.✔ Where would you like to create your new project? … ./my-astro-site
✔ Which template would you like to use?
❯ Just the basics (recommended)
Blog
Portfolio
Documentation Site
Empty project
✔ Template copied!
✔ Would you like to install yarn dependencies? (recommended) … yes
✔ Packages…
