Tworzenie i uruchamianie projektu Nuxt.js za pomocą ServBay

Czym jest Nuxt.js?

Nuxt.js to otwartoźródłowy framework bazujący na popularnym Vue.js, przeznaczony do tworzenia nowoczesnych, wydajnych aplikacji webowych. Abstrahuje wiele złożonych ustawień, pozwalając programistom skupić się na logice biznesowej. Nuxt.js doskonale sprawdza się przy budowie aplikacji SSR (Server-Side Rendering), a także oferuje zaawansowane możliwości generowania statycznych stron (SSG), co czyni go idealnym wyborem do tworzenia bogatych w treści, zoptymalizowanych pod SEO witryn i aplikacji.

Kluczowe cechy i zalety Nuxt.js

• Renderowanie po stronie serwera (SSR): Wstępne renderowanie stron Vue na serwerze przyspiesza ładowanie, poprawia doświadczenie użytkownika i zwiększa skuteczność indeksowania przez wyszukiwarki, co sprzyja SEO.
• Generowanie statycznych stron (SSG): Podczas procesu budowy generowane są w pełni statyczne pliki HTML. Taka metoda zapewnia wyższą wydajność, prostą publikację i eliminuje potrzebę uruchamiania serwera runtime – doskonała do witryn z rzadko zmienianymi treściami, jak blogi czy dokumentacje.
• Automatyczny podział kodu (Automatic Code Splitting): Nuxt.js automatycznie dzieli kody JavaScript według tras, ładowane są wyłącznie niezbędne pliki, co zwiększa szybkość działania aplikacji.
• Routing oparty na systemie plików (File-system Routing): Tworzenie plików .vue w katalogu pages automatycznie generuje trasowanie, znacznie upraszczając zarządzanie trasami.
• Modułowość: Bogaty ekosystem modułów umożliwia łatwe dodawanie funkcjonalności i integrację z zewnętrznymi usługami (np. Axios, PWA, CMS).
• Konwenanse zamiast konfiguracji: Przestrzeganie jednolitych struktur katalogów i konwencji nazewnictwa znacznie zmniejsza ilość konfiguracji.
• Udogodnienia dla deweloperów: Obsługa Hot Module Replacement (HMR), raportowanie błędów i inne narzędzia zwiększają komfort pracy.

Dzięki tym cechom Nuxt.js ułatwia budowę złożonych, wydajnych i przyjaznych dla SEO aplikacji webowych.

Konfiguracja i uruchamianie projektu Nuxt.js w ServBay

W tym przewodniku pokażemy, jak wykorzystać ServBay jako potężne lokalne środowisko do tworzenia, konfigurowania i uruchamiania projektu Nuxt.js. Omówimy osobno uruchamianie w trybie deweloperskim (z odwrotnym proxy) i produkcyjnym (z usługą statyczną).

Wymagania wstępne

Przed rozpoczęciem upewnij się, że:

1. Masz zainstalowaną aplikację ServBay.
2. Zainstalowałeś i aktywowałeś Node.js w ServBay. Sprawdź i ewentualnie dodaj go w zakładce „Pakiety” panelu ServBay.
3. Posiadasz podstawową znajomość Node.js, npm (lub Yarn/pnpm) oraz poleceń terminala.
4. (Zalecane) Zainstalowałeś edytor kodu, np. VS Code.

Zakładanie projektu Nuxt.js

Do szybkiej inicjalizacji projektu użyjemy narzędzia create-nuxt-app.

1. Otwórz terminal i przejdź do katalogu głównego stron ServBay

   Domyślny katalog ServBay na strony to zalecane miejsce na lokalne projekty. Uruchom terminal i przejdź do katalogu:

   macOS:

   cd /Applications/ServBay/www

   Windows:

   cd C:\ServBay\www

2. Zainicjuj nowy projekt Nuxt.js

   Użyj npx create-nuxt-app, by utworzyć nowy projekt (servbay-nuxt-app). npx to narzędzie dostępne od npm 5.2+ i umożliwia uruchamianie pakietów bez globalnej instalacji.

   npx create-nuxt-app servbay-nuxt-app

   Postępuj zgodnie z podpowiedziami w terminalu. Poniżej przykładowa konfiguracja:

   ? Project name: servbay-nuxt-app
   ? Programming language: JavaScript
   ? Package manager: Npm         # Wybierz menadżer pakietów, np. Npm lub Yarn
   ? UI framework: None          # Opcjonalnie dodaj framework UI
   ? Nuxt.js modules: Axios      # Opcjonalnie wybierz moduły Nuxt.js
   ? Linting tools: ESLint       # Opcjonalnie dodaj narzędzia lintujące
   ? Testing framework: None     # Dodaj framework do testów, jeśli potrzebujesz
   ? Rendering mode: Universal (SSR / SSG) # Wybierz tryb renderowania; Universal obsługuje SSR oraz SSG
   ? Deployment target: Server (Node.js hosting) # Wybierz docelowe środowisko, Server idealny do lokalnych testów i wdrożeń Node.js
   ? Development tools: jsconfig.json (Recommended for VS Code) # Opcjonalna konfiguracja narzędzi deweloperskich

3. Zainstaluj zależności projektu

   Przejdź do katalogu stworzonego projektu i zainstaluj zależności wybranym menadżerem:

   cd servbay-nuxt-app
   npm install
   # Lub Yarn: yarn install
   # Lub pnpm: pnpm install

   Poczekaj na zakończenie instalacji.

Modyfikacja zawartości projektu

Aby ułatwić weryfikację działania, zmodyfikujemy stronę główną tak, by wyświetlała prosty tekst.

1. Otwórz plik pages/index.vue

   Użyj swojego edytora i otwórz plik pages/index.vue w katalogu projektu.

2. Zmień zawartość pliku

   Zmień treść pliku na poniższy kod – na stronie pojawi się „Hello ServBay!”:

   <template>
     <div>
       <h1>Hello ServBay!</h1>
     </div>
   </template>
   
   <script>
   export default {
     name: 'IndexPage'
   }
   </script>
   
   <style scoped>
   div {
     text-align: center;
     margin-top: 50px;
     font-family: sans-serif;
   }
   h1 {
     color: #333;
   }
   </style>

   Dodaliśmy atrybut scoped do znacznika style, by stylizacja dotyczyła tylko bieżącego komponentu oraz delikatnie ulepszyliśmy prezentację.

Uruchamianie trybu deweloperskiego w ServBay

Serwer deweloperski Nuxt.js domyślnie działa na konkretnym, lokalnym porcie. By korzystać z własnych domen, certyfikatów SSL i portów 80/443, użyjemy funkcji odwrotnego proxy w ServBay.

1. Uruchom serwer deweloperski Nuxt.js

   W katalogu projektu uruchom poniższą komendę, np. na porcie 8585 (możesz użyć innego wolnego portu):

   macOS:

   cd /Applications/ServBay/www/servbay-nuxt-app
   npm run dev -- --port 8585
   # Lub Yarn: yarn dev --port 8585
   # Lub pnpm: pnpm run dev --port 8585

   Windows:

   cd C:\ServBay\www\servbay-nuxt-app
   npm run dev -- --port 8585
   # Lub Yarn: yarn dev --port 8585
   # Lub pnpm: pnpm run dev --port 8585

   Po uruchomieniu serwer powinien być dostępny na http://localhost:8585. Nie zamykaj tego okna terminala – musi działać w tle!

2. Skonfiguruj stronę w ServBay (odwrotne proxy)

   Otwórz panel sterowania ServBay i przejdź do zakładki „Strony”. Kliknij przycisk + w lewym dolnym rogu, by dodać nową stronę:

   • Nazwa (Name): np. Nuxt.js Dev Site (Proxy)
   • Domena (Domain): np. nuxt-dev.servbay.demo (końcówka .servbay.demo zalecana jako branding ServBay)
   • Typ strony (Website Type): wybierz Reverse Proxy
   • Adres IP (IP Address): 127.0.0.1 (adres lokalny)
   • Port: 8585 (lub inny port wybrany podczas uruchamiania serwera Nuxt.js)

   Po zakończeniu kliknij „Dodaj” lub „Zapisz”. ServBay automatycznie wdroży nową konfigurację.

   Szczegółowe kroki znajdziesz w przewodniku Dodawanie strony deweloperskiej Node.js.

3. Odwiedź stronę deweloperską

   Otwórz przeglądarkę i przejdź pod wybraną domenę, np. https://nuxt-dev.servbay.demo.

   Dzięki odwrotnemu proxy ServBay możesz korzystać z domen i HTTPS w środowisku deweloperskim. Certyfikat SSL jest generowany i skonfigurowany automatycznie przez ServBay (wydany przez ServBay User CA – pamiętaj, by zaufać temu CA w swoim systemie). Jest to nieocenione przy testowaniu środowiska produkcyjnego, Service Workers lub funkcji wymagających bezpiecznego kontekstu.

Budowanie i uruchamianie wersji produkcyjnej

Po ukończeniu pracy nad projektem możesz go zbudować i sprawdzić w warunkach produkcyjnych. W przypadku trybu Universal oraz generowania statycznej strony zwykle korzysta się z polecenia nuxt generate (lub za pomocą skryptu npm run export).

1. Budowanie i generowanie plików statycznych

   W katalogu projektu użyj poniższych komend. npm run build kompiluje projekt, a npm run export generuje statyczne pliki HTML dla tras (domyślnie w katalogu dist).

   macOS:

   cd /Applications/ServBay/www/servbay-nuxt-app
   npm run build
   npm run export
   # Lub Yarn: yarn build && yarn export
   # Lub pnpm: pnpm build && pnpm run export

   Windows:

   cd C:\ServBay\www\servbay-nuxt-app
   npm run build
   npm run export
   # Lub Yarn: yarn build && yarn export
   # Lub pnpm: pnpm build && pnpm run export

   Po zakończeniu budowy w katalogu projektu pojawi się folder dist z wygenerowanymi plikami.

2. Skonfiguruj stronę produkcyjną w ServBay (statyczna)

   Przejdź do panelu ServBay, zakładka „Strony”, kliknij + i dodaj nową konfigurację:

   • Nazwa (Name): np. Nuxt.js Prod Site (Static)
   • Domena (Domain): np. nuxt-prod.servbay.demo
   • Typ strony (Website Type): wybierz Static
   • Katalog główny strony (Website Root): wskaz katalog z wygenerowanymi plikami statycznymi:
     • macOS: /Applications/ServBay/www/servbay-nuxt-app/dist
     • Windows: C:\ServBay\www\servbay-nuxt-app\dist

   Po wprowadzeniu danych kliknij „Dodaj” lub „Zapisz”.

3. Odwiedź stronę produkcyjną

   Otwórz dowolną przeglądarkę i wejdź na wybraną domenę, np. https://nuxt-prod.servbay.demo.

   Wysokowydajny serwer WWW ServBay (Caddy lub Nginx, według ustawień) obsłuży statyczne pliki z katalogu dist. Taki sposób publikacji gwarantuje błyskawiczny dostęp i pełne wsparcie dla własnych domen oraz darmowych certyfikatów SSL.

Podsumowanie

Dzięki ServBay możesz sprawnie zarządzać lokalnym rozwojem i preview projektu Nuxt.js. Wykorzystaj paczkę Node.js do uruchamiania serwera developerskiego, konfiguruj odwrotne proxy, by korzystać z własnych domen i HTTPS podczas testów, a po skończonej pracy – zbuduj wersję produkcyjną i wyświetl ją jako stronę statyczną ServBay. Taka przepływ pracy maksymalizuje wygodę i możliwości ServBay, znacząco upraszczając lokalny rozwój frontendowy. Mamy nadzieję, że ten przewodnik pomoże Ci efektywnie tworzyć projekty Nuxt.js w ServBay!