Zadania na lekcje

Node.js i Express: Serwer statyczny

Javascript
Priorytet: Normalny Szkic

Zadanie 400: Node.js i Express - podstawy

Wstęp

Node.js to środowisko uruchomieniowe, które pozwala na wykonywanie kodu JavaScript poza przeglądarką – bezpośrednio na serwerze. Dzięki niemu możemy tworzyć wydajne aplikacje webowe, czytać pliki z dysku czy łączyć się z bazami danych.

W tym zadaniu nauczysz się:

  1. Jak zainicjować projekt Node.js.
  2. Jak zarządzać bibliotekami za pomocą npm.
  3. Jak stworzyć prosty serwer WWW przy użyciu frameworka Express.
  4. Jak udostępnić folder z plikami statycznymi (HTML, CSS, obrazy).

1. Inicjalizacja projektu (npm init)

Każdy projekt w Node.js zaczyna się od pliku package.json, który przechowuje informacje o naszej aplikacji i jej zależnościach (zainstalowanych bibliotekach).

Aby założyć nowy projekt, otwórz terminal w swoim folderze i wpisz:

npm init -y

Flaga -y spowoduje automatyczne zatwierdzenie domyślnych ustawień.

2. Instalacja Express

Express.js to najpopularniejszy framework dla Node.js, który upraszcza tworzenie serwerów. Aby go zainstalować, wpisz:

npm install express

Po wykonaniu tej komendy zauważysz nowy folder node_modules (gdzie pobrano kod Expressa) oraz zmiany w package.json.

3. Prosty serwer w Express

Stwórz plik server.js i wklej do niego poniższy kod:

const express = require('express');
const app = express();
const PORT = 3000;

// Konfiguracja serwera...

app.listen(PORT, () => {
    console.log(`Serwer działa na http://localhost:${PORT}`);
});

4. Katalog statyczny (public)

Serwer często musi wysyłać do przeglądarki pliki, których nie trzeba przetwarzać – np. gotowe strony .html, style .css czy zdjęcia. W Expressie służy do tego funkcja express.static().

Dzięki niej nie musisz pisać osobnej ścieżki (endpointu) dla każdego obrazka czy pliku CSS. Express zrobi to za Ciebie automatycznie dla wszystkich plików znajdujących się w wybranym folderze.

Przykład użycia:

// Udostępnienie folderu o nazwie 'public' jako katalogu statycznego
app.use(express.static('public'));

Jeśli w folderze public umieścisz plik index.html, będzie on dostępny bezpośrednio pod adresem http://localhost:3000.

Zadanie dodatkowe (obowiązkowe)

Wykonaj poniższe kroki, aby ukończyć zadanie:

  1. Struktura folderów: Stwórz folder public, a w nim plik index.html z prostą strukturą strony (nagłówek H1, jakiś tekst).
  2. Dodanie CSS: W folderze public stwórz podfolder css, a w nim plik style.css. Podepnij go pod index.html. Sprawdź, czy serwer poprawnie serwuje style.
  3. Endpoint API: W pliku server.js dodaj nową ścieżkę /api/status, która po wejściu w przeglądarce zwróci obiekt JSON: { "status": "ok", "message": "Serwer działa!" }. Użyj metody res.json().
  4. Middleware logujący: Dopisz prosty mechanizm (middleware), który przy każdym zapytaniu do serwera wypisze w konsoli terminala aktualną datę oraz metodę HTTP (np. "GET / 2024-03-24").
  5. Obsługa błędów 404: Na samym końcu definicji ścieżek (przed app.listen) dodaj obsługę nieistniejących stron. Jeśli użytkownik wpisze błędny adres, serwer powinien zwrócić status 404 i krótki komunikat tekstowy "Strona nie istnieje".