Skip to main content

Astro

Image Astro is an open source project released under the MIT license. It is and always will be free. It is built by the team of open source developers behind Snowpack and Skypack, with additional contributions from the community. It is a new kind of static site builder that delivers lightning-fast performance with a modern developer experience.

Best tools used for designing Astro :

  • Fully-Featured : Astro supports TypeScript, Scoped CSS, CSS Modules, Sass, MDX, Markdown and any npm packages.

  • On-Demand Components : Astro can automatically hydrate interactive components when they become visible on the page and in case if the user never sees it, they never load it.

  • 100% Static HTML, No JS : It remove all JavaScript from final build by default and renders entire page to static HTML.

  • Bring Your Own Framework (BYOF) : It build site using Vue, Preact, web components, React.

Starting a new project in Astro is easy by following below steps:

create your project 

mkdir new-project-directory
cd new-project-directory
npm init astro

> install your dependencies

npm install

> start the dev server and open your browser

npm run dev

      
## **How Astro Works :**
  
  ---
With the help of Astro, you can compose your website using UI components from favorite JavaScript web framework like React, Vue, Svelte. It give entire site  to static HTML during the build which results fully static website with all JavaScript removed from the final page.   
Astro shines when a component needs some JavaScript and then Astro loads only that one component. In Astro, **partial hydration** is built into the tool itself while in other full-stack web frameworks level of per-component optimization would be impossible without loading entire page in JavaScript which delay interactivity.  
It's newcompiler is written in Go and distributed as **WASM** and can be run it right in browser, or on the server in Node.js and Deno.


## **Learn `.astro` Syntax :**

---

Many files using the `.astro` file extension you will encounter while learning Astro. This is **Astro's Component Syntax** . It is a special HTML-like format which Astro uses for templating.


## **Main design principle of ASTRO :**
---
 It's main design principle is to lead developers. Astro not only build site **"fast by default"** but also give familiar, modern developer experience.

 ## **References :**
  ---
 1. [astro.build](https://astro.build/blog/introducing-astro/)

 ## **Conclusion**
 ---
You've successfully learnt about __Astro__.

Keep exploring Open Source :)

Contributor : [Binita Kumari](https://github.com/Binita-tech)