DEV Community 👩‍💻👨‍💻

Cover image for What is Astro.build
Tina Huynh
Tina Huynh

Posted on

What is Astro.build

Astro is a brand new framework for building websites. Astro is built by the team of open source developers behind Snowpack and Skypack, with additional contributions from the community.

Astro is a tool for building static websites with your favorite JavaScript framework. But it will ship zero JavaScript to the browser 🤯. End-users love fast-loading websites but developers love to build them with heavy JavaScript frameworks.

Astro Islands represent a leading paradigm shift for frontend web architecture. Astro extracts your UI into smaller, isolated components on the page. Unused JavaScript is replaced with lightweight HTML, guaranteeing faster loads and time-to-interactive (TTI). Astro Runtime is a production ready, data orchestration tool based on Apache Airflow that is distributed as a Docker image and is required by all Astronomer products.

Astro works a lot like a static site generator. You compose your website using UI components from your favorite JavaScript web framework (React, Svelte, Vue, etc). Astro renders your entire site to static HTML during the build. With Astro, you can use UI components from any JavaScript framework (React, Svelte, Vue). During build time, they will be rendered to static HTML. Astro works the other way around with a more intuitive approach. You start from scratch and just add what you need. That means that understanding what's going on isn't as big of a task, and setup becomes super simple. All you need are two commands (npm init astro && npm run build or astro build), and off you go!

Astro works with your favorite content sources. Pull content from the filesystem or fetch it remotely from your favorite CMS, database, or API. Astro supports both static output (SSG) and live server output (SSR) that can render your content on-demand. Bring your own component framework. Astro offers first-class support for front-end tools like React, Vue, Svelte, and Tailwind CSS. Avoid confusing configuration and get started in seconds: just type astro add.

Happy coding!

Top comments (0)

Classic DEV Post from 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!