Awesome
Learning Astro (a "meta-framework")
Just one of the things I'm learning. https://github.com/hchiam/learning and https://github.com/hchiam/learning-frameworks
The idea: any JS framework --> output and serve just HTML. (Plus only the JS you need, when you need it.)
React and Vue and Svelte and Vanilla JS, etc. =(Astro)=> native HTML + JS
https://github.com/snowpackjs/astro
https://css-tricks.com/newsletter/255-thoughts-on-astro
https://www.youtube.com/watch?v=dsTXcSeAZq8
- default = no client-side JS by default on components
client:load
= immediately/always hydrate component with JSclient:idle
= when you're freeclient:visible
= when visible
From scratch
mkdir new-project-directory
cd new-project-directory
npm init astro # follow instructions
npm install
npm start # http://localhost:3000/
Starting by testing out this repo
git clone https://github.com/hchiam/learning-astro.git && cd learning-template && npm install && npm start;
Deploy
npm run build # build output goes to /dist by default, so you can deploy from /dist
My own example project
https://github.com/hchiam/astro-calendar
https://astro-powered-calendar.surge.sh
Example project starters
https://github.com/snowpackjs/astro/tree/main/examples (go into a folder to see example setup command, for example npm init astro -- --template with-tailwindcss
)
Learn more
https://docs.astro.build/core-concepts/project-structure
Everything below was auto-generated by npm init astro
:
Welcome to Astro
š§āš Seasoned astronaut? Delete this file. Have fun!
š Project Structure
Inside of your Astro project, you'll see the following folders and files:
/
āāā public/
ā āāā robots.txt
ā āāā favicon.ico
āāā src/
ā āāā components/
ā ā āāā Tour.astro
ā āāā pages/
ā āāā index.astro
āāā package.json
Astro looks for .astro
or .md
files in the src/pages/
directory. Each page is exposed as a route based on its file name.
There's nothing special about src/components/
, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
Any static assets, like images, can be placed in the public/
directory.
š§ Commands
All commands are run from the root of the project, from a terminal:
Command | Action |
---|---|
npm install | Installs dependencies |
npm run start | Starts local dev server at localhost:3000 |
npm run build | Build your production site to ./dist/ |
š Want to learn more?
Feel free to check our documentation or jump into our Discord server.