Cílem tohoto projektu je nastínit architekturu webové aplikace, kterou je možné modifikovat, aniž by vývojář potřeboval něco instalovat. Jediné, co potřebuje, je internetový prohlížeč, čímž se stává nezávislým na zařízení, které využívá.
Za starých časů, když bylo potřeba udělat nějaké úpravy (něco rychle opravit apod.) na webových stránkách, se vývojář připojil přes FTP a hledal příčinu chyby nebo místo k úpravě. U souborů byl k dispozici textový náhled bez zvýrazněné syntaxe. Debugger žádný. A v případě buildu se občas hodilo připojit ještě přes SSH a spustit tam nějaký skript. To byly časy. Samozřejmě počítám s tím, že vývojář neměl u sebe svůj stroj, kde měl rozběhnutou lokální instanci aplikace.
V dnešní době cloudových technologií se už tato záležitost dá řešit lépe. Máme k dispozici bezplatné online editory, které jsou schopny debugovat, buildit a verzovat. Verzováním mám na mysli napojení na verzovací systém, který navíc dokáže spustit dodatečné pipelines při commitu.
V tomto článku představím architekturu aplikace Daily Quote. Jedná se o React aplikaci, která sama o sobě nedělá nic jiného, než že na kliknutí zobrazí náhodný citát. V případě potřeby úpravy ale mohu otevřít online editor, kde změním funkcionalitu, projekt vybuildím a změny commitnu. A hotovo. Změny se po krátkém okamžiku promítnou přímo na webu.
Architektura aplikace je založená na GitHubu a GitHub Codespaces. Zvolil jsem GitHub Codespaces, protože mi tím odpadl jeden krok s autentifikací. V GitHubu se nachází zdrojový kód React aplikace, kterou mohu modifikovat pomocí GitHub Codespaces. Po provedení úpravy projekt vybuildím a změny commitnu. Commit spustí GitHub Actions, které zkopírují vybuilděný dist do cílové destinace (FTP). Cílovou destinaci představují pluginy ve WordPressu – v tomto případě jeden specifický plugin, který je na stránce vyobrazen pomocí WordPress shortcode.
Postup pro vytvoření architektury aplikace:
- Administrace WordPressu – vytvoření stránky, přidání WordPress shortcode, publikace
- GitHub – založení účtu
- GitHub Codespaces – přihlášení a vytvoření React aplikace
- GitHub Codespaces – propojení s GitHubem a první commit
- Vytvoření a commit souboru
index.phpv rootu projektu (slouží k registraci pluginu ve WordPressu) - Při buildu aplikace přidat kopírování
index.phpdo složkydist(vpackage.json:"postbuild": "cp index.php dist/") - FTP – vytvoření složky pluginu:
/wp-content/plugins/daily-quote - GitHub Actions – soubor
deploy.yml: přidat definici pro kopírování obsahu složkydistna FTP:/wp-content/plugins/daily-quote - Připravit první verzi aplikace – build projektu (
npm run build) a commit - Administrace WordPressu – aktivace pluginu
Jediným zádrhelem, který jsem měl při vytváření této architektury, bylo chybné nastavení skupiny (group/owner) na straně FTP. V případě, že jsem vytvořil soubor nebo složku přes FTP klienta, byla jim přiřazena nesprávná skupina – zřejmě nějaký vlastní (custom) uživatel místo superadmina. Nicméně podpora VEDOS problém vyřešila a od té doby vše funguje, jak má. Zde je diskuse s podporou VEDOS: https://help.wedos.cz/otazka/ssh-network-settings/124768/
Jednou z nevýhod tohoto konceptu může být nekonzistence mezi vyobrazením aplikace v online editoru a jejím zobrazením v cílové destinaci. Online editor zobrazuje aplikaci s „čistým štítem“ – tedy na prázdné stránce (bílé pozadí apod.). Naproti tomu cílovou destinací je WordPress stránka, kde prvky aplikace dědí všechny styly prostředí. Výsledkem může být narušený layout nebo odlišný vzhled aplikace na jinak barevném pozadí. Použít iFrame se mi nechce – považuji ho za zastaralý. Přemýšlím buď nad vytvořením prázdné stránky přímo ve WordPressu, nebo nad přizpůsobením React aplikace (např. použitím WordPress stylů pro sjednocení vzhledu s online editorem). Každopádně to považuji za tzv. golden template a budu se tím zabývat v některém z dalších projektů.