Skip to content

README.md

Latest commit

 

History

History
116 lines (82 loc) · 3.53 KB

README.md

File metadata and controls

116 lines (82 loc) · 3.53 KB
Raw

Saucer + React Setup

Użyte technologie:

  • C++23 (backend) oparty na frameworku Saucer
  • React/Vite (frontend)
  • CMake build tool

Wymagania wstępne

Windows

Aby pracować nad projektem, potrzebujesz następujących narzędzi:

  1. Visual Studio 2026 (lub 2022) (Community/Pro/Enterprise):
  • Wymagany komponent: Desktop development with C++ (Opracowywanie aplikacji klasycznych w C++) z dodatkową paczką MSVC 143.
  1. Visual Studio Code:
  • Zalecane rozszerzenie: CMake Tools (Microsoft).
  • Zalecane rozszerzenie: C/C++ (Microsoft).
  1. Node.js w wersji >=24
  2. CMake w wersji >=3.25 (zazwyczaj instaluje się z VS, ale warto mieć w systemie).

Ważne: Projekt wymaga standardu C++23. Starsze kompilatory nie zadziałają.

Linux / MacOs

  • Visual Studio Code:
    • Zalecane rozszerzenie: CMake Tools (Microsoft).
    • Zalecane rozszerzenie: C/C++ (Microsoft).
  • G++ >= 14 lub Clang >= 17
  • CMake w wersji >=3.25
  • Node.js w wersji >=24

Struktura Projektu

LD-Lab/
├── CMakeLists.txt       # Główna konfiguracja budowania (Saucer, C++ version)
├── src/
│   └── main.cpp         # Punkt wejścia aplikacji (logika okna, mostek C++ <-> JS)
├── frontend/            # Aplikacja React (Vite + Tailwind v4 + Router)
│   ├── src/             # Kod źródłowy UI
│   ├── dist/            # Zbudowana strona (generowana przez npm run build)
│   └── vite.config.ts   # Konfiguracja Vite
├── build/               # Folder tymczasowy CMake (ignorowany przez git)
└── embedded/            # Automatycznie generowane nagłówki C++ z UI (ignorowany przez git)

Jak uruchomić (Development)

W tym trybie mamy Hot Reload. Zmiany w kodzie Reacta są widoczne natychmiast bez restartowania aplikacji C++. Zmiany w aplikacji C++ będą wymagały rebuilda aplikacji.

Krok 1: Uruchom Frontend

Otwórz terminal w folderze frontend/ i uruchom serwer deweloperski:

cd frontend
npm i
npm run build
npm run dev

Vite uruchomi się na porcie domyślnym (zazwyczaj http://localhost:5173).

Krok 2: Skonfiguruj i uruchom C++ (VS Code)

  1. Otwórz główny folder projektu w VS Code.
  2. Wciśnij Ctrl / ⌘ Cmd + Shift + P i wpisz CMake: Select Variant a następnie wybierz Debug
  3. Wciśnij Ctrl / ⌘ Cmd + Shift + P i wpisz: CMake: Configure.
  4. Kliknij przycisk Build (lub F7).
  5. Uruchom plik wykonywanlny (ikona "Play" na pasku CMake lub Shift + F5).

Aplikacja otworzy okno, które w środku ładuje http://localhost:5173. Masz dostęp do DevTools pod F12.

Jak zbudować (Production)

W tym trybie React jest kompilowany do plików statycznych, a następnie "wdrukowywany" w plik wykonywalny. Aplikacja jest jednym plikiem, nie wymaga serwera Node.js ani konsoli w tle.

Krok 1: Zbuduj Frontend

Musimy wygenerować pliki HTML/CSS/JS do folderu frontend/dist.

cd frontend
npm run build

Krok 2: Zbuduj C++ w trybie Release

  1. Wykonaj CMake: Select Variant na Release
  2. Wykonaj CMake: Configure (wymusza odświeżenie flag kompilatora).
  3. Wykonaj CMake: Build.

Gotowy plik LD-Lab znajdziesz w folderze build/.

📝 .gitignore

Pamiętaj, aby nie commitować folderów budowania:

build/
embedded/
node_modules/
frontend/dist/
frontend/node_modules/
.vs/
*.exe