React router + Apache

React router + Apache
« kdy: 04. 09. 2021, 13:35:18 »
Nefunguje mi aplikce psaná v Reactu používající React Router která není v "kořenu" serveru.

/index.php je používaný jinou aplikací.
/frontend/admin/build je aplikace Reactu. Titulní stránku dostanu, ale pokud se pokusím dostat na jinou komponentu (/frontend/admin/build/home) pomocí React Router tak se stránka nevykreslí.

Používám následující konfiguraci Apache:


Kód: [Vybrat]

<Location "/frontend/admin/build">

 RewriteEngine on
    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^ - [L]
  RewriteRule ^ /frontend/admin/build/index.html [L]
</Location>


RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !(\.css|\.js|\.png|\.jpg|\.jpeg|\.gif)$ [NC]
RewriteCond %{REQUEST_URI} !^/frontend/admin/build
RewriteRule ^(.*)$ /index.php?$1 [NC,L,QSA]



Vše co není /frontend/admin/build je přesměrováno na index.php. Pokud  je v cestě  /frontend/admin/build pak je vše směrováno na  /frontend/admin/build pro který by měl platit <Location "/frontend/admin/build"> což funguje, ale při dotazu /frontend/admin/build/home vidím pořád titulní stánku.

« Poslední změna: 04. 09. 2021, 13:37:20 od vesterna12 »


Re:React router + Apache
« Odpověď #1 kdy: 04. 09. 2021, 15:12:36 »
Pokud se nic nevykreslí při kliknutí na odkaz na stránce, je problém ve webové (Reactové) aplikaci – v takovém případě nejde vůbec požadavek na server. Máte v té aplikaci správně nakonfigurováno, že její výchozí adresa ke /frontend/admin/build?

Pokud by byl problém při obnově stránky (refresh v prohlížeči), byl aby to chybná konfigurace serveru – ten musí na požadavky na cesty, ke kterým neexistuje na disku soubor, vracet index.html (ale to ve vaší konfiguraci pravděpodobně je).

Re:React router + Apache
« Odpověď #2 kdy: 04. 09. 2021, 15:21:47 »
Pozrel by som v dokumentacii k mod_rewrite na direktivu RewriteBase...

Re:React router + Apache
« Odpověď #3 kdy: 04. 09. 2021, 15:53:28 »
Pozrel by som v dokumentacii k mod_rewrite na direktivu RewriteBase...
Klidně se na ní v dokumentaci podívejte, ale s dotazem to nijak nesouvisí.

Re:React router + Apache
« Odpověď #4 kdy: 04. 09. 2021, 16:17:21 »
Pozrel by som v dokumentacii k mod_rewrite na direktivu RewriteBase...
Klidně se na ní v dokumentaci podívejte, ale s dotazem to nijak nesouvisí.

Este stale si zamienate verejne diskusne forum s Jirsakovou poradnou? Uz je to fakt otravne, mal by ste s tym nieco robit.


Re:React router + Apache
« Odpověď #5 kdy: 04. 09. 2021, 16:20:08 »
Pozrel by som v dokumentacii k mod_rewrite na direktivu RewriteBase...

Kedze tu mame zase trola, tak budem  konkretnejsi. Tie rewrite direktivy budu osoznejsie v <directory>, nie v <location>, v spominanej dokumentacii mimo ine najdete aj kontext kde direktivu pouzit, tak aby fungovala spravne.

Re:React router + Apache
« Odpověď #6 kdy: 04. 09. 2021, 16:57:34 »
Divné je použití REQUEST_FILENAME v <Location>. Location se používá v případě, kdy není žádná vazba mezi URL a souborovým systémem. Vy používáte URL, které je stejné, jako cesta v souborovém systému, takže by bylo lepší použít <Directory> místo <Location>.

Re:React router + Apache
« Odpověď #7 kdy: 04. 09. 2021, 17:53:16 »
Nahradil jsem Location -> <Directory> , ale bez výsledku.
Pří dotazu /frontend/admin/build/home sice dostanu 200 návratový kód, ale stránka není vykreslená (stavová komponenta v Reactu nahraná pomocí R. Router). Pokud to mám puštěné pomocí "npm start" tak tam to funguje jak má.
Package json je  "homepage": "http://localhost:6060/frontend/admin/build" nastavená taky správně.


Re:React router + Apache
« Odpověď #8 kdy: 04. 09. 2021, 18:17:39 »
Nahradil jsem Location -> <Directory> , ale bez výsledku.
Pří dotazu /frontend/admin/build/home sice dostanu 200 návratový kód, ale stránka není vykreslená (stavová komponenta v Reactu nahraná pomocí R. Router). Pokud to mám puštěné pomocí "npm start" tak tam to funguje jak má.
Package json je  "homepage": "http://localhost:6060/frontend/admin/build" nastavená taky správně.
Podívejte se DevTools v prohlížeči, jestli vám server vrací v jednotlivých souborech to, co očekáváte (skripty, styly apod.). Také se podívejte, zda tam nejsou nějaké chyby v konzoli.

Pokud uvidíte v DevTools, že vám server vrací správné odpovědi, nemusíte server řešit, je nakonfigurovaný správně.

Re:React router + Apache
« Odpověď #9 kdy: 04. 09. 2021, 18:22:26 »
Kód: [Vybrat]
DocumentRoot "/data/software_demo/public"
<Directory "/data/software_demo/public">
    AllowOverride All
    Require all granted
</Directory>


<Directory "/data/software_demo/public/frontend/admin/build">

 RewriteEngine on
    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^ - [L]
  RewriteRule ^ /frontend/admin/build/index.html [L]
</Directory>

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !(\.css|\.js|\.png|\.jpg|\.jpeg|\.gif)$ [NC]
RewriteCond %{REQUEST_URI} !^/frontend/admin/build
RewriteRule ^(.*)$ /index.php?$1 [NC,L,QSA]



Re:React router + Apache
« Odpověď #10 kdy: 06. 09. 2021, 13:25:47 »
Mno, sice nic o te aplikaci nevim, ale SPA Aplikace (v Reactu ci v cemkoliv jinem) funguje tak, ze pri prvnim stazeni se stahne komplet javascript kod cele aplikace, pak uz se klikanim v aplikaci pouze pohybuju v ramci aplikace.
React javascriptem interceptuje kliky na linky, router pak podle prislusneho kliku aktivuje javascriptove komponenty, na server nejdou zadne pozadavky na HTML stranky, maximalne si stranky javascriptem fetchnout REST/JSON data.
Browsovani po srankach vcetne histporie je jenom navenek emulovane.

Jako prvni pokus si otevri konzoli a divej, co se tam deje.
Pri spravne chovani to jednou stahne velky javascript balik, pak obcas sahne na REST data, vlastni prenos HTML neni.
Pokud je to SPA aplikace, samozrejme.

Pak je nesmysl cokoliv ladit na strane serveru a mod+rewrite do toho vnese akorat tak bordel.

Jako prvni pokus bych na jinem stroji tuto aplikaci spustil v default nastaveni (tedy ma ocekavany index.php na svem miste)

Re:React router + Apache
« Odpověď #11 kdy: 07. 09. 2021, 16:19:14 »
Tak chybějící přísada byla: "basename"

Kód: [Vybrat]
https://reactrouter.com/web/api/BrowserRouter
Nastavení serveru:

Kód: [Vybrat]
#DEMO only
<Directory "/data/product_demo/public/frontend/admin/build">

 RewriteEngine on
    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^ - [L]
  RewriteRule ^ /frontend/admin/build/index.html [L]
</Directory>


RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !(\.css|\.js|\.png|\.jpg|\.jpeg|\.gif)$ [NC]
RewriteCond %{REQUEST_URI} !^/frontend/admin/build

RewriteRule ^(.*)$ /index.php?$1 [NC,L,QSA]



Re:React router + Apache
« Odpověď #12 kdy: 07. 09. 2021, 16:39:21 »
Tak chybějící přísada byla: "basename"

Kód: [Vybrat]
https://reactrouter.com/web/api/BrowserRouter
Nastavení serveru:

Kód: [Vybrat]
#DEMO only
<Directory "/data/product_demo/public/frontend/admin/build">

 RewriteEngine on
    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^ - [L]
  RewriteRule ^ /frontend/admin/build/index.html [L]
</Directory>


RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !(\.css|\.js|\.png|\.jpg|\.jpeg|\.gif)$ [NC]
RewriteCond %{REQUEST_URI} !^/frontend/admin/build

RewriteRule ^(.*)$ /index.php?$1 [NC,L,QSA]


Som zvedavy co na to tunajsi trol :D

Re:React router + Apache
« Odpověď #13 kdy: 07. 09. 2021, 21:47:52 »
Som zvedavy co na to tunajsi trol :D
Ale to je od vás hezké, že jste se sám dobrovolně takhle nabonzoval.

Co je řešení? Nastavit správně základní cestu k aplikaci v Reactu. Opakuji pro zdejšího trola Death Walkera: v Reactu.

Co jsem já psal hned v prvním komentáři?

Pokud se nic nevykreslí při kliknutí na odkaz na stránce, je problém ve webové (Reactové) aplikaci – v takovém případě nejde vůbec požadavek na server. Máte v té aplikaci správně nakonfigurováno, že její výchozí adresa ke /frontend/admin/build?

Že je potřeba správně nastavit výchozí adresář v Reactu. Takže hned první má odpověď byla správně.

A co psal místní trol Death Walker?

Pozrel by som v dokumentacii k mod_rewrite na direktivu RewriteBase...
Psal o direktivě RewriteBase v konfiguraci Apache.

A teď si nejspíš ještě popletl RewriteBase a basename (ano, obojí obsahuje slovo „base“) a myslí si, že měl pravdu.

Ale jeden pozitivní výstup z toho je. Budu mít od Death Walkera pokoj, protože pokaždé, když mne zkusí trolit, odkážu ho do téhle diskuse, abych mu připomněl, že má chodit kanálama a ne psát o věcech, kterým nerozumí.

L..

  • ***
  • 196
    • Zobrazit profil
    • E-mail
Re:React router + Apache
« Odpověď #14 kdy: 08. 09. 2021, 06:52:35 »
Som zvedavy co na to tunajsi trol :D

Tak tady už fakt nevím, jestli jen trolíš, nebo jsi fakt tak mimo a myslíš si, že basename je něco v konfiguraci Apache.