Tilbage til emner

2. semester

Kom i gang med Astro

Kom i gang med Astro og lær at bygge komponenter.

Se undervisningsslides

Relevante links

Installation

Først skal du have Node.js installeret på din computer. Du kan downloade det fra nodejs.org.

Åbn en tom mappe i VS Code og kør følgende kommando i terminalen for at oprette et nyt Astro-projekt. Dette vil oprette en ny Astro-projekt i den aktuelle mappe.

npm create astro@latest .

Følg herefter instruktionerne (vælg med piltasterne) for at konfigurere dit projekt. Vælg følgende:

terminal
tmpl  How would you like to start your new project?
       ○ A basic, helpful starter project
       ○ Use blog template
       ○ Use docs (Starlight) template
       ● Use minimal (empty) template


deps  Install dependencies? (recommended)
       ● Yes  ○ No


git   Initialize a new git repository? (optional)
       ● Yes  ○ No

Dette giver dig en grundlæggende projektstruktur med de nødvendige filer og mapper til at komme i gang med Astro. Du kan se en oversigt over de oprettede filer og mapper nedenfor.

  • .vscode/
  • node_modules/
  • public/
  • src/
    • pages/
      • index.astro
  • .gitignore
  • astro.config.mjs
  • package-lock.json
  • package.json
  • README.md
  • tsconfig.json

Opret selv mapperne src/components, src/layouts og src/styles, hvis de ikke allerede er oprettet, og tilføj de nødvendige filer i dem.

De mapper, vi er interesserede i, er src/components, hvor vi kan oprette genanvendelige komponenter, og src/pages, hvor vi kan oprette sider til vores websted. src/styles/global.css er et godt sted at tilføje globale CSS-regler, der gælder for hele webstedet.

  • public/
  • src/
    • components/
      • Header.astro
    • layouts/
      • MainLayout.astro
    • pages/
      • index.astro
    • styles/
      • global.css

Nu kan du starte udviklingsserveren ved at køre følgende kommando i terminalen:

npm run dev

Dette vil starte en lokal server, hvor du kan se dit Astro-projekt i din browser. Som standard vil det være tilgængeligt på http://localhost:4321. Når du åbner denne adresse i din browser, bør du se en velkomstside fra Astro, der bekræfter, at dit projekt er oprettet korrekt.

Sørg for at stoppe serveren igen ved at trykke Ctrl + C i terminalen, når du er færdig.

Betinget rendering

Astro har indbygget understøttelse for betinget rendering, hvilket betyder, at du kan vise eller skjule indhold baseret på visse betingelser. Dette er nyttigt, når du vil vise forskelligt indhold til forskellige brugere eller under forskellige omstændigheder.