Nowoczesny React: Używanie plików .env

0:00Nasza aplikacja ma jeszcze jeden problem, o którym komunikowałem Ci wcześniej.

0:04To jest ten baseURL.

0:05Otóż chodzi o to, że aktualnie ładujemy tą listę użytkowników.

0:09Czyli people jest załadowany dlatego, że mamy tutaj na porcie 3000 ustawiony

0:15lokalny serwer, który imituje nam mokuje nam backend, prawda?

0:19Czyli mamy na porcie 3000 to wystawione.

0:22I teraz wyobraź sobie, że ktoś odwiedza naszą stronę.

0:25Czyli to już nie jest na localhost ie 5.173, tylko jest na

0:30przykład na naszym AP.

0:32Czyli jest jakaś domena, która pozwala nam na to, żeby ktoś odwiedził naszą stronę.

0:37Czyli nie działamy już na lokalnym serwerze deweloperskim, tylko

0:40puściliśmy to na produkcję.

0:42W takim układzie ta produkcja w momencie gdy ktoś wejdzie na tą stronę też będzie

0:47próbowała uderzyć do localhost 3000, czyli też będzie próbowała dokładnie wykonać to

0:53zapytanie, dlatego, że ten kodzik tutaj mamy to za hardkodowane, więc jest to

0:58zapisane tutaj nie jesteśmy w stanie na to wpłynąć, więc innymi słowy nie będzie to

1:03dostępne dlatego, że nasz użytkownik końcowy nie będzie miał na porcie 3000

1:08wystawione tego naszego mokowego serwera do API.

1:11Jak sobie z tym poradzić?

1:12Bo z drugiej strony chcielibyśmy z tego korzystać.

1:15Przecież nie chcemy na przykład korzystać z produkcyjnego API.

1:18Teraz tylko chcielibyśmy w momencie, gdy robimy development, właśnie

1:21skorzystać z tego localhost 3000.

1:23To jest bardzo wygodne.

1:24To jest wygodne dla nas, dlatego, że po pierwsze, możemy sobie sprawdzić, czy to

1:28ad personam nam działa, po drugie możemy sobie zalosować zupełnie inne imiona.

1:32Tutaj możemy sobie potestować, sprawdzić, pobawić się właśnie tym mokowym backendem.

1:38Jak to sobie zrobić?

1:39Okazuje się, że istnieją pliki, które konfigurujemy sobie w Vicie, które

1:44pozwalają nam właśnie na zrobienie czegoś takiego.

1:47Jeżeli tutaj zobaczymy sobie Gajda, to masz tutaj coś takiego jak

1:51en variables i en variables.

1:53To są właśnie te elementy, które za pomocą plików dodinV jesteśmy w stanie sobie

1:59wymyślić, bo to jest Twoja nazwa.

2:01Sam możesz stwierdzić jak to się nazywa.

2:04Jedyny warunek, jaki widz przed Tobą stawia to to, że musi być to

2:09poprzedzone takim prefiksem vid, żeby.

2:12Jeżeli tego nie zrobisz, to nie będziesz w stanie korzystać z tych zmiennych

2:16środowiskowych, Więc spróbujmy sobie je wprowadzić.

2:19Wszystko czego potrzebujemy to plik dod i enV.

2:23Spróbujmy go sobie zrobić tutaj.

2:24Na szczycie naszej aplikacji będziemy mieli File jako DodinV.

2:29I tutaj spróbujmy sobie zrobić właśnie ten prefix wid backend URL.

2:35I teraz domyślna wartość tego bitbucket URL to będzie po prostu localhost

2:393000, czyli coś takiego jak mamy tutaj.

2:42To może być w ten sposób.

2:44Zróbmy to sobie tak.

2:46I żeby użyć tej wartości musimy teraz posłużyć się tym import metainv.

2:52Czyli robimy to na tej zasadzie Importmeta i EnV i tutaj pakiet URL.

2:58Jeżeli teraz zobaczylibyśmy sobie, czy wszystko nam działa, okaże się, że tak.

3:02Możemy nie być do końca przekonani, ponieważ niektóre takie serwery

3:06developerskie wymagają restartu w momencie, gdy zmieniasz plik dodinv.

3:12Jednak w przypadku tutaj Vita jest tak, że nawet jeżeli zmieniasz jakieś zmienne

3:16środowiskowe, czyli nawet jeżeli tutaj zmienię sobie na 31, to dostaję network

3:22error, dlatego, że gdybym sobie to zbadał, okaże się, że dokładnie w tym momencie.

3:27Spróbujmy to odświeżyć jeszcze raz, żeby to zobaczyć.

3:29People, które tutaj mamy, widzimy, że jest na 31.

3:33Czyli jak gdyby ta moja zmiana zadziałała natychmiastowo, więc nie musimy

3:37restartować nawet serwera.

3:39Możemy sobie to poprawić na 3000.

3:41I teraz wszystko ładuje się poprawnie.

3:43I jak to się ma do tego dynamicznego podmieniania?

3:47No bo teraz tak naprawdę jesteśmy w tym samym punkcie.

3:50Jedyna różnica jest taka, że zahardkodowany mamy tutaj

3:53localhost 3000 w DNV.

3:56Okazuje się, że mamy tak zwane mody i te mody, takie jak na przykład Production

4:01pozwalają nam dopisywać dodinv, co oznacza, że w momencie gdy będziemy mieli

4:07DoD i MV jako production zobacz, dopiszemy sobie.

4:11Możemy skopiować ten plik i tutaj do MV production, to wtedy możemy

4:16zmienić ten backend URL.

4:18Czyli te pliki do DNV powinny mieć te same wpisy, ale różne wartości.

4:23Czyli TNV ma wpis vid backend URL, ale ten DNVproduction będzie miał np.

4:30Wpis https już mój backend with people. com.

4:36Być może jest strona people.

4:37com, więc ten pomysł nie jest zbyt szczęśliwy, ale możemy to tak zostawić.

4:42Możemy sobie też tutaj wyobrazić, że będziemy mieli tzw.

4:45reverse proxy i ten reverse proxy to będzie na przykład ukośnik API, czyli jak

4:50gdyby po ukośnik API będziemy mieli swój własny backend i tak to

4:54produkcyjnie przypiszemy.

4:56Jak to się ma do naszej produkcji?

4:57Zobaczmy teraz.

4:59Wszystko działa tak, jak byśmy chcieli, czyli jak gdyby nasz wariant

5:03deweloperski działa na localhost 3000.

5:05Na tym nam zależało.

5:07Natomiast gdybyśmy teraz wybudowali sobie wariant produkcyjny, czyli

5:10spróbujmy sobie skorzystać z builda.

5:13Uruchamiam teraz polecenie build jako task.

5:15Zobaczmy, że w momencie gdy przebudujemy sobie produkcję, to wtedy ten wid back end

5:20URL zostanie odnaleziony właśnie tutaj, w naszym liście.

5:26Możemy sobie to wyszukać.

5:27Find in files i zobacz tutaj.

5:30W Dist w tym całym zmumifikowanym kodzie index JS, który jest przygotowany

5:34na produkcję, widzimy ten baseURL. Co to oznacza?

5:38Mówi nam to dwie rzeczy.

5:39Po pierwsze te elementy zostają podmieniane w trakcie budowania, czyli

5:45wszystkie te zmienne środowiskowe mamy w kodzie i mamy w kodzie produkcyjnym.

5:48Ale w kodzie developerskim będziemy mieli te z I V, a w kodzie produkcyjnym

5:54będziemy mieli te z DoD i vdot production.

5:57Więc w tym układzie jeśli wybudujemy sobie tą aplikację to to co mamy tutaj

6:02podmieni się na to co jest tutaj.

6:06Celowo dodam sobie tutaj dwie setki, żeby mieć jakąś nieistniejącą domenę.

6:10Zobaczymy sobie jak będzie się to zachowywało, ponieważ nie załaduje

6:14nam produkcyjnie tych rzeczy.

6:16Możemy jeszcze zrobić sobie taką sztuczkę, że skoro my deweloperską będziemy sobie

6:21wystawiać tą za chwilę na weselu, to będziemy chcieli sobie po jednej i po

6:27drugiej stronie po prostu utrzymać to localhost 3000.

6:30Na razie zostawię to w ten sposób.