Astro test 1

This project tests use of react, vue, svelte, markdown and MDX components in the same project

In addition we will test use of Material-UI for React and maybe some other UI frameworks.

Installation

I followed Get started documentation to setup project. No remarks on that for now.

To add dependencies I used astro CLI

Eslint

There is a eslint plugin for astro file. The link to documentation is here I have not tested it yet. Let's first see if we need it.

Frameworks

Major frameworks are supported, but this is just a begining, usually one will use other supporting libs of an framework. Currently CSS-in-JS is not supported, see this issue

# add react libs
npm i @astrojs/react react react-dom
npm i -D @types/react
# svelte
npm i @astrojs/svelte svelte

Tailwind

Astro offers integration for tailwind

Components

The documentation describes astro component approach. It uses basics of JSX and enables passing props to components. The approach is focused on maximal plain HTML/JS/CSS support, so no need for className and cammelCase html props! It feels like a natural html file. The components use fencer --- to indicate javascript part of the component.

Passing child elements is done using <slot/> tag. It supports named slots.

Style tag can be used in components and it is scoped by default.

SSR

There are number of supported SSR solution. For me Node and Deno are most interesting.

Node

The adapter will create output that can be runned in node server like Express.

More information is in documentation

npm i @astrojs/node

Deno

More information in documentation

npm i @astrojs/deno

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/
│   └── 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:

👀 Want to learn more?

Feel free to check our documentation or jump into our Discord server.