Payload CMS - Wstępny setup projektu (cz. 3)

Intro

Payload CMS wymaga kilku kroków zanim zaczniemy pracę z mięsem aplikacji. Bez dłuższych dywagacji zainstalujmy projekt oparty o ten nowoczesny headless CMS.

Supabase

Supabase to nowoczesna platforma backendowa typu BaaS (Backend as a Service) - narzędzie oferujące gotowe zaplecze do budowy aplikacji bez konieczności wymyślania koła od nowa. Można porównać ją do Google Firebase. Główną różnicą jest:

• Supabase -> SQL
• Firebase -> NoSQL

Co konkretnie oferuje Supabase

Supabase łączy kilka funkcjonalności:

• Baza danych
• Autoryzacja użytkowników
• Automatycznie generowane API
• Realtime
• Storage plików
• Edge Functions

Na początku serii (i być może aż do końca) skorzystamy tylko i aż z pierwszej z tych funkcjonalności (Baza danych)

Zaczynamy

Ponieważ mam już założone konto na platformie Supabase, pomijam ten etap.

Kolejnymi krokami jest już z widoku dashboardu Supabase są:

• Założenie lub wybranie organizacji
• Stworzenie projektu

Utworzenie projektu Supabase

Aby utworzyć projekt należy kliknąć przycisk "New project" ;)

Opcje dostępne dla nowego projektu które wprowadzam to:

• Project name - (PayloadMarket)
• Database password - (ważne, aby gdzieś je sobie zanotować)
• Region - (ja wybrałem Europe)
• Security
  • Enable Data API - odznaczyłem
  • Automatically expose new tables - odznaczyłem
  • Enable automatic RLS - zaznaczyłem

Utworzyłem tak skonfigurowany projekt i czekam aż STATUS projektu PayloadMarket zmieni się z "Coming up" na "Healthy"

Connection string

Następnym krokiem jest zanotowanie connection string do PostgreSQL.

Będzie on potrzebny przy setupowaniu Payload CMS.

Na dashboardzie w widoku projektu wciskam przycisk "Copy", po którym pojawia się dropdown z którego wybieram "Direct connection string".

Warto gdzieś go przekleić, oraz w miejscu [YOUR-PASSWORD] - wkleić wcześniej zanotowany password do postgreSQL.

Instalacja Payload CMS

NodeJS

Aby zainstalować Payload CMS potrzebny jest conajmniej NodeJS

Dla tych, którzy nie posiadają tego oprogramowania podaję link do oficjalnej strony

nodejs.org - download

Node.js jest dosyć dynamicznym środowiskiem jeśli chodzi o zmiany wersji. Ja w tej serii (dopóki nie będzie wymagany upgrade / downgrade) - korzystam z wersji 24.15.0

Aby sprawdzić wersję zainstalowanego Node'a należy wprowadzić komendę

node -v

Terminal

Ilu developerów tyle terminali ;). Ja korzystam z wbudowanego w moje IDE - którym jest - cursor terminala czyli tak naprawdę powershell'a dostępnego z poziomu VS Code.

Dosyć przydatny skrót klawiszowy, który pozwala na toogle'owanie (pokazywanie i ukrywanie) okna z terminalem w VS Code (cursor jest oparty o VS Code) to:

Ctrl + `

Instalacja Payload

Payload oferuje kilka template'ów m.in. :

• website
• ecommerce
• blank

Ponieważ chcę się nauczyć jak najwięcej wybieram template blank (pusty template)

Z poziomu katalogu, w którym chcę aby utworzony nowy projekt payload - wpisuję w mój terminal i zatwierdzam:

npx create-payload-app@latest

Payload CMS - komenda startowa

• npx informuje mnie, że potrzebuje zainstalować paczkę od create-payload-app, i pyta czy chcę kontynuować. Akceptuję.
• Następnie prosi o podanie nazwy projektu - wpisuję "PayloadMarket".
• Prosi o wybranie template'u - wybieram blank
• Prosi o wybranie bazy danych - wybieram PostgreSQL
• Prosi o podanie PostgreSQL connection string - tutaj kasuję placeholder i wklejam wcześniej zapisany direct connection string z Supabase z odpowiednio podmienionym passwordem
• Prosi o wybranie agenta do zainstalowania Payload Skill - wybieram Cursor

Po wszystkim dostaję wiadomość o sukcesie utworzenia projektu Payload oraz następne krokiem

Push projektu Payload CMS na github

• Przechodzę w terminalu do katalogu payload-market

  cd ./payload-market

• Ustawiam remote danego repo na to z github'aby

  git remote add origin https://github.com/tkleszczewski/PayloadMarket.git

• Wypycham zmiany

  git push origin master

Link do repozytorium PayloadMarket repo

Outro

W tym odcinku, omówiłem setup projektu na platformie Supabase, oraz konieczność instalacji NodeJS dla setupu projektu Payload. Następnie zainstalowałem sam projekt Payload CMS oraz wypchnąłem projekt na github. W następnej części przejrzę strukturę plików Payload CMS i postaram się ją omówić.