Checklista för att sätta upp fullstack-projekt med Node.js

fullstack.md

Skriv i terminalen

# Skapa projekt och gå in i dess mapp
npm create vite@latest
cd awesome/

# Skapa mapp för kod och fil för serverkoden
mkdir backendSrc
echo "console.log('Hello from server')" > backendSrc/server.ts

# Installera npm-paket
npm install express zod
npm install -D @types/express typescript

# Fixa TypeScript config-fil
cd backendSrc/
npx tsc --init

Kontrollera att tsconfig.app.json har lämpliga inställningar. Den ska bara titta efter kod i backendSrc/ och kompilerad kod ska läggas i backendDist/. Man kan även använda include i stället för rootDir, men inte båda.

  "compilerOptions": {
    "rootDir": "./backendSrc",
    "outDir": "./backendDist",

Lägg till skript i package.json:

"script": {
  ...
  "build-server": "tsc",
  "start-server": "node dist/server.js",
  "restart-server": "clear && tsc && node dist/server.js"
}

Testa din backend-kod genom att bygga och starta servern.

---

Lägg till proxy-inställningar i vite.config.ts, så att Vite skickar vidare request till din backend-server. Obs - samma portnummer som du använder i server.ts. Du vet att du har gjort rätt om du kan skriva await fetch('/api/exempel') i din frontend-kod.

Du ska lägga till server-fältet. Finns det andra saker i config-filen så ska du inte ta bort dem.

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
        "/api": "http://localhost:1234"
    }
  }
})