Welcome to ITMAGINATION's demo.

November 23, 2022 ยท View on GitHub

One of our Senior Angular Developers, Zino Adidi, has set up a project where he made Web Components, React, Angular, Vue, and Lit run together on one page.

You may also see his approach to integrating Angular, because at the time of development this was not a straightforward task.

Be sure to read the accompanying post here: https://www.itmagination.com/blog/astro-micro-frontends

ASTRO GENERATED TEXT BELOW


Welcome to Astro

Open in StackBlitz

๐Ÿง‘โ€๐Ÿš€ Seasoned astronaut? Delete this file. Have fun!

basics

๐Ÿš€ 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:

CommandAction
npm installInstalls dependencies
npm run devStarts local dev server at localhost:3000
npm run buildBuild your production site to ./dist/
npm run previewPreview your build locally, before deploying
npm run astro ...Run CLI commands like astro add, astro preview
npm run astro --helpGet help using the Astro CLI

๐Ÿ‘€ Want to learn more?

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