Skip to content

bholmesdev/astro-client-when-rainy-in-ny

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

6 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Astro - client:rainy-in-ny 🌧

Yes, this actually shows you how to hydrate components ONLY when it's raining in NYC. Take that React "use client"!

πŸš€ Project Structure

These are the files you probably want to reference:

/
β”œβ”€β”€ src/
β”‚   └── components/
β”‚       └── Counter.jsx # what we're hydrating
β”‚   └── pages/
β”‚       └── index.astro # uses `client:rainy-in-ny`
β”œβ”€β”€ .env.example # sets WEATHER_API_KEY
β”œβ”€β”€ client-rainy-in-ny.mjs # implementation
└── astro.config.mjs # applies client directive

βš™οΈ Setup

This directive relies on the WeatherAPI.com for requesting the current forecast. To get an API key, you can create a free account here.

Then, create a .env file at the base of the project mirroring the .env.example template.

🧞 Commands

All commands are run from the root of the project, from a terminal:

Command Action
npm install Installs dependencies
npm run dev Starts local dev server at localhost:3000
npm run build Build your production site to ./dist/
npm run preview Preview your build locally, before deploying
npm run astro ... Run CLI commands like astro add, astro check
npm run astro -- --help Get help using the Astro CLI

πŸ‘€ Want to learn more?

Feel free to check Astro's "custom client directives" documentation.

About

Only hydrate components when you have rain water πŸ˜‰

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published