Sprawdzian: Zaawansowane Aplikacje Internetowe (React + Express)

⚛️ FRONTEND (client/)

React + Vite + Bootstrap

KROK 1 Terminal 1 (client/)

Terminal 1: Inicjalizacja i instalacja frontendu

Wykonaj w oknie Terminala 1 w katalogu głównym projektu:

Wybierz React oraz wariant JavaScript.
Na pytanie o instalację paczek zaznacz No, a następnie zainstaluj ręcznie npm install.
Zainstaluj Bootstrapa: npm install bootstrap.

# 1. Stworzenie aplikacji Vite (w katalogu głównym projektu):
npm create vite@latest client
# Kreator zapyta o:
# - Framework: Wybierz React
# - Variant: Wybierz JavaScript
# - Zainstalować paczki od razu? Zaznacz 'No' (zainstalujemy sami)

# 2. Wejście do folderu klienta i instalacja zależności:
cd client
npm install

# 3. Instalacja biblioteki Bootstrap (arkusze CSS):
npm install bootstrap

KROK 2 client/src/main.jsx

Punkt wejścia aplikacji i podpięcie Bootstrapa

W pliku client/src/main.jsx dodaj import stylów Bootstrap: import 'bootstrap/dist/css/bootstrap.css'. Bez tego klasy Bootstrapa nie zadziałają!

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import 'bootstrap/dist/css/bootstrap.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

KROK 3 client/src/App.jsx

Komponent formularza 1:1 z projektora z lekcji

Główny komponent z formularzem i asynchronicznym zapytaniem:

useState("") dla nazwisko i wynik.
wyslij(e) zatrzymuje przeładowanie (e.preventDefault()) i wysyła fetch() z nagłówkiem "content-type": "application/json".
Formularz ma atrybuty action i method="post" oraz obsługę onSubmit={wyslij}.
Wymagane klasy: container, text-primary, form-group, form-control oraz btn btn-success mt-2.

import { useState } from 'react'

export default function App() {
  const [nazwisko, setNazwisko] = useState("")
  const [wynik, setWynik] = useState("")

  async function wyslij(e) {
    e.preventDefault()
    const odp = await fetch("http://localhost:3333/a1", {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({ "nazwisko": nazwisko })
    })
    const dane = await odp.text()
    setWynik(dane)
  }

  return (
    <div className='container'>
      <h1 className='text-primary'>formularz danych:</h1>
      <form onSubmit={wyslij} action="http://localhost:3333/a1" method="post">
        <div className='form-group'>
          <label htmlFor="nazwisko">nazwisko</label>
          <input 
            value={nazwisko} 
            onChange={e => setNazwisko(e.target.value)} 
            className='form-control' 
            type="text" 
            name="nazwisko" 
            id="nazwisko" 
          />
        </div>
        <button className='btn btn-success mt-2' type='submit'>zapisz</button>
      </form> 
      <p>Wynik od serwera: {wynik}</p>
    </div>
  )
}

KROK 4 Terminal 1 (client/)

Uruchomienie w dev oraz build produkcyjny

W trakcie pisania testuj przez npm run dev pod http://localhost:5173/. Na koniec wykonaj npm run build, aby stworzyć folder client/dist/ dla serwera Express!

# TRYB DEWELOPERSKI (Terminal 1):
cd client
npm run dev
# Vite uruchomi serwer deweloperski pod http://localhost:5173/

# BUDOWANIE WERSJI PRODUKCYJNEJ DLA EXPA:
npm run build
# Vite wygeneruje zoptymalizowany katalog client/dist/

🟢 BACKEND (server/)

Node.js + Express + CORS

KROK 1 Terminal 2 (server/)

Terminal 2: Inicjalizacja backendu i biblioteki

Wykonaj w osobnym oknie Terminala 2 w katalogu głównym projektu:

Utwórz folder mkdir server i wejdź do niego cd server.
Zainicjalizuj npm init -y.
Zainstaluj wymagane pakiety: express, cors oraz @types/node.

# 1. Utworzenie katalogu serwera (obok client/) i wejście:
mkdir server
cd server

# 2. Inicjalizacja pliku package.json:
npm init -y

# 3. Instalacja Express, CORS i typów pomocniczych:
npm install express cors @types/node

KROK 2 server/server.js

Kod serwera Express 1:1 z projektora z lekcji

Utwórz plik server/server.js i wklej dokładny kod z lekcji:

Wymagane moduły: express, cors, path.
Middleware: urlencoded({ extended: true }), json() oraz cors().
Linia produkcyjna: app.use(express.static(path.join(__dirname, "../client/dist"))).
Endpoint: app.post("/a1", (req, res) => { ... }).
Port: stała const port = 3333 i app.listen(port).

const express = require("express")
const cors = require("cors")
const path = require("path")

const app = express()

app.use(express.urlencoded({ extended: true }))
app.use(express.json())
app.use(cors())

// Serwowanie plików produkcyjnych (odkomentowane dla wersji produkcyjnej):
app.use(express.static(path.join(__dirname, "../client/dist")))

app.post("/a1", (req, res) => {
    const nazwisko = req.body.nazwisko
    console.log("od klienta:", "nazwisko: ", nazwisko)
    res.send("serwer otrzymał dane: " + nazwisko)
})

const port = 3333
app.listen(port, () => {
    console.log("Serwer działa na porcie: " + port)
})

KROK 3 Terminal 2 (server/)

Uruchomienie serwera (Dev i Wersja produkcyjna)

W terminalu serwera uruchom: node server.js. Serwer nasłuchuje na porcie 3333.

Jak sprawdza nauczyciel:
Wystarczy tylko działający serwer Node (node server.js)! Wchodzisz pod http://localhost:3333/ i Express sam serwuje gotową stronę Reacta z client/dist oraz obsługuje żądania POST pod /a1.

# URUCHOMIENIE SERWERA (Terminal 2):
cd server
node server.js
# Wypisze w konsoli: "Serwer działa na porcie: 3333"

# WERSJA PRODUKCYJNA (1 serwer Express bez Vite):
# Otwórz w przeglądarce: http://localhost:3333/
# Express serwuje stronę z client/dist i odbiera POST pod /a1