Tilbage til emner

2. semester

Opsætning af et gruppeprojekt i Astro

Lær hvordan du kan opsætte et gruppeprojekt i Astro, så I kan samarbejde effektivt.

Se undervisningsslides

Relevante links

TL;DR

  1. Den projektansvarlige opretter et nyt Astro-projekt og tilføjer de andre gruppemedlemmer som samarbejdspartnere på GitHub.
  2. De øvrige gruppemedlemmer kloner det nye repository ned på deres lokale maskine og kører npm install i terminalen for at installere de nødvendige dependencies.
  3. Alle gruppemedlemmer kan nu arbejde på projektet og pushe deres ændringer til GitHub.
  4. Den projektansvarlige lægger projektet på Netlify for at gøre det tilgængeligt online.

Start med at udpege én fra gruppen, der skal være ansvarlig for at oprette og opsætte projektet samt tilføje de andre som samarbejdspartnere (collaborators) på GitHub.

Den projektansvarlige

Den projektansvarlige starter med at oprette et nyt Astro-projekt ved at åbne en ny mappe i VS Code og køre følgende kommando i terminalen:

Kig evt i installationsvejledningen Kom i gang med Astro

npm create astro@latest .

Opret relevante filer og mapper i projektet, og lav en første commit til GitHub. Det bør ca. se sådan ud:

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

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.

Man kan evt. oprette en src/layouts-mappe til at lægge layout-komponenter i, som kan bruges på tværs af flere sider.

Test evt. om der er problemer med at køre projektet ved at starte udviklingsserveren med følgende kommando:

npm run dev

Når projektstrukturen er på plads, så få det lagt på GitHub, og tilføj de andre gruppemedlemmer som samarbejdspartnere (collaborators) på GitHub, så de kan få adgang til repository’et og arbejde på det.

De øvrige gruppemedlemmer

De øvrige gruppemedlemmer kloner det nye repository ned på deres lokale maskine og kører følgende kommando i terminalen for at installere de nødvendige dependencies:

npm install

Nu kan alle gruppemedlemmer arbejde på projektet og pushe deres ændringer til GitHub.

Husk at branches og pull request er jeres venner, når I arbejder sammen på et projekt. Det hjælper med at holde styr på ændringer og gør det nemmere at samarbejde uden at overskrive hinandens arbejde.

Læg projektet på Netlify

Når I er klar til at dele jeres projekt online, kan den projektansvarlige lægge det på Netlify. Det gør I ved at oprette en konto på Netlify og forbinde jeres GitHub repository til Netlify. Herefter kan I vælge at deploye jeres projekt, og Netlify vil håndtere resten.

Deployment branch

Det er en god idé at have en dedikeret branch til deployment, f.eks. main eller production, som I kun merger færdige og testede ændringer ind i. På den måde sikrer I, at jeres live site altid er stabilt og fungerer som det skal.

På Netlify skal I sørge for at sætte den rigtige branch som deployment branch, så det er den, der bliver deployet, når I merger ændringer ind i den.