Astro, Solid, Tailwind - Template

📚 Stack

Name	Description
Strapi	CMS
GraphQL	Alternative rendering for Astro
Astro	SSR framework that allows you to work with components from React, Solid, Vue, etc.
Solid	Very performant, JSX-based UI framework
Tailwind	CSS framework
Flowbite	Component library with support for SolidJS, React, etc. Optional & easily removed
Vanilla JS	Pure JS

🚀 Project Structure

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

/
├── public/
├── src/
│   └── components/
│       └── NavBar.astro
│   └── layouts/
│       └── Layout.astro 
│   └── pages/
│       └── graphql
│           └── [slug].astro 
│       └── posts
│           └── [slug].astro 
│           └── index.astro
│       └── index.astro
├── .gitignore
├── astro.config.json
├── package-lock.json
├── package.json
├── tailwind.config.json
└── tsconfig.js

File Descriptions

Path	Description
./src/components/NavBar.astro	Astro/Flowbite/Tailwind - Top NavBar
./src/layouts/Layout.astro	Astro - Wrapper component; includes astro-seo
./src/pages/grpahql/[slug].astro	Astro - Blog post renderer (optional) via GraphQL
./src/pages/posts/[slug].astro	Astro - Dynamic post renderer (optional)
./src/pages/posts/index.astro	Astro - Render all blogs; imported in index renderer (used to display blog posts in pages/index.astro)
./src/pages/index.astro	App entry point; renders sample blog content
./astro.config.json	Astro config; includes Tailwind & SolidJS plugins
./tailwind.config.json	Tailwind config; includes Flowbite plugin
./tsconfig.js	Manage invasive type checker

• 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 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

👀 Resources

Docs

• Astro
• SolidJS
• Tailwind
• Flowbite

Tutorials

• Solid Overview (~2 min)
• Astro Overview (~3 min)
• Tailwind Overview (~2 min)
• Flowbite Crash Course (~20 min)
• Integrating Strapi - 6 Part Lab

Other

• NextJS vs Astro Performance Comparison

🧶 Roadmap

• Add JSDoc
  • Add better-docs after this PR