Deploy backend til Vercel

Efter lektion 17 kører jeres system på jeres egen maskine: siden, Express og gruppens database i Neon. Til D2 skal det ligge på én URL, så andre kan prøve den centrale brugerhandling. Det er samme Vercel-projekt som i lektion 9 — nu med en server.

Vejledningen tager ca. 45 minutter. Del 1 laver I sammen i repoet. Del 2 gør ejeren af Vercel-projektet, fordi Hobby-planen kun deployer ejerens push.

Hvad ændrer sig

Siden og API'et kommer fra samme adresse. Derfor skal fetch ikke længere have http://localhost:3000 foran — og der er ikke længere brug for CORS. cors() må gerne blive stående.

Del 1 — Gør repoet klar (hele gruppen)

1. Lav en mappe public/ ved siden af server.js. Flyt alle HTML-, CSS- og JavaScript-filer til frontend derind. server.js, repository-filerne og package.json bliver, hvor de er.

server.js
patients.js
maalinger.js
package.json
.gitignore
public/
  index.html
  login.html
  …
  style.css
  app.js

2. Ret alle fetch-URL'er i frontend, så de starter med /api/:

// før
const res = await fetch("http://localhost:3000/api/patients");
// efter
const res = await fetch("/api/patients");

3. I server.js: lad Express servere public/, når I kører lokalt. Linjen skal stå efter express.json() og før jeres routes:

app.use(express.static("public"));

Det er static files: filer Express udleverer, fordi de ligger i mappen, uden en route pr. fil. I lektion 13 åbner I HTML'en ved siden af API'et. Her får siden og API'et samme adresse.

På Vercel gør express.static ingenting — dér serverer Vercel selv public/. Lokalt er det linjen, der gør, at http://localhost:3000 viser jeres forside.

Tilføj også en route til /, lige under. Vercel serverer filerne i public/ — men selve / sender den videre til Express, og så skal Express selv sende forsiden:

const path = require("path"); // øverst i filen

app.get("/", (req, res) => {
  res.sendFile(path.join(__dirname, "public", "index.html"));
});

__dirname er mappen, server.js ligger i. Hedder jeres forside noget andet end index.html, så skriv det navn.

4. Start serveren, og åbn http://localhost:3000 — ikke HTML-filen direkte. Klik rundt, og udfør den centrale handling. Alt skal virke som før.
5. Tjek at .env ikke kommer med:

git status

6. Commit og push. Det deployer ikke endnu som server — det gør ejeren i del 2.

Del 2 — Vercel (ejeren)

Ejeren af gruppens Vercel-projekt fra lektion 9 gør resten. I skal ikke oprette et nyt projekt. I skifter typen på det, I har, og URL'en bliver den samme.

Rækkefølgen er vigtig: først indstillingerne, så et push. Vercel bygger med de indstillinger, der gælder, når der kommer et push.

7. Log ind på vercel.com. Under Projects: tryk ⋯ på gruppens projekt, og vælg Settings.

   Project Settings åbner på General. Gå til Build and Deployment i menuen til venstre.

   • Under Framework Settings: vælg Express i dropdown'en Framework Preset (den står på Other fra lektion 9). Alle Override-knapper skal være slået fra. Tryk Save.

     Når Express er valgt, står Build Command på None og Output Directory på N/A:

   • Længere nede, Root Directory: mappen, hvor server.js og package.json ligger. Ligger de i roden af repoet, skal feltet være tomt. Tryk Save, hvis du har ændret det.

8. Settings → Environment Variables. Tilføj:

   • Key: DATABASE_URL
   • Value: gruppens connection-string — samme som i .env, med sslmode=verify-full. Værdien vises som prikker.
   • Environments: lad Production and Preview stå.
   • Gem.

   I kan også trykke Import .env eller indsætte hele linjen fra .env i Key-feltet — så deler Vercel den selv i navn og værdi.

9. Ejeren puller og pusher fra sin egen konto. Er der ikke noget nyt at committe, så lav et tomt commit — samme trick som i D1:

git pull
git commit --allow-empty -m "redeploy"
git push

10. Når deployet er Ready, så åbn URL'en:
    • https://…vercel.app/api/patients skal vise JSON fra Neon.
    • https://…vercel.app/ skal vise forsiden.
    • Udfør den centrale handling på siden. Ejeren finder rækken i Neons SQL-editor.
11. Åbn URL'en på en telefon eller hos en anden i gruppen. Det skal virke dér også — det er hele pointen.

Tjekliste

• Frontend ligger i public/, og fetch bruger /api/…
• http://localhost:3000 virker lokalt med express.static("public")
• .env er ikke i repoet. Connection-stringen står i Vercel
• /api/patients på den live URL viser data fra Neon
• Den centrale handling virker på den live URL, også fra en anden enhed

Hvis I sidder fast

• 500 og serverfejl på den live URL: åbn projektet i Vercel → Logs. Står der ECONNREFUSED, mangler DATABASE_URL, eller ejeren har ikke pushet efter at have sat den. Står der password authentication failed, er værdien forkert. Ret den, og push et tomt commit igen — miljøvariabler gælder først fra næste deploy.
• {"error":"not found"} på https://…vercel.app/, men /index.html virker: routen app.get("/", …) med res.sendFile mangler.
• 404 på /index.html: filerne ligger ikke i public/, eller Root Directory peger på den forkerte mappe.
• Gul advarsel i Build Logs: npm warn Unknown env config "cache-dir": den kommer fra Vercel selv og er ufarlig.
• API'et giver 404, men forsiden virker: Vercel har ikke fundet serveren. Tjek, at server.js og package.json ligger i Root Directory, at express står i package.json, og at Override er slået fra ved Build Command og Output Directory.
• Siden virker, men tabellen er tom, og Console viser en fejl om localhost: en fetch peger stadig på http://localhost:3000. Ret den til /api/….
• Et push kommer ikke på den live URL: det var ikke ejeren, der pushede. Ejeren puller og pusher igen.
• Lokalt viser http://localhost:3000 {"error":"not found"}: express.static("public") mangler, eller den står under 404-handleren.

Eksempel

Et komplet eksempel med patienter — server.js, patients.js, public/index.html og public/app.js — viser hele strukturen. Det er koden fra slidesne, klar til deploy.