Waarom een aparte frontend?

Tot nu toe heb je alleen een backend met routes en controllers. Je test die met Postman. Maar een echte gebruiker wil geen Postman openen — die wil een mooie pagina in de browser.

Daarvoor maken we een tweede project: een React-app die naast je backend draait en data ophaalt via fetch.

Twee aparte projecten

Je krijgt straks twee mappen naast elkaar: backend/ en frontend/.
Allebei hebben hun eigen package.json en node_modules.
Allebei draaien tegelijk in een eigen terminal.

Vite project aanmaken

We gebruiken Vite omdat het snel start en hot-reload heeft.

Open een nieuwe terminal (laat je backend draaien!) en ga naar de hoofdmap van je project, dus naar de map waar backend/ in zit.

# Als je in backend/ zit, ga één map omhoog
cd ..

# Check waar je bent — je moet 'backend' zien staan in de output
ls

# Maak Vite project aan in een nieuwe map 'frontend'
npm create vite@latest frontend

Vite stelt twee vragen. Vul in:

Invullen:

  • Framework: React
  • Variant: JavaScript
# Ga in de frontend map
cd frontend

# Installeer alle packages
npm install

# Start de dev server
npm run dev

Het werkt!

Je ziet in de terminal: Local: http://localhost:5173/
Open die URL in je browser. Je ziet de standaard Vite + React pagina.

Project Structuur

Na deze setup ziet je projectmap er zo uit:

mijn-project/
├── backend/
│   ├── src/
│   │   ├── controllers/
│   │   ├── models/
│   │   └── routes/
│   ├── server.js
│   ├── .env
│   └── package.json
│
└── frontend/
    ├── src/
    │   ├── components/    ← die maak je zelf
    │   ├── App.jsx
    │   └── main.jsx
    ├── index.html
    └── package.json

De map components/ bestaat nog niet

Die maak je zelf zodra je je eerste component gaat bouwen. Daar komen straks bestanden zoals WorkoutList.jsx, AddWorkoutForm.jsx, enzovoort.

Twee Terminals Draaien

Tijdens het bouwen van een fullstack app moet je altijd twee terminals open hebben:

Terminal 1 — Backend

cd backend
npm run dev

Draait op http://localhost:4000

Terminal 2 — Frontend

cd frontend
npm run dev

Draait op http://localhost:5173

Allebei nodig!

Stop je per ongeluk de backend? Dan krijgt je frontend geen data meer en zie je "Failed to fetch" in de console.

App.jsx opschonen

Vite levert App.jsx met een voorbeeld erin (een teller met een React-logo). Die mag weg. Open frontend/src/App.jsx en vervang de inhoud door: 

function App() {
  return (
    <div className="App">
      <h1>Workouts</h1>
      <p>Hier komen straks mijn workouts.</p>
    </div>
  );
}

export default App;

App.jsx blijft klein

In deze cheat sheet houden we App.jsx bewust kort. Alle echte logica (lijst, formulier, filter, …) komt in losse componenten in src/components/. Dat maakt je code overzichtelijk en makkelijk te testen.

Test verbinding met je backend

Voordat je componenten gaat bouwen, check eerst of je frontend je backend kan bereiken. Voeg tijdelijk dit stukje toe aan App.jsx:

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    fetch('http://localhost:4000/api/workouts')
      .then(res => res.json())
      .then(data => console.log('Data van backend:', data))
      .catch(err => console.error('Geen verbinding:', err));
  }, []);

  return (
    <div className="App">
      <h1>Workouts</h1>
    </div>
  );
}

export default App;

Open browser → F12 → Console

Zie je Data van backend: [...]? Dan werkt de verbinding! Je mag dit teststukje weer weghalen.

CORS error?

Krijg je iets als Access to fetch ... has been blocked by CORS policy? Dan staat CORS nog niet aan in je backend. Zie CORS & Frontend.

Veelvoorkomende Problemen

1. Frontend start niet

  • Sta je wel in de frontend/ map? Check met pwd of ls.
  • npm install vergeten? Run die nog een keer.

2. Poort 5173 al in gebruik

  • Vite kiest dan automatisch een andere poort (5174, 5175, …). Lees de URL in de terminal.
  • In je backend CORS-instelling moet origin overeenkomen met die nieuwe URL.

3. "Failed to fetch" in console

  • Je backend draait niet. Check terminal 1.
  • Of de URL klopt niet — controleer of je http://localhost:4000 gebruikt en niet 5173.

Volgende Stap

Frontend draait en kan je backend bereiken. Tijd om je eerste lijst te tonen.

Lijst Tonen (GET) →

Data ophalen en tonen in losse componenten