Tworzenie i uruchamianie projektu Nuxt.js w ServBay

Czym jest Nuxt.js?

Nuxt.js to otwartoźródłowy framework oparty na popularnym Vue.js, zaprojektowany do tworzenia nowoczesnych, wydajnych aplikacji webowych. Upraszcza on wiele złożonych konfiguracji, dzięki czemu deweloperzy mogą skoncentrować się na logice biznesowej. Nuxt.js wyróżnia się szczególnie przy budowaniu aplikacji renderowanych po stronie serwera (SSR), ale oferuje również potężne możliwości generowania statycznych stron (SSG). Dzięki temu Nuxt.js jest doskonałym wyborem do tworzenia bogatych w treści i przyjaznych SEO stron oraz aplikacji.

Najważniejsze funkcje i zalety Nuxt.js

• Renderowanie po stronie serwera (SSR): Strony Vue są wstępnie renderowane na serwerze, co znacząco przyspiesza pierwszy załadunek strony, poprawia doświadczenie użytkownika oraz zwiększa indeksowalność treści przez wyszukiwarki, wspierając SEO.
• Generowanie statycznych stron (SSG): Podczas procesu budowania generowane są gotowe statyczne pliki HTML. Taka metoda jest niezwykle wydajna, prosta w wdrożeniu i nie wymaga kosztów związanych z utrzymaniem serwera, idealna dla rzadko zmieniających się stron, jak blogi czy dokumentacja.
• Automatyczny podział kodu (Automatic Code Splitting): Nuxt.js rozdziela kod JavaScript w zależności od routingu, dzięki czemu użytkownik pobiera tylko niezbędną część aplikacji, co znacząco poprawia wydajność.
• Routing oparty na systemie plików (File-system Routing): Tworzenie plików .vue w katalogu pages automatycznie generuje konfigurację routera, znacząco upraszczając zarządzanie trasami.
• Modularność (Modularność): Rozbudowany ekosystem modułów pozwala łatwo integrować dodatkowe funkcje i usługi zewnętrzne (np. Axios, wsparcie PWA, integrację z CMS).
• Konwencja ponad konfiguracją (Convention over Configuration): Stosowanie określonej struktury katalogów i konwencji nazewnictwa ogranicza konieczność rozbudowanej konfiguracji.
• Wyraźne wsparcie deweloperskie: Narzędzia takie jak Hot Module Replacement (HMR) oraz czytelne raportowanie błędów zapewniają sprawną pracę deweloperską.

Dzięki tym cechom, Nuxt.js pozwala sprawnie tworzyć złożone, wydajne oraz zoptymalizowane pod SEO aplikacje webowe.

Konfiguracja i uruchamianie projektu Nuxt.js w ServBay

Ten przewodnik pokaże, jak wykorzystać mocne, lokalne środowisko programistyczne ServBay – zwłaszcza pakiet Node.js oraz funkcje zarządzania stronami – do stworzenia, skonfigurowania i uruchomienia projektu Nuxt.js. Opisujemy krok po kroku, jak skonfigurować tryb deweloperski (reverse proxy) oraz tryb produkcyjny (statyczne pliki) w ServBay.

Wymagania wstępne

Przed rozpoczęciem pracy upewnij się, że spełniasz poniższe warunki:

1. ServBay jest poprawnie zainstalowany na Twoim komputerze.
2. Pakiet Node.js jest zainstalowany i włączony w ServBay. Sprawdź to i skonfiguruj w zakładce „Pakiety” w panelu sterowania ServBay.
3. Podstawowa znajomość Node.js, npm (lub Yarn/pnpm) oraz podstawowych poleceń terminala.
4. (Opcjonalnie, zalecane) Zainstalowany edytor kodu, np. VS Code.

Tworzenie projektu Nuxt.js

Do szybkiego zainicjowania projektu Nuxt.js użyjemy narzędzia create-nuxt-app.

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

   Domyślny katalog stron ServBay to /Applications/ServBay/www. Zaleca się przechowywanie tam projektów lokalnych. Otwórz terminal i przejdź do katalogu za pomocą:

   cd /Applications/ServBay/www

2. Inicjalizacja nowego projektu Nuxt.js

   Użyj polecenia npx create-nuxt-app, aby stworzyć nowy projekt o nazwie servbay-nuxt-app. npx jest narzędziem dostarczanym wraz z npm 5.2+ i pozwala uruchamiać pakiety npm bez instalacji globalnej.

   npx create-nuxt-app servbay-nuxt-app

   Po wydaniu polecenia postępuj zgodnie z instrukcjami w terminalu. Wybierz opcje dopasowane do Twoich potrzeb. Przykładowa konfiguracja może wyglądać następująco:

   ? Project name: servbay-nuxt-app
   ? Programming language: JavaScript
   ? Package manager: Npm         # Wybierz menedżera pakietów, np. Npm lub Yarn
   ? UI framework: None          # Wybierz framework UI, według potrzeb
   ? Nuxt.js modules: Axios      # Dodaj wybrane moduły Nuxt.js
   ? Linting tools: ESLint       # Wybierz narzędzie lintujące, jeśli potrzebujesz
   ? Testing framework: None     # Wybierz framework testowy, jeśli wymagany
   ? Rendering mode: Universal (SSR / SSG) # Tryb renderowania; Universal obsługuje SSR i SSG
   ? Deployment target: Server (Node.js hosting) # Docelowe środowisko; Server dla rozwoju lokalnego i wdrożeń Node.js
   ? Development tools: jsconfig.json (Recommended for VS Code) # Konfiguracje narzędzi deweloperskich

3. Instalacja zależności projektu

   Wejdź do katalogu świeżo utworzonego projektu i zainstaluj zależności, korzystając z wybranego menedżera pakietów:

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

   Poczekaj, aż instalacja się zakończy.

Modyfikacja zawartości strony głównej

Aby łatwo zweryfikować poprawność działania, zmodyfikujmy stronę główną projektu, żeby wyświetlała prosty tekst.

1. Otwórz plik pages/index.vue

   Skorzystaj z edytora kodu, by otworzyć plik pages/index.vue w katalogu projektu.

2. Edytuj zawartość pliku

   Zamień zawartość na poniższą, aby na stronie pojawił się napis "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>

   Dodano tutaj atrybut scoped do tagu <style>, by ograniczyć styl tylko do tego komponentu, oraz subtelnie poprawiono wygląd.

Uruchamianie trybu deweloperskiego w ServBay

Domyślnie serwer deweloperski Nuxt.js działa na określonym porcie lokalnym. Aby pracować z własnymi domenami ServBay, certyfikatem SSL i portami 80/443, skonfigurujemy w ServBay stronę typu reverse proxy.

1. Uruchomienie serwera deweloperskiego Nuxt.js

   Przejdź do katalogu projektu i uruchom serwer na porcie 8585 (możesz wybrać inny, wolny port):

   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

   Po poprawnym uruchomieniu serwera, aplikacja powinna być dostępna pod adresem http://localhost:8585. Pozostaw to okno terminala otwarte, aby utrzymać serwer aktywny.

2. Konfiguracja strony ServBay (reverse proxy)

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

   • Nazwa (Name): Nadaj rozpoznawalną nazwę, np. Nuxt.js Dev Site (Proxy).
   • Domena (Domain): Wpisz własną domenę, pod którą chcesz testować stronę, np. nuxt-dev.servbay.demo. Użycie .servbay.demo zgodne jest z dobrymi praktykami brandingowymi ServBay.
   • Typ strony (Website Type): Wybierz Reverse Proxy (reverse proxy).
   • Adres IP (IP Address): Wpisz 127.0.0.1 (adres lokalny).
   • Port (Port): Podaj port wybrany w poprzednim kroku, czyli 8585.

   Po uzupełnieniu kliknij „Dodaj” lub „Zapisz”. ServBay automatycznie zastosuje konfigurację.

   Szczegółowe instrukcje dotyczące dodawania stron Node.js w ServBay (reverse proxy) znajdziesz w dokumencie Dodawanie strony Node.js do rozwoju.

3. Odwiedź stronę w trybie deweloperskim

   W przeglądarce przejdź do domeny skonfigurowanej w ServBay, np. https://nuxt-dev.servbay.demo.

   Dzięki reverse proxy ServBay, uzyskasz dostęp do deweloperskiego serwera Nuxt.js przez własną domenę i HTTPS. ServBay automatycznie wygeneruje i skonfiguruje certyfikat SSL (podpisany przez ServBay User CA; pamiętaj, aby było ono zaufane przez Twój system). Umożliwia to bezpieczną pracę z funkcjami wymagającymi HTTPS, testowaniem Service Workers itp. — podobnie jak w środowisku produkcyjnym.

Budowa i uruchomienie wersji produkcyjnej

Po zakończeniu dewelopmentu, przed wdrożeniem lub gdy chcesz sprawdzić produkcyjne buildy lokalnie, możesz zbudować wersję produkcyjną i wygenerować statyczne pliki. W trybie Universal i dla projektów generujących statyczne strony zazwyczaj uruchomisz nuxt generate (npm run export).

1. Zbuduj wersję produkcyjną i wygeneruj pliki statyczne

   W katalogu projektu uruchom:

   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

   Po zakończeniu budowania pojawi się katalog dist z wygenerowanymi plikami HTML.

2. Konfiguracja strony ServBay (statyczny hosting)

   W panelu ServBay dodaj kolejną stronę:

   • Nazwa (Name): Np. Nuxt.js Prod Site (Static).
   • Domena (Domain): Własna domena produkcyjna, np. nuxt-prod.servbay.demo.
   • Typ strony (Website Type): Wybierz Static (statyczny hosting).
   • Katalog główny (Website Root): Podaj ścieżkę do katalogu dist, czyli /Applications/ServBay/www/servbay-nuxt-app/dist.

   Po uzupełnieniu kliknij „Dodaj” lub „Zapisz”, a ServBay przeładuje konfigurację.

3. Odwiedź stronę w trybie produkcyjnym

   Otwórz przeglądarkę i wpisz skonfigurowaną domenę, np. https://nuxt-prod.servbay.demo.

   Serwer www ServBay (Caddy lub Nginx – w zależności od konfiguracji) będzie bezpośrednio serwował pliki z katalogu dist. To najefektywniejszy sposób publikowania statycznej treści, zapewniający maksymalną szybkość działania. Podobnie jak poprzednio, korzystasz tutaj z darmowych certyfikatów SSL oraz obsługi własnych domen.

Podsumowanie

ServBay umożliwia wygodne zarządzanie środowiskiem deweloperskim i testowym dla projektów Nuxt.js. Dzięki pakietowi Node.js możesz lokalnie uruchamiać serwer developerski, a konfigurowalne domeny oraz reverse proxy ServBay pozwalają bezpiecznie testować projekty przez HTTPS i własne domeny. Po zakończeniu pracy możesz zbudować projekt i generować statyczne pliki, a następnie korzystać z serwera statycznego ServBay dla szybkiego lokalnego podglądu. Taki workflow w pełni pozwala wykorzystać prostotę i możliwości ServBay, zdecydowanie upraszczając proces lokalnego dewelopmentu i testowania nowoczesnych projektów frontendowych. Mamy nadzieję, że ten przewodnik pomoże Ci efektywnie używać ServBay przy pracy z Nuxt.js!