Skip to content

Latest commit

 

History

History
63 lines (50 loc) · 2.51 KB

README.md

File metadata and controls

63 lines (50 loc) · 2.51 KB

AstroLimitless: pushing Astro to its limits

This project intends to test some of the most common project requests/requirements I get on most of my jobs that I had in the past and see if Astro can handle them gracefully.

Why I'm doing this? I'm just curious, that's all.

List of requirements

  • Has React & TypeScript
  • Static pages: Fetch content from headless CMS at build time
  • Global state management shared between components without prop drilling
  • Custom theme (global)
  • Scoped css (e.g. .module.css)
  • ❌ SSR rendered content that needs to be changed or updated from the client (e.g. using @tanstack/query)
  • User Authentication with multiple hidden pages
    • Server-side rendered page
    • Client-side rendered page
  • Localisation and internationalisation
  • Embedding Google Analytics and other tracking tools
  • ❌ Design System in a Storybook
  • Testing
    • ❌ Unit
    • Visual (snapshot)/e2e
  • Server API function (or action) where secret keys are used
  • ❌ Incremental Static Regeneration (ISR)
  • Deploy to custom Docker based environment

🚀 Project Structure

Inside of your Astro project, you'll see the following folders and files:

/
├── public/
│   └── favicon.svg
├── src/
│   ├── components/
│   │   └── Card.astro
│   ├── layouts/
│   │   └── Layout.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
pnpm install Installs dependencies
pnpm dev Starts local dev server at localhost:4321
pnpm build Build your production site to ./dist/
pnpm preview Preview your build locally, before deploying
pnpm astro ... Run CLI commands like astro add, astro check
pnpm astro -- --help Get help using the Astro CLI