Nuxt.js: Generowanie statycznych plików

0:00W tej części kursu.

0:01Skupimy się na programowym użyciu Nexta.

0:04I w tej konkretnej lekcji opowiem troszkę o tym, jak może on zostać wykorzystany do

0:09renderingu, czyli komendy next generate next rate.

0:13Jest to taka.

0:14Komenda, którą możemy wywołać sobie tutaj przez npm run.

0:17Generate albo.

0:18Jeśli mamy faktycznie nexta

0:20zainstalowanego to czy nawet będzie właściwością właśnie w taki sposób czyli.

0:26Generate i obie.

0:29Komendy zrobią dokładnie to samo.

0:30Ale zanim je odpalimy musimy skonfigurować.

0:34Troszkę nasz tak skonfiguruje.

0:36Czyli.

0:37To co musi się stać to.

0:41Koniecznie musimy ustawić.

0:43Target naszej aplikacji na static, aby

0:46powiedzieć aplikacji, że będziemy statycznie generować tabliczki.

0:50No i następnie w opcji Generate wskazać druty.

0:56Które nie są jawnie wskazane.

0:58Czyli jeśli sobie tutaj powiedzmy chwilowo to komentujemy.

1:02Ja uruchomię next right?

1:04Jak ktoś buduje serwer to wtedy to odpalę.

1:07Potrzebujemy równolegle uruchomić serwer, ponieważ nasze API jest

1:13uruchamiane wewnątrz Nexta, w związku z czym jeżeli nie będziemy mieli

1:15uruchomionego równolegle npm dev i uruchomimy npm

1:20range ride czy next generate, to wtedy nasze podstrony niekoniecznie się

1:24wygenerują, bo mają zależność właśnie na API, które nie będzie chodziło.

1:28Więc klikając teraz next generate

1:31dostaniemy tutaj troszkę informacji co się dzieje.

1:35Widzimy, że buduje się to dla zarówno serwera jak i klienta.

1:39Mamy tutaj widok.

1:41Chwilkę to może zająć.

1:43Nie powinna.

1:45Potrwać to jednak zbyt.

1:46Długo i to co się stanie to

1:49wypluje nam pliki w katalogu dist, które będą plikami.

1:52Statycznymi, plikami HTML.

1:54Czyli dokładnie takimi samymi, które przenosiliśmy początkowo do samego Nexta,

2:00dzięki czemu będzie można w tani i wydajny sposób.

2:03Hostować je na zewnętrznym serwerze WWW

2:07bez konieczności uruchamiania całego serwera nowego.

2:10Jedyny problem. Z pendrivem jest taki.

2:12Że jeżeli dane się zmienią, no to

2:13oczywiście pracujemy już wtedy na statycznych pliki html,

2:16więc nie jest to idealne rozwiązanie, ale jest ono wydajne i jeżeli chcemy je np.

2:23periodycznie aktualizować, to znaczy raz na jakiś czas.

2:28To wtedy mamy taką pewność, że nasze dane są aktualne w miarę.

2:33Nie są to.

2:36Dane w stu procentach na.

2:37Żywo, ale są w miarę.

2:38Zaktualizowane do tego.

2:39Co się faktycznie dzieje.

2:41No i są.

2:42Wydajne, bo są faktycznie plikami HTML.

2:46W związku z czym zobaczmy co się dzieje w katalogu dist.

2:49On jest tutaj wytwarzany, bo oczywiście nie jest 15.

2:52I widzimy, że tutaj.

2:55Mamy.

2:56Wszystkie nasze ruchy Play logi.

2:58Tutaj możecie zauważyć, że error jest Fighting Register, chociaż my tutaj nic

3:03nie podaliśmy, że jakie są raty w naszej aplikacji.

3:06W związku z czym można dojść do wniosku.

3:09Słusznego zresztą.

3:10Że sam wykrywa.

3:13Które ścieżki

3:15są używane przez naszą aplikację na podstawie tego co jest zainfekowane.

3:18I dlatego też.

3:20Znalazła się tutaj nam strona register.

3:22Która jak pamiętamy prowadzi do nieistniejącej strony.

3:26Wyświetla się komunikat o błędzie pattern

3:28found i next generic faktycznie też to wykrywa, więc.

3:32Docelowo powinniśmy oczywiście pozbyć się.

3:35Martwych linków, aby nie tracić czasu zarówno maszynę jak i po

3:40prostu mieć bezpieczny, przewidywalny routing w naszej aplikacji.

3:45No ale widzimy, że nie wygenerowała nam się niestety nasza strona.

3:49Z Januszem Kurczakiem czy z Batmanem.

3:51I to dzieje się dlatego.

3:53Ponieważ nigdy nie linkujemy do tych

3:55stron, bo nie mamy informacji jakie strony na Wikipedii są dostępne.

4:00I właśnie wtedy przychodzi.

4:01Nam na ratunek generate z configure jest.

4:06I aby zadeklarować takie VT musimy do.

4:10Generate, która jest obiektem.

4:11Przekazać props. I to jest po.

4:13Prostu tablica stringów.

4:16Które są ścieżkami.

4:18Które chcemy faktycznie wyrenderować.

4:20Jeśli chcielibyśmy np.

4:21wyrenderować sobie informacje o Januszu.

4:25Kurczaku.

4:28O Batmanie.

4:30Tutaj skopiuj.

4:38Czy o Hiszpanii. No to w tym.

4:42Momencie uruchamiając Next Generation. Musimy poczekać.

4:46Oczywiście aż się przewiduje nam serwer, żeby mieć dostęp do portu 8000 i do

4:51naszych API zadeklarowanych wewnątrz katalogu API.

4:56I w tym momencie uruchamia Next Generation.

4:58I możemy zobaczyć nawet jak na żywo tutaj te pliki się generują.

5:03Za chwilę powinny nam się pojawić tutaj.

5:06Zakładka z katalogiem wiki i wewnątrz nich.

5:09Te trzy waluty Janusz Korczak, Batman oraz Hiszpania.

5:13To oczywiście może troszkę trwać w zależności od tego ile mamy produktów.

5:17Od czego zależą.

5:19My wiemy, że dla każdego z tych altów musimy pobrać osobne wpisy z Wikipedii,

5:23więc to tym bardziej będzie zajmowało troszkę czasu.

5:26Ale efekt jest tego warty, ponieważ mamy.

5:28Faktycznie statyczne pliki, które. Są w jakiś sposób nawet.

5:32Mini pikowane przez nas czy nawet.

5:35I tutaj zobaczymy, że o właśnie się wyrenderować.

5:39Strona wiki dalej to na razie stare niestety nam tutaj mówi, że nie istnieje.

5:44Ale jak wejdziemy w. Wiki to mamy wygenerowane 3 katalogi.

5:47Batman, Janusz Korczak i Hiszpania. I jak wejdziemy w.

5:50Każdy z tych plików to mam plik index. HTML.

5:52Który zawiera wszystkie potrzebne style.

5:55Oraz wszystkie informacje, które zostały

5:57zawarte na faktycznej stronie internetowej.

5:59Czyli możemy sobie tutaj poczytać

6:01jakieś różne fakty o Hiszpanii już w naszym samym systemie.

6:05Jeśli chodzi o next gen jest to dosyć nowa właściwość jeżeli chodzi o nexta.

6:10Ona została wprowadzona bodajże w wersji 2, 14 i Next.

6:15Czy jest też przebudowywany.

6:17Z myślą o tym, aby

6:18ta generacja plików była jeszcze prostsza i jeszcze wydajniejsza?

6:22W związku z czym. Da się to już teraz.

6:24Zrobić.

6:25Ale różne fajne.

6:27Rzeczy są na horyzoncie tego co będzie się działo w Trójce.

6:30Więc to, co chciałbym abyście wynieśli z tej lekcji jest to, że możemy.

6:33Wywołać NPM run generate bądź next

6:36generate w naszym katalogu, gdzie faktycznie posiadamy.

6:39Nexta i aby zadeklarować produkty.

6:42Które nie są niestety. Wykrywane.

6:44Dynamicznie, ponieważ nie są podlinkowane.

6:46Możemy wykorzystać właściwość Generate. By.

6:50Przekazać tutaj wszystkie ścieżki, które chcemy mieć.

6:52Wygenerowane. No i obowiązkowym.

6:54Jest również target static.

6:58Dzięki któremu na warstwie i może wyrenderować właśnie te wszystkie pliki.

7:02W kolejnej lekcji opowiem o tym, jak używać.

7:05Nexta programowo, to znaczy faktycznie.

7:07W kodzie źródłowym wywoływać metody na necie, które będą.

7:11Korzystały z naszego obecnego.

7:12Konfigu i dzięki którym będziemy. W stanie np.

7:15. Tworzyć dodatkowe.

7:15Serwery na tym samym porcie.