Prototypdriven utveckling

Öppna PowerShell som administratör. Högerklicka på Start-menyn och välj "Terminal (administratör)" eller "Windows PowerShell (administratör)".

Kör installationskommandot:

wsl --install -d Ubuntu

Det här kommandot installerar både WSL 2 och Ubuntu på en gång.

Starta om datorn när du blir ombedd.

Efter omstart öppnas Ubuntu vanligtvis automatiskt i ett nytt fönster. Om det inte händer inom någon minut: tryck på Windows-tangenten, skriv "Ubuntu" och klicka på Ubuntu-appen.

Vänta tills installationen är klar — det kan ta några minuter — och skapa sedan:

• Ett användarnamn — små bokstäver, inga mellanslag (t.ex. anna)
• Ett lösenord — du kommer inte se några tecken när du skriver, det är normalt

Kontrollera att du är inne i Ubuntu. Din prompt ska se ut ungefär så här:

anna@datornamn:~$

Om du ser PS C:\... är du fortfarande i PowerShell — då har något gått fel.

Med Ubuntu öppet, kontrollera att allt fungerar genom att fråga efter Ubuntu-versionen:

lsb_release -a

Du ska se något i stil med Ubuntu 24.04 LTS. Då är du redo för nästa steg.

Uppdatera systemet:

sudo apt update && sudo apt upgrade -y

Detta kan ta några minuter första gången. Skriv ditt Ubuntu-lösenord när det efterfrågas.

Installera grundläggande verktyg:

sudo apt install -y curl git build-essential

Installera nvm (Node Version Manager) — det enklaste sättet att hantera Node.js:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

Ladda om terminalen så att nvm blir tillgängligt:

source ~/.bashrc

Installera senaste LTS-versionen av Node.js:

nvm install --lts
nvm use --lts

Verifiera installationen:

# bör visa v20.x.x eller senare
node --version
# bör visa 10.x.x eller senare
npm --version

Kör (fortfarande i Ubuntu-terminalen):

curl -fsSL https://claude.ai/install.sh | bash

Verifiera installationen:

claude --version

Om kommandot inte hittas, stäng terminalen och öppna en ny — PATH behöver uppdateras.

Starta Claude Code för första gången:

claude

Första gången du kör claude får du några frågor i terminalen:

1. Välj autentiseringsmetod — välj "Claude account with subscription" om du har Pro/Max/Team. Välj "Anthropic Console (API)" om du har en Console-plan med API-nycklar.
2. Bekräfta i webbläsaren — en webbläsare öppnas i Windows där du loggar in på ditt Claude-konto och godkänner åtkomsten. Om webbläsaren inte öppnas automatiskt: kopiera URL:en som visas i terminalen och klistra in den manuellt.
3. Återgå till terminalen — när du godkänt i webbläsaren ser du en bekräftelse i terminalen, och Claude Code startar i interaktivt läge.

Du är nu inne i Claude Code och kan börja chatta. För att avsluta skriver du /exit och trycker Enter (eller Ctrl+C två gånger).

Kontrollera att allt är friskt. Tillbaka i Ubuntu-terminalen (utanför Claude Code), kör:

claude doctor

Detta diagnostiserar din installation och flaggar eventuella problem.

Sätt namn och e-post (använd e-postadressen kopplad till ditt GitHub-konto):

git config --global user.name "Ditt Namn"
git config --global user.email "din.epost@example.com"

Sätt main som standard för nya repon (modern konvention):

git config --global init.defaultBranch main

Generera en SSH-nyckel för GitHub:

ssh-keygen -t ed25519 -C "din.epost@example.com"

Tryck Enter för att acceptera standardplats. Du kan välja en passphrase eller lämna tomt (Enter två gånger).

Starta SSH-agenten och lägg till nyckeln:

eval "$(ssh-agent -s)"
ssh-add ~/.ssh/id_ed25519

Kopiera den publika nyckeln. Den enklaste metoden i WSL är att skicka direkt till Windows-urklipp:

cat ~/.ssh/id_ed25519.pub | clip.exe

Nyckeln ligger nu i urklippet — redo att klistras in på GitHub. Vill du se den först, kör cat ~/.ssh/id_ed25519.pub separat. Den börjar med ssh-ed25519 och slutar med din e-post.

Lägg till nyckeln i GitHub:

# 1. Gå till github.com/settings/keys
# 2. Klicka "New SSH key"
# 3. Title: "WSL Ubuntu – min laptop"
# 4. Klistra in nyckeln och klicka "Add SSH key"

Testa anslutningen:

ssh -T git@github.com

Du får en varning om okänd värd första gången — skriv yes. Sedan ska du se: Hi <ditt-användarnamn>! You've successfully authenticated...

Logga in på claude.ai och starta en ny chatt. Beskriv vad prototypen ska göra — fokus ska ligga på användarvärde och flöde, inte teknik.

Skapa en interaktiv prototyp av en webbtjänst där en medborgare kan anmäla en felaktig gatlykta. Användaren ska kunna ange plats på en karta, ladda upp en bild, och få bekräftelse med ett ärendenummer. Gör det som en artefakt i React.

Claude svarar med en körbar artefakt — en interaktiv komponent som öppnas i en panel till höger. Du kan klicka runt i prototypen direkt.

Iterera. Begär ändringar i naturligt språk:

Lägg till ett steg där användaren kan välja typ av fel (släckt, blinkar, skadad armatur). Lägg också till en bekräftelse-skärm med ett uppskattat åtgärdsdatum.

Claude uppdaterar artefakten utan att du behöver börja om. Fortsätt tills prototypen visar de viktigaste flödena och du har något att visa upp.

Dela prototypen för feedback. Klicka på "Publish"-knappen i artefakten — det skapar en publik länk till en körbar version som du kan skicka till intressenter eller tilltänkta användare för feedback.

Spara prototypen och chatten som underlag inför utvecklingsfasen. Du kommer behöva både den körande prototypen och den dialog som ledde fram till den när du senare skapar en utvecklingsplan.

Be Claude.ai (samma chatt där prototypen skapades) sammanfatta prototypen i en utvecklingsplan:

Baserat på prototypen ovan, skapa en utvecklingsplan som innehåller: (1) en kort produktbeskrivning, (2) en lista över viktigaste funktionerna i prioritetsordning, (3) datamodell, (4) tekniska beroenden, (5) en föreslagen utvecklingsordning i konkreta steg. Returnera som markdown.

Komplettera planen med tre avgörande tilläggsavsnitt — dessa är obligatoriska för prototyper inom Nivå 02 och behandlas i detalj i steg 7–9:

• Teknikstack & ramverk — vilka verktyg, språk och bibliotek ska användas?
• Tillgänglighetskrav — vilken WCAG-nivå ska uppnås och vilka funktioner är särskilt känsliga?
• Testdriven utveckling — vilka delar är affärskritiska och kräver tester?

Planen är inte komplett förrän dessa tre områden är tydligt definierade.

Spara den färdiga planen som PLAN.md i projektets framtida rot. Den används senare av Claude Code för att förstå projektets sammanhang.

Skapa en projektmapp i ditt Linux-hem (snabbare än Windows-filsystemet):

mkdir -p ~/projekt/mitt-forsta-projekt
cd ~/projekt/mitt-forsta-projekt

Initiera ett Git-repo:

git init

Skapa en startfil:

echo "# Mitt första projekt" > README.md

Skapa en .gitignore (anpassad för Node.js — ändra för andra språk):

cat > .gitignore <<EOF
node_modules/
.env
.DS_Store
*.log
EOF

Starta Claude Code i projektmappen:

claude

Första gången du startar Claude Code i en ny mapp händer två saker:

1. Förtroendefråga. Claude Code frågar om du litar på filerna i mappen. Svara Yes — mappen är ju tom och skapad av dig.
2. Behörigheter. När Claude vill skriva filer eller köra kommandon kommer den att be om ditt godkännande första gången per typ av operation. Du kan välja Yes, Yes, and don't ask again for this session, eller No. Var sparsam med "don't ask again" tills du litar på vad Claude gör.

Be Claude hjälpa dig komma igång. Skriv till exempel:

Skapa en enkel Node.js-applikation med en index.js som loggar "Hej världen", samt en package.json. Lägg också till instruktioner i README.md.

Claude visar vilka filer den vill skapa eller ändra och väntar på din bekräftelse innan den gör något. När du är nöjd, lämna Claude Code med /exit (eller Ctrl+C två gånger).

Kontrollera att filerna faktiskt skapades:

ls -la

Du bör se index.js, package.json, README.md, .gitignore och mappen .git/.

Skapa ett nytt repo på GitHub:

# 1. Repository name: mitt-forsta-projekt
# 2. Public eller Private — välj Private om du inte vill
#    att andra ska kunna se din kod (kan ändras senare)
# 3. "Initialize this repository with:" — lämna ALLA
#    rutor obockade (du har redan README, .gitignore lokalt)
# 4. Klicka "Create repository"

Efter att du klickat skapa visar GitHub en sida med kommandon under rubriken "…or push an existing repository from the command line". Ovanför kommandona finns två flikar: HTTPS och SSH — klicka på SSH (vi har redan satt upp SSH-nyckel).

Kopiera SSH-URL:en, som ser ut så här: git@github.com:dittnamn/mitt-forsta-projekt.git.

Tillbaka i Ubuntu-terminalen (i din projektmapp), koppla det lokala repot till GitHub:

git remote add origin git@github.com:dittnamn/mitt-forsta-projekt.git

Verifiera att det blev rätt:

git remote -v

Du ska se URL:en två gånger — en för fetch, en för push.

Gör din första commit och push:

git add .
git commit -m "Initial commit"
git branch -M main
git push -u origin main

Ladda om GitHub-sidan — dina filer ska nu synas där.

Automatiserade tester i webbläsaren. Använd axe DevTools som tillägg i Chrome eller Edge. Det är samma motor som många kommersiella tjänster använder och fångar de flesta WCAG-överträdelser direkt.

• Installera axe DevTools-tillägget
• Öppna din körande app i WSL via npm run dev
• Öppna DevTools (F12), klicka på axe-fliken, kör en scan på varje vy
• Åtgärda alla "Critical" och "Serious"-fel innan deploy

Komplettera med Lighthouse (inbyggt i Chrome DevTools) för en oberoende score.

Automatiserade tester i koden. Lägg in tillgänglighetstester i din test-suite så att regressioner fångas vid varje push. För en JavaScript-stack är jest-axe eller vitest-axe standardvalet:

npm install --save-dev vitest-axe @testing-library/react

Be Claude Code skriva tillgänglighetstester för dina komponenter:

Skriv tillgänglighetstester med vitest-axe för formulärkomponenten. Testet ska köra axe-motorn på den renderade komponenten och misslyckas om någon överträdelse hittas. Använd realistiska testdata.

Tangentbordstest manuellt. Lägg undan musen och navigera hela appen med bara tangentbordet:

• Tab — flytta framåt mellan interaktiva element
• Shift+Tab — flytta bakåt
• Enter / Space — aktivera knappar och länkar
• Pilar — navigera inom komponenter (menyer, listor, radioknappar)
• Esc — stäng dialoger

Kontrollera att: fokusringen alltid är synlig, fokus aldrig fastnar, modal-dialoger fångar fokus korrekt, och tab-ordningen följer den visuella ordningen.

Skärmläsartest. Installera NVDA — kostnadsfri skärmläsare för Windows. Öppna NVDA i Windows och navigera till din app i WSL via localhost.

• Lyssna på hur sidan annonseras vid laddning — får du grepp om vad sidan handlar om?
• Navigera via rubriker (H-tangenten i NVDA) — finns en logisk hierarki?
• Fyll i ett formulär — är fältens namn och felmeddelanden tydliga?
• Testa dynamiska uppdateringar — annonseras nya meddelanden via aria-live?

Dokumentera resultat och åtgärder. Skapa en TILLGANGLIGHET.md i projektets rot där du listar:

• Datum för senaste granskning
• Verktyg som använts
• Funna problem och deras status (åtgärdat / planerat / accepterat med motivering)
• Vilka delar som inte uppfyller WCAG 2.1 AA och varför

Detta dokument är grund för den tillgänglighetsredogörelse som krävs enligt DOS-lagen om prototypen vidareutvecklas till produktion.

Först måste appen bli en webbserver som lyssnar på en port — en container utan exponerad tjänst går inte att deploya. Be Claude Code uppdatera index.js till en HTTP-server, eller skapa filen själv:

// Enkel webbserver utan externa beroenden
import { createServer } from 'http';

const PORT = process.env.PORT || 3000;

createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' });
  res.end('Hej från Sundsvall!');
}).listen(PORT, () => {
  console.log(`Server lyssnar på port ${PORT}`);
});

Uppdatera även package.json så Docker-containern vet hur appen startas:

{
  "name": "mitt-forsta-projekt",
  "version": "1.0.0",
  "type": "module",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  }
}

Skapa en Dockerfile i projektroten. Den här minimala versionen fungerar för enkla Node.js-appar:

# Liten, säker basbild — Alpine är ~50MB istället för ~300MB
FROM node:20-alpine

WORKDIR /app

# Kopiera package-filer och installera beroenden först
# (separata steg = bättre Docker-cachning vid kodändringar)
COPY package*.json ./
RUN npm ci --omit=dev

# Kopiera resten av koden
COPY . .

# Dokumentera vilken port containern lyssnar på
EXPOSE 3000

# Kör inte som root i produktion
USER node

CMD ["npm", "start"]

Eller be Claude Code: "Skapa en produktionsklar Dockerfile för det här Node.js-projektet enligt best practice."

Skapa en .dockerignore så att onödiga filer inte hamnar i din image (snabbare bygg, mindre attackyta):

node_modules
npm-debug.log
.git
.gitignore
.env
.env.*
.vscode
.idea
README.md
Dockerfile
.dockerignore

(Valfritt men rekommenderat.) Om du har Docker Desktop installerat med WSL-integration kan du testa containern lokalt innan du pushar. Det sparar mycket tid jämfört med att vänta på Dokploy-bygget för att upptäcka fel:

# Bygg image lokalt
docker build -t mitt-forsta-projekt .

# Kör containern på port 3000
docker run --rm -p 3000:3000 mitt-forsta-projekt

Öppna http://localhost:3000 i webbläsaren — du ska se ditt "Hej från Sundsvall"-meddelande. Avsluta med Ctrl+C.

Pusha Docker-konfigurationen till GitHub så Dokploy kan komma åt den:

git add Dockerfile .dockerignore index.js package.json
git commit -m "Lägg till Docker-konfiguration för Dokploy-deploy"
git push

Skapa applikationen i Dokploy. Logga in på Sundsvalls Dokploy-instans (din kollega eller IT-ansvarig kan ge dig URL och inloggning):

# 1. Välj eller skapa ett "Project" (en grupp av appar)
# 2. Klicka "Create Service" → "Application"
# 3. Namnge appen, t.ex. "mitt-forsta-projekt"
# 4. Gå till fliken "General" på den nya appen
#    - Provider: GitHub
#    - Repository: dittnamn/mitt-forsta-projekt
#    - Branch: main
#    - Build Type: Dockerfile
#    - Dockerfile path: ./Dockerfile (default)
# 5. Klicka "Save"
# 6. Klicka "Deploy" för första bygget

Om GitHub-providern inte redan är kopplad mot Dokploy: gå till Settings → Git → GitHub och installera Dokploy GitHub App på ditt konto eller din organisation. Det görs en gång per användare.

Följ bygglogen i fliken Deployments. Det första bygget tar ofta 1–3 minuter.

Konfigurera domän och HTTPS:

# 1. Klicka "Add Domain"
# 2. Host: dittprojekt.sundsvall.dev
#    (välj något kort och beskrivande)
# 3. Path: /
# 4. Container Port: 3000
# 5. HTTPS: ON
# 6. Certificate: Let's Encrypt
# 7. Klicka "Create"

Vänta ~30 sekunder och besök https://dittprojekt.sundsvall.dev — appen ska svara med "Hej från Sundsvall".

Aktivera automatisk deploy. Det här är nyckeln till det löpande arbetsflödet — varje push till main ska trigga en ny deploy automatiskt.

Om du använder Dokploys GitHub App (rekommenderat — installerades i steg 13.6): auto-deploy är redan aktiverat. Gå till fliken General och kontrollera att "Auto Deploy"-toggeln är på. Klart.

Om du istället vill använda en generisk webhook (t.ex. om GitHub App inte är ett alternativ):

# 1. Slå på "Auto Deploy" i fliken General
# 2. Gå till fliken Deployments
# 3. Kopiera Webhook URL — den ser ut så här:
#    https://dokploy.sundsvall.dev/api/deploy/<app-id>

Klistra sedan in URL:en som webhook i GitHub-repot:

# 1. Klicka "Add webhook"
# 2. Payload URL: klistra in Dokploy-URL:en
# 3. Content type: application/json
# 4. Which events: "Just the push event"
# 5. Active: bockad
# 6. Klicka "Add webhook"

GitHub skickar nu en POST till Dokploy varje gång du pushar — Dokploy bygger om imagen och rullar ut den nya containern utan downtime.

Verifiera att hela kedjan fungerar. Gör en liten ändring i index.js — byt t.ex. "Hej från Sundsvall" till "Hej igen från Sundsvall" — och pusha:

git add .
git commit -m "Uppdatera hälsningstext"
git push

Gå till Dokploy-panelen, fliken Deployments. Inom några sekunder ska du se en ny deployment startas. När bygget är klart (1–2 min), ladda om https://dittprojekt.sundsvall.dev — den nya texten ska synas.