Nuxt.js: Start aplikacji z innego entrypointu
Prosty i Nowoczesny Framework dla Vue.js
7 godz. 2 min · Vue.js · Full-stack i Programowanie
Wojciech PołowniakSr. Fullstack EngineerCzego się nauczysz
- Praktyczny kurs, praktyczny projekt: klon Wikipedii
- Migracja statycznej strony HTML do ekosystemu Nuxt
- Tworzenie klasycznych komponentów VueJS
- Przygotowanie własnego API i konsumpcja zewnętrznych endpointów
- Tworzenie i wykorzystanie modułów i pluginów do Nuxt
- SSR - Server Side Rendering
- Programowanie z duchem idei progressive enhancement
- Animacje podczas przejść między podstronami
- Wsparcie dla różnych wersji językowych
- Niebanalne funkcjonalności aplikacji
- Optymalizacja dla wyszukiwarek internetowych
Praktyczny kurs - praktyczny projekt
W tym projekcie tworzyć będziemy praktyczny projekt - klona Wikipedii! Minipedia pobierze dane z prawdziwego źrodła danych, zewnętrznego API WikiMedia - będzie łudząco podobna do oryginału oraz współdzieliła najważniejsze funkcjonalności, takie jak dostarczanie treści w różnych wersjach językowych, możliwość wyszukiwania artykułów, czy pobieranie najpopularniejszych wpisów dla danego języka. Stworzymy także podstronę wyświetlającą za każdym razem losowy artykuł w danej wersji językowej.Zobaczysz też, jak dokonać migracji ze statycznej strony HTML na Nuxt - oraz jak tworzyć przykładowe komponenty podczas tego procesu.Dzięki temu wszystkiemu, dowiesz się jak wykorzystać nabytą wiedzę w praktyce.
Renderowanie po stronie serwera
Dzięki Nuxtowi dowiesz się jak optymalizować Twoje strony www z duchem idei progressive enhancement, dostarczając coraz to lepsze doświadczenia dla swoich użytkowników oraz tworząc aplikację napisaną w 100% w JavaScript, która będzie działała nawet wtedy, gdy użytkownik jawnie wyłączy go w przeglądarce! To wszystko za SSR (Server Side Rendering), dzięki któremu treści będą gotowe do konsumpcji już przy wstępnej, pierwszej odpowiedzi z serwera WWW.Oczywiście, ma to swoje implikacje na wydajność naszej aplikacji - sprawiając że Lighthouse czy optymalizacja pod SEO staje się coraz prostsza!
Najciekawsze pluginy i moduły
Czymże jest ekosystem danego frameworka bez wsparcia społeczności! Dlatego podczas tego kursu nauczysz się instalować i wykorzystywać różne pluginy i moduły, które zaoszczędzą Ci dużo czasu. Dowiesz się też, jak tworzyć własne moduły - które rozszerzą działanie Twojej aplikacji Nuxt w sposób czysty i zarządzalny.
Tworzenie API
Nuxt jest frameworkiem w którym pracujemy zarówno po stronie front-endu, jak i back-endu. W związku z czym, stworzymy swoje własne API (bazujące na express.js) które będzie pewnego rodzaju pośrednikiem pomiędzy API WikiMedia oraz Twoją aplikacją internetową.
Routing w Nuxt
W tym kursie, dowiesz się także jak tworzyć swoje własne Middleware'y - czyli fragmenty kodu wywoływane pomiędzy przechodzeniem między stronami, czy podczas innych zapytań HTTP.Dodatkowo, zobaczysz jakie narzędzia daje nam Nuxt aby tworzyć progresywne aplikacje internetowe, oferując wsparcie dla takich funkcjonalności jak np. animacje między przejściami pojedynczymi podstronami naszego serwisu.
Lokalizacja i tłumaczenie danych
Tajemnicze i18n - czyli numeronim odpowiadający angielskiemu słowu "internalisation" - odnosi się w kontekście web developmentu do tłumaczenia danych na różne języki. Podczas realizacji projektu Minipedii, nie tylko wykorzystamy standardowe podejście do tłumaczeń stałych elementów naszego interfejsu użytkownika, ale także przetłumaczymy same dane zwracane z API, wykorzystując inną wersję językową w zależności od preferencji użytkownika!
Optymalizacja dla wyszukiwarek internetowych
Poznasz też kilka ciekawych pluginów i rozwiązań dotyczących optymalizacji pod SEO - poza faktem, że podejście spełniające intencje użytkownika jest najlepszym, co możemy zrobić - pluginy generujące nam mapę stron automatycznie na podstawie zadeklarowanych przez nas podstron, czy generatory danych jsonld pomogą w pozycjonowaniu Twojej wydajnej aplikacji jeszcze wyżej w hierarchii wyszukiwarek.
Dla kogo jest ten kurs?
Aby móc efektywnie korzystać z tego kursu, powinieneś posiadać średnio zaawansowaną wiedzę z kategorii Front End, z naciskiem na umiejętność posługiwania się JavaScriptem oraz solidne podstawy NodeJS. Konieczna jest znajomość Vue, jako że Nuxt jest frameworkiem korzystającym z niego u swoich podstaw. Jeśli czujesz się dość swobodnie w wyżej wymienionych aspektach web developmentu, ten kurs będzie idealny dla Ciebie.
W tej lekcji opowiem jak programowo użyć.
Tzn faktycznie wywołując metody
bezpośrednio w JavaScripcie, aby osiągnąć różne funkcjonalności.
To co trzeba.
Zrobić to przede wszystkim zajrzeć do dokumentacji.
I zobaczyć.
Jak jest to przedstawione w oficjalnej instrukcji.
Jak dokonywać tego.
W związku z czym musimy zaimportować.
Naszą zależność normalnie w JavaScripcie, czyli robimy sobie.
Nexta i są tutaj dwa zde.
Strukturyzowane parametry load i build.
I w zależności od tego czy jest to.
Środowisko deweloperskie czy nie to dzieją się różne rzeczy.
Np. w środowisku deweloperskim.
Będzie aktywowany hot meczowy lobbing, a
w środowisku produkcyjnym prawdopodobnie będą działy się różne rzeczy związane z
optymalizacją naszego kodu pod środowiska produkcyjne jak np.
modyfikacja czy rezygnacja z różnego rodzaju pasma.
Czyli jeśli sobie zapiszemy.
I stworzymy nowy plik.
Na przykład w katalogu program matka albo może manual.
Będzie to bardziej wymowne.
O co tu chodzi?
I tutaj stworzymy sobie plik.
Dowolna nazwa ponownie indeksowana jest takim standardowym.
Plikiem i.
To tutaj zapiszemy.
To zobaczmy co się stanie po uruchomieniu tego pliku.
Czyli tutaj już standardowo uruchamiamy
aplikację tak jakbyśmy ją uruchamiałem z moda czyli manual.
Indeks. Czy jest.
I tutaj mamy top level VAT, którego niestety nie mamy w tej wersji moda.
W związku z czym stwórzmy tutaj funkcję asynchronicznego.
WiFi.
If, czyli self in box function to jest taka funkcja, która sama się wywołuje.
Tutaj poprzez nawiasy
mamy do niej odniesienie i tutaj jest wywołanie tejże funkcji asynchroniczne i
dlatego możemy zrobić audyt i zobaczmy co się stanie.
Required function.
Tutaj wpadliśmy w pułapkę JavaScriptu i dlatego jestem zwolennikiem średniaków.
Jak widzimy taka sytuacja, gdzie mamy nawias zamykający na końcu i w następnej
linii bez żadnych srebrników nawias zamykający.
Nota W takich sytuacjach niestety
JavaScript świruje, w związku z czym średnik nie włączamy.
Też polecam we wszystkich Piekarach itd używać czytników.
Być może jest to jest, ale.
Jednak sporo może się to wydarzyć.
Ja nie lubię zostawiać takich sytuacji losowi.
W związku z czym zobaczmy co tu się stało.
Widzimy, że. Aplikacja.
Próbowałem się tutaj zbudować serwer URL.
Zawołał nam, że jest tutaj jakiś error, że nie udało mu się znaleźć modułu Express.
Ale cała reszta. Zadziałała.
Jestem ciekawy w sumie czy nasz serwer w ogóle wystartował pomimo tego błędu.
Zobaczmy. Mini mini BD chodzi na porcie.
8000.
I faktycznie chyba nie wystartowała.
Nie wystartowała na porcie 3000.
Też nam się to nie udało.
Więc ja tutaj użyję takiego.
Impetu, który sobie przygotowałem wcześniej i troszkę odchudza.
I właśnie tutaj tak mamy konsolę. Która konsola?
Jest to pakiet, który.
Jest dostępny domyślnie też jeżeli pracujemy z tekstem
i mamy next builder oraz osobną budowę aplikacji naszej ekspresowej.
W związku z czym to co. Możemy zrobić to.
Pobrać.
Sobie naszą oryginalną konfigurację z next config s, a.
Następnie ustalamy jawnie.
Jaki mamy environment w zależności od naszego NOT i MB.
Które to prawdopodobnie.
U mnie akurat w systemie będzie nie ustawione.
Następnie uruchamiamy
Builder na danym porcie, dajemy render na gotowy do kontekstu.
Express.
I dajemy ten sam monit, który daje nam standardowo.
Nie jest to oczywiście. Rozwiązanie idealne i w ogóle.
Dlaczego ktoś mógłby.
Chcieć npm install?
Być może tutaj coś jakiejś zależności się nie zassał.
Jestem ciekawy czy czasem.
Ekspres.
Faktycznie chyba nie ma tutaj.
Ekspresu, a co jest bardzo dziwne,
bo wydaje mi się, że go instalowali i na pewno z niego korzystaliśmy.
A sam MPM chyba na mnie krzyczy O to tutaj
nas stworzył, przeszedł bez żadnego problemu, dalej pracuje w trybie static.
Co w sumie możemy zmienić?
Next config.
Pozbądźmy się tego. Już nie jest to nam potrzebne.
Powinniśmy przebudować ten serwer, ale już niech spróbuje to zadziałać.
Też dla pewności zrobimy save.
Ekspres.
Chyba się przyda.
I faktycznie NPM w samo w sobie działa.
W związku z czym nie rozumiem dlaczego.
Prawdopodobnie magiczne resolution tutaj nie zadziałało.
Dajmy chwilkę na zainstalowanie tutaj Express jawnie.
Być może konsolę też będziemy musieli w takim razie zainstalować jawnie.
I ponownie dlaczego moglibyśmy chcieć używać nastaw programowo.
A nie po prostu komendy Next generation?
Przede wszystkim, jeśli zależy nam na tym, aby zmienić jak.
Next zachowuje się w momencie startu swojej aplikacji.
Bądź jeśli chcielibyśmy na domyślnym.
Serwerze Next uruchomić np.
również równolegle na tym samym porcie serwer web pakietów czy socket.
W takich przypadkach właśnie.
Programowe użycie Nexta jest konieczne.
Expected token export.
OK, zmieńmy tutaj konfig moczu.
Kropka.
Export równa się Zapiszmy i aktywuj ponownie.
I w tym momencie. Faktycznie to zadziałało.
Z tymże widzimy, że nasze zmienne.
Środowiskowe też nie zostały wyłapane, w związku z.
Czym programowe użycie Nexta wymaga od nas naprawiania wszystkich tych.
Mniejszych rzeczy, które wyskoczą po drodze.
Że nie działają.
Więc możemy użyć do tego
takiej paczki do tmp, więc ponownie zainstalujemy sobie tutaj szybko.
Do ten.
I zobaczmy jak się tutaj nb. Jest to taka.
Paczka, która właśnie pobiera zmienne
środowiskowe i możemy ich używać w naszej aplikacji.
Proste użycie npm, install, doc i samo.
User to jest require
i uruchomienie tego konfigu na nim czyli tutaj w naszej aplikacji.
Po prostu zrobimy sobie na samej górze, najlepiej w config.
I tutaj musimy przekazać ścieżkę.
Wydaje mi się, że można dać custom path
tak i tutaj w parametrze możemy podać naszą ścieżkę.
I musimy ją tutaj jawnie podać, ponieważ nasz environment file znajduje się dwa
katalogi wyżej czy jeden katalog wyżej i musimy się do niego odnieść.
Kropka.
I jeszcze raz.
Not manual index jest.
I widzę, że dalej to.
Nie wyłapał tych zmiennych środowiskowych.
Co jest w sumie ciekawe.
Zróbmy sobie konsolowy proces i w
tym momencie wszystkie nasze pliki powinny się tutaj wypisać.
Są tutaj różne moje zmienne środowiskowe.
Ale faktycznie nie widać.
Nie widać naszych zmiennych z katalogu powyżej, więc spróbujmy jeszcze raz
uruchomić, bo być może nie zapisałem po prostu, a tego się pozbędziemy.
W każdym razie widać, że nasz.
Build model też działa mimo tego, że używamy Nexta programowo.
No zdecydowanie ten. Plik sie tam znajduje.
Manual 1 wyżej jest ok. Jestem ciekawy.
Nie chciałbym przekazywać.
Absolutnej ścieżki do tego katalogu, ale być może tak.
Może tak będzie lepiej.
Czyli tutaj przekażemy sobie.
Musimy zainstalować tutaj paczkę PAF Tequila PAF Jest to standardowa paczka
obecna w każdej instancji noda i tutaj zapiszmy to w ten sposób.
Być może to musi być absolutna ścieżka.
Jest to bardzo interesujące, ale żeby nie tracić czasu?
W każdym razie możemy.
Właśnie wykorzystać do tego paczkę doc, aby pobrać sobie te zmienne środowiskowe.
A tak naprawdę mając tyle zmiennych
środowiskowych, które faktycznie się tam znajdują, możemy albo po prostu
przekopiować ten plik w drugie miejsce, co nie jest oczywiście idealnym
rozwiązaniem, ale możemy tak zrobić i to powinno nam zadziałać.
Tylko prawdopodobnie teraz będziemy musieli z powrotem komentować naszego.
Fanfik wywołać. A jeśli nawet.
To nie zadziała.
To możemy po. Prostu na sztywno przypisać te zmienne
środowiskowe do obiektu, co nie jest dobrą praktyką, ale zależy mi
tylko i wyłącznie na uruchomieniu tego skryptu.
I faktycznie teraz widać, że. To zadziałało.
Tutaj mamy standardowe pytania czy chcemy
uczestniczyć w procesie zbierania statystyk?
Powiedzmy, że tak.
A nie trafiłem i niestety wyszło, że nie.
W każdym razie widzimy, że wszystkie te.
Rzeczy, które tutaj
są nie zainstalowane z jakiegoś powodu nie łapią tego kontekstu wyżej.
W związku z czym nie jesteśmy w stanie używać tekstur programowo.
Jednak dużo tutaj trzeba robić własnoręcznie.
Dlatego tak myślę. Że dobrą.
Analogią byłoby przejście na ręczną skrzynię biegów.
A jeżeli całe życie uczyliśmy się jeździć
na automacie, to przejście może być dosyć bolesne.
Natomiast daje nam to w pewnym sensie większą kontrolę nad tym, co robimy.
Zobaczmy, czy serwer faktycznie wystartował.
I wydaje się, że wystartował.
Tylko faktycznie strona główna.
Z jakiegoś powodu nam nie pokazała się.
W związku z czym jesteśmy w stanie robić takie rzeczy.
Znak ten.
I jeśli chcielibyśmy stworzyć własny skrypt, który będzie nam kompilować nexta.
Oczywiście jesteśmy w stanie to zrobić.
Jesteśmy w stanie rozszerzyć obecną
instancję Nexta i tutaj jeżeli jakieś problemy się pojawią np.
ze zmiennymi środowiskowymi.
Czy z HOT mocząc lodem, które też niestety się zdarza.
No to możemy pakować, ale niestety nie jest to najlepiej opisane.
Jeżeli jesteście na tyle zaawansowani, że
chcielibyście czytać kod źródłowy, ewentualnie aby zrozumieć niektóre tzw.
wilki, czyli takie dziwactwa, to zachęcam do użycia nexta programowo, ponieważ da
się, ale dokumentacja jest dosyć skąpa akurat w tej dziedzinie.
W kolejnych sekcjach przejdziemy z powrotem do pracy nad projektem.
To była taka bardziej ciekawostka.
Co można jeszcze zrobić w książce jako
końcówka takiej czysto teoretycznej części tego kursu?
W kolejnej sekcji kursu zajmiemy się tłumaczeniem.
Naszych treści na inne języki.
Zarówno z punktu widzenia API.
Jak i naszego, czyli elementów wizualnych, które my tworzyliśmy na naszej stronie.
Linki
Kod
Zmiany wprowadzone w lekcji · 10 min
diff --git a/25/minipedia/manual/index.js b/25/minipedia/manual/index.js
new file mode 100644
index 0000000..ec2559e
--- /dev/null
+++ b/25/minipedia/manual/index.js
@@ -0,0 +1,36 @@
+// require('dotenv').config({ path: path.resolve(process.cwd(), '../.env') });
+require('dotenv').config();
+
+const express = require('express');
+const consola = require('consola');
+const { Nuxt, Builder } = require('nuxt');
+const app = express();
+
+// Import and Set Nuxt.js options
+const config = require('../nuxt.config.js');
+config.dev = process.env.NODE_ENV !== 'production';
+
+async function start() {
+ // Init Nuxt.js
+ const nuxt = new Nuxt(config);
+
+ const { host, port } = nuxt.options.server;
+
+ await nuxt.ready();
+ // Build only in dev mode
+ if (config.dev) {
+ const builder = new Builder(nuxt);
+ await builder.build();
+ }
+
+ // Give nuxt middleware to express
+ app.use(nuxt.render);
+
+ // Listen the server
+ app.listen(port, host);
+ consola.ready({
+ message: `Server listening on http://${host}:${port}`,
+ badge: true,
+ });
+}
+start();