Start with Astro

Create the project

For my purpose, I use bun, though npm, yarn and pnpm (for node) are also supported

  bun create astro@latest

You'll be pleasently surprised by a helpful control center

To be explore Astro potential, I'd suggest using TypeScript set to Strict with Blog Template.

Project Setup

Go through the files
You'll find whole Astro setup in astro.config.mjs
Astro has built-in File Based Router that work similarly to one from Next.js

Astro File

Open any .astro file
Those files are astro components
Astro components use regular JSX syntax
At the very top of the file you'll see a part opened and closed by signature --- three dashes
You contain logic run on server in that part
This part is called frontmatter and is also used in .md collection files

Note for React devs: You don't have children there, instead you operate with slots. You can have multiple slots by naming them.

Content Collections

Go to /src/content/ directory

Reactivity?

Sure, you'll have to do yourself a favor and add your favourite framework by running command (In my case React):

  bun astro add react

And now you write yourself a React component.

Oh no, renders, but not really reactive?

A directive might help here 😉

  <YourReactComponent client:idle>

More about directives HERE

View Transitions?

Sure, they are as easy as importing a ViewTransitions script and ploping it to the head of the document.

import { ViewTransitions, slide } from 'astro:transitions';

---

<head>
  <ViewTransitions />
</head>
<body transition:animate={ slide({ duration: '.25s' }) }>
  ...
</body>

Yes, it's that easy! Though, there are some rules. Transitioned elements must match their specifiers between the transititons. More on them HERE

Prefetching whole pages?!

Also not a problem! LOOK HERE

Want everything Server Side Rendered?

Similiarly to adding react, just run an astro command and Astro will configure things for you:

  bun astro add node

In this case, in astro.config.mjs, it will add:

  outpu: 'serwer',
  adapter:  noode({
    mode: 'standalone'  
  })

Yes, it's that easy. Though, if you'd like to run astro on something else than Node (like Vercel or other PAAS), you'll have to look for other adapters made sepcifically for those platforms. For details, LOOK HERE

THIS IS NOT THE END!

You should be now rocking hard with Astro! Though, Astro has maany more features that are worth discovering.

Good luck, captains, and ship that thing already! 😃

peterycky/start-with-astro.md