| Codebase | Opis |
|---|---|
| bode | Flask API |
| cabra | React Frontend |
- Docker + docker-compose dla Linux'a lub Docker Desktop dla OSX/Windows'a
- WSL2 w przypadku Windows'a
- asdf
- PostgreSQL w rozsądnej wersji
- Node.js + npm najlepiej w wersji 16.14.2
- Poetry najlepiej w wersji 1.1.13
- Python najlepiej w wersji 3.10.4
Do pracy nad projektem najlepiej wykorzystać UNIX'owe środowisko. OSX, jakiś Linux lub WSL2 pod Windows'em sprawdzą się w sam raz. W takim środowisku potrzebujemy mieć Docker'a z Compose'em (patrz linki w wymaganiach) oraz asdf'a.
Mając gotowe te dwie rzeczy, sklonowane repo (w przypadku WSL'a repo klonujemy do niego zamiast do Windowsa) i trochę szczęścia projekt powinien wstać po odpaleniu skryptu:
$ ./setup.sh
Skrypt po kolei:
- zainstaluje potrzebne narzędzia przez asdf'a
- doda do gita hooki sprawdzające kod przed każdym commit'em (gdy będziemy mieć wybór, które hooki zainstalować to wybieramy spacją tylko
pre-commiti potwierdzamy) - zainstaluje potrzebne zależności w bode i cabrze
- uruchomi kontenery z bazą danych, backend'em i frontend'em
Po tym wszystkim aplikacja będzie dostępna po adresem http://localhost:3000. API jest dostępne pod adresem http://localhost:4000/api/v1.
Setup wystarczy wykonać pomyślnie tylko raz, potem aplikację stawiamy:
- na Linuxie
docker-compose up
- na Macu/WSL:
docker compose up
Można spróbować uruchomić projekt bez Docker'a i/lub asdf'a. Wtedy trzeba samemu zapewnić, że wszystkie wymagane narzędzia są zainstalowane i serwer PostgreSQL jest uruchomiony. Następnie należy uruchamiać kolejne kroki z setup.sh pomijając ostatni oraz ręcznie ustawić w powłoce zmienne środowiskowe z pliku .env.example.
Po tym wszystkim uruchamiamy w jednym terminalu bode:
cd bode && poetry run flask run --port=$FLASK_PORT
A w drugim cabrę:
cd cabra && npm run dev
W tym przypadku aplikacja też będzie dostępna po adresem http://localhost:3000.
Jeśli w trakcie instalacji zależności przez poetry pojawi się błąd dotyczący psycopg2 to konieczne może być doinstalowanie odpowiednich pakietów zgodnie ze stackiem.
Oczywiście można pisać dowolnym edytorze, ale jeżeli ktoś ma chęć to polecam korzystać z VS Code. Poniżej kilka porad dla łatwiejszej i przyjemniejszej pracy.
VS Code lepiej działa mając dodane foldery z poszczególnymi częściami aplikacji do workspace'a. Dlatego jeśli nie potrzebujemy robić nic w głównych katalogu projektu to wygodnie otworzyć sobie puste okno i wrzucić do niego foldery bode i cabra, zamiast otwierać cały projekt.
VS Code będzie chciał żeby podać mu ścieżkę do używanego przez nas interpretera pythona. Wtedy wskazujemy ten w katalogu bode/.venv.
Poniższe rozszerzenia znajdują się w rekomendacjach dla projektu. Przy uruchomieniu projektu powinno się wyświetlić powiadomienie z opcją ich instalacji.
Rozszerzenie Remote - WSL należy zainstalować manualnie, jeśli korzystasz z WSL.
- Frontend/React/Tailwind
- Prettier MUST HAVE
- ESLint MUST HAVE
- sort-imports - MUST HAVE automatycznie sortuje importy w TS
- Tailwind CSS IntelliSense razem z Tailwind Twin IntelliSense - dobra rzecz, nie trzeba dokładnie pamiętać nazw klas
- ES7+ React/Redux/React-Native snippets - przydatne snippety
- glean - refactoring do React'a
- Python
- DevOps
- Docker
- Remote - Containers
- Remote - WSL MUST HAVE przy WSL
- Inne
- Git Graph - ładnie pokazuje drzewo gita
- Git Lens - można łatwo wyklikiwać rzeczy związane z gitem
- indent-rainbow - koloruje wcięcia
- ORM
- Migracje