Astro installeren & project opzetten

[Annevd]

Installatie en mappenstructuur klaarzetten

[Annevd]

Installatie & Mappenstructuur klaarzetten

Installatie

Om mijn nieuwe Astro project te starten heb ik onderstaande stappen uitgevoerd:

• Run the following command in your terminal to start our handy install wizard: npm create astro@latest
• Confirm y to install create-astro
• When the prompt asks, “Where would you like to create your new project?” type in the name of a folder to create a new directory for your project, e.g. ./tutorial
• You will see a short list of starter templates to choose from. Use the arrow keys (up and down) to navigate to the “Empty” template, and then press return (enter) to submit your choice.
• When the prompt asks you if you plan on writing TypeScript, type n.
• When the prompt asks, “Would you like to install dependencies?” type y.
• When the prompt asks, “Would you like to initialize a new git repository?” type y.
• cd into your new project directory to begin using Astro
• If you skipped the “Install dependencies?” step during the CLI wizard, then be sure to install your dependencies before continuing.
• You can now start the Astro dev server and see a live preview of your project while you build!: npm run dev

Projectstructuur

Elk Astro project heeft op z'n minst deze directories en files:

• src/* - Your project source code (components, pages, styles, etc.)
• public/* - Your non-code, unprocessed assets (fonts, icons, etc.)
• package.json - A project manifest.
• astro.config.mjs - An Astro configuration file. (recommended)
• tsconfig.json - A TypeScript configuration file. (recommended)

Zo ziet mijn projectstructuur er in het begin uit:

• In public zitten je fonts en images
• In src zitten:
  • In components zitten al je componenten, dit kan je vergelijken met de lib Sveltekit.
  • In layouts zitten alle layouts, dit kan je vergelijken met de +layout.svelte.
  • In pages zitten alle pagina's, dit kan je vergelijken met de +page.svelte in de folders. In Astro hoeven de pagina's niet in een eigen folder.
  • In styles staat de global.css

Bronnen

• Astro installeren
• Project structuur
• Pages
• Routing

Commits

• Repo op het moment van de clean Astro setup