Learning Astro - Pre-Requisites Skill & Setup Environment

#Introduction

Welcome to the Learning Astro series! This series will take you to mastery of Astro — a modern web framework for building blazing-fast, content-driven sites — from conceptual foundations all the way to production readiness. There are 24 episodes in total, arranged into six phases, starting from pre-requisites and ending with the latest stable features.

But before you write your first line of Astro code, there are a few core skills and software you must have. Why do these prerequisites matter? Because Astro is not a framework above everything else — it works best when you already understand HTML, CSS, and JavaScript. Almost every Astro template and component is written in a form that resembles HTML, so this three-technology foundation will make your journey far smoother.

Episode 0 is your roadmap: we will confirm your core skills, set up Node.js and an editor, install the Astro CLI, and create your first project. Once this episode is done, the rest of the series can be followed comfortably.

#Core Skills You Must Master

#Modern HTML, CSS, and JavaScript

Astro uses the .astro extension whose contents look almost like HTML: opening tags, closing tags, attributes, and nested elements. You must be able to write semantic HTML structures without looking up references. On the styling side, CSS is Astro's default language — whether plain CSS, CSS modules, or a framework like Tailwind.

JavaScript is just as important. Astro supports modern JavaScript (ES6+) in component frontmatter and in scripting. At minimum you should understand const and let, arrow functions, template literals, destructuring, and async/await. A small example:

Common modern JavaScript

const nama = "Arman";
const sapa = (orang) => `Halo, ${orang}!`;
const [pertama, kedua] = ["blog", "docs"];
const data = await fetch("/api/statistik").then((r) => r.json());

The code above uses the arrow function sapa and destructuring — two patterns you will encounter very often throughout this series.

#Component Concepts and Static Site Generation

Astro is built on the idea of components: reusable pieces of UI that accept data through props. If you have used components in any framework, the concept is the same. What sets Astro apart is its static site generation (SSG) philosophy: pages are rendered into pure HTML at build time, not when the browser loads the page. The result is a lightweight, fast site.

Also understand the key difference between these three terms: static rendering (HTML created at build time), server rendering (HTML created per request), and client rendering (HTML created by JavaScript in the browser). Astro supports all three, and you will learn when to use which in episodes 6 and 21.

#Package Manager and Command Line

Astro is managed through npm. You should be comfortable running commands in the terminal, using npm install, reading error output, and understanding the contents of package.json. If you are used to pnpm or yarn, that is fine too — this whole series uses npm for consistency.

#Software You Need to Set Up

#Node.js LTS

Astro requires the latest Node.js LTS version. First verify whether Node is already installed:

node --version
npm --version

node --version should print a version number like v22.x.x or newer. If it is not there, install Node.js LTS from the official site or through your operating system's package manager. As for the OS, Astro runs on Windows, macOS, and Linux — just make sure you have at least 8 GB of RAM so that builds and the dev server feel comfortable.

#Editor and Extension

The main recommendation is VS Code with the official community Astro extension. This extension provides syntax highlighting for .astro files, component autocomplete, and TypeScript integration. After installing it, try opening an empty file ending in .astro and make sure the editor recognizes the syntax.

#Modern Browser

Use a recent browser such as Chrome, Firefox, or Edge. Because Astro produces modern HTML and CSS, an outdated browser will make debugging difficult. Also enable DevTools — you will use them to inspect elements, view the network, and measure performance starting in episode 9.

#Creating Your First Astro Project

#The create-astro Command

With all prerequisites in place, run the following command in your terminal to create a new project:

npm create astro@latest

The npm create astro@latest command will ask for the project directory name, the starting template, whether to use TypeScript, and a few other options. Choose the minimal (Empty) template for practice, then wait until the dependencies finish installing.

#Running the Dev Server

Enter the project directory and run the dev server:

cd nama-project
npm run dev

The dev server runs at http://localhost:4321. Every file change is immediately visible in the browser through live reload and Hot Module Replacement (HMR) — this is why episode 3 will dissect the project structure in depth.

#Readiness Summary

Here is a recap of the prerequisites you set up in episode 0:

• Modern HTML, CSS, and JavaScript (ES6+) as the language foundation.
• The concepts of components, templates, and static site generation.
• The npm package manager and the habit of using the command line.
• Node.js LTS installed and verified.
• VS Code with the Astro extension and a modern browser.
• A first Astro project successfully running on the dev server.

If anything is not yet in place, stop and complete it before continuing. A strong foundation will make the next 23 episodes feel far lighter.

#Conclusion

In episode 0 you prepared the footing for the whole series: understanding the core skills needed, setting up Node.js LTS, an editor, and a browser, and successfully creating your first Astro project running on the dev server.

The key takeaways:

• Astro uses HTML, CSS, and JavaScript — master all three first.
• Astro builds sites with the concepts of components and static site generation.
• Node.js LTS must be installed and verified with node --version.
• Use VS Code with the Astro extension for the best experience.
• npm create astro@latest is your gateway to a new project.
• The dev server runs at http://localhost:4321 with live reload.

In the next episode 1, we will cover the history, background, and why you need Astro — from the evolution of web development, the birth of Astro as a framework for content-focused sites, to its comparison with Jamstack, Gatsby, and Next.js. Make sure your environment is ready, because the Learning Astro journey has only just begun!