Tworzenie i uruchamianie projektu Vue.js z ServBay

Vue.js to popularny, progresywny framework JavaScript do budowy interfejsów użytkownika. Łatwy do nauki, elastyczny i wydajny – szczególnie polecany do aplikacji typu Single Page (SPA). ServBay to uniwersalne lokalne środowisko web developerskie, oferujące wygodne wsparcie dla Node.js na macOS i Windows, co czyni go idealnym wyborem do rozwoju projektów Vue.js.

Ten przewodnik prowadzi przez proces stworzenia projektu Vue.js w środowisku ServBay – od instalacji, przez tryb deweloperski, po finalny build i publikację.

Czym jest Vue.js?

Vue.js to progresywny framework JavaScript dedykowany tworzeniu interfejsów użytkownika. W przeciwieństwie do dużych, złożonych frameworków, Vue umożliwia stopniową integrację – jego core skupia się wyłącznie na warstwie widoku, przez co jest łatwy do wdrożenia oraz integracji z innymi bibliotekami lub istniejącymi projektami. Najnowsza wersja, Vue 3, przynosi wiele udoskonaleń: większa wydajność, mniejszy rozmiar i pełniejsze wsparcie dla TypeScript.

Główne zalety i funkcje Vue 3

• Composition API: Organizacja logiki komponentów poprzez funkcje – kod w dużych komponentach staje się bardziej przejrzysty i reużywalny.
• Lepsza wydajność: System reactivity oparty o Proxy oraz zoptymalizowany wirtualny DOM – widoczne przyspieszenie działania.
• Mały rozmiar paczki: Dzięki Tree-shaking, core Vue 3 jest lekki, co skraca czas ładowania.
• Zaawansowane wsparcie TypeScript: Rozbudowane typy pozwalają komfortowo tworzyć aplikacje Vue w TypeScript.
• Nowa logika cyklu życia komponentów: Nowe hooki i funkcja Setup upraszczają zarządzanie kodem komponentów.

Vue 3 pozwala szybko budować nowoczesne i dynamiczne aplikacje webowe o wysokiej responsywności.

Tworzenie i uruchamianie projektu Vue.js w środowisku ServBay

W tym poradniku skorzystamy z środowiska Node.js oferowanego przez ServBay do stworzenia i uruchomienia projektu Vue.js. Wykorzystamy funkcję Strony do konfiguracji lokalnego serwera WWW, zarówno w trybie reverse proxy, jak i statycznego hostingu.

Wymagania wstępne

Przed rozpoczęciem upewnij się, że:

1. ServBay jest zainstalowany: Posiadasz poprawnie działające lokalne środowisko ServBay.
2. Node.js jest zainstalowany przez ServBay: Zainstalowano Node.js z poziomu menedżera pakietów ServBay. Szczegóły znajdziesz w sekcji: Instalacja i użytkowanie Node.js w ServBay.

Inicjalizacja projektu Vue.js

1. Tworzenie nowego projektu

   Otwórz terminal. ServBay sugeruje przechowywanie projektów webowych w domyślnym katalogu. Przejdź do tej lokalizacji i uruchom polecenie npm create vue@latest, które utworzy nowy projekt Vue.js z najnowszymi ustawieniami (najczęściej na Vue 3).

   macOS:

   cd /Applications/ServBay/www
   npm create vue@latest

   Windows:

   cd C:\ServBay\www
   npm create vue@latest

   Terminal poprosi o podanie nazwy projektu (warto użyć np. servbay-vue-app) oraz wybór dodatków: TypeScript, Vue Router, Pinia itd. Przykładowa konfiguracja:

   ✔ Project name: … servbay-vue-app
   ✔ Add TypeScript? … No # Wybierz Yes lub No wg preferencji
   ✔ Add JSX Support? … No # Wybierz Yes lub No wg potrzeb
   ✔ Add Vue Router for Single Page Application development? … Yes # Zalecane: Yes
   ✔ Add Pinia for state management? … No # Wybierz Yes lub No wg potrzeby
   ✔ Add Vitest for Unit testing? … No # Wybierz Yes lub No wg potrzeby
   ✔ Add an End-to-End Testing Solution? … No # Wybierz Yes lub No wg potrzeby
   ✔ Add ESLint for code quality? … Yes # Zalecane: Yes
   ✔ Add Prettier for code formatting? … Yes # Zalecane: Yes
   ✔ Add Vue DevTools 7 extension for debugging? (experimental) … No # Wg uznania

2. Instalacja zależności

   Po inicjalizacji przejdź do folderu projektu servbay-vue-app i uruchom instalację zależności:

   cd servbay-vue-app
   npm install

Modyfikacja przykładowej zawartości (opcjonalnie)

Żeby szybko zweryfikować poprawność projektu, możesz zmienić zawartość pliku src/App.vue tak, by wyświetlał komunikat "Hello ServBay!".

Otwórz src/App.vue w katalogu projektu i zamień zawartość na:

<template>
  <div id="app">
    <h1>Hello ServBay!</h1>
    <p>To aplikacja Vue.js uruchomiona przez ServBay.</p>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Konfiguracja środowiska developerskiego (reverse proxy)

W trybie deweloperskim projekt Vue uruchamia lokalny serwer (np. Vite lub Webpack) wspierający HMR – czyli automatyczne odświeżanie kodu. ServBay pozwala skonfigurować reverse proxy, by przypisać lokalną domenę do takiego serwera.

1. Uruchomienie serwera developerskiego

   W katalogu głównym projektu wykonaj polecenie, które wystartuje serwer na wskazanym porcie (np. 8585):

   npm run dev -- --port 8585

   Terminal wyświetli adres, np. http://localhost:8585.

2. Konfiguracja reverse proxy w ServBay

   Uruchom aplikację ServBay, przejdź do sekcji Strony. Dodaj nową stronę i wybierz typ Reverse Proxy:

   • Nazwa: np. My first Vue dev site
   • Domena: np. servbay-vue-dev.servbay.demo
   • Typ strony: Reverse Proxy
   • Adres IP proxy: 127.0.0.1
   • Port proxy: 8585 (zgodnie z uruchomionym serwerem)

   Po zapisaniu ServBay automatycznie zaktualizuje konfigurację Web Serwera (Caddy/Nginx) i przypisze domenę do wybranego portu.

   Szczegóły procesu znajdziesz tu: Dodawanie strony Node.js w ServBay.

3. Wdrażanie trybu developerskiego

   Upewnij się, że serwer WWW ServBay działa. Otwórz przeglądarkę i odwiedź skonfigurowaną domenę, np. https://servbay-vue-dev.servbay.demo.

   ServBay automatycznie konfiguruje SSL dla lokalnych domen (za pomocą własnego CA), więc możesz pracować przez HTTPS – tak jak na produkcji. O szczegółach SSL przeczytasz tu: Konfiguracja certyfikatu SSL w ServBay.

   Jeśli wszystko działa, zobaczysz swoją aplikację Vue w trybie developerskim z wsparciem hot reload.

Build produkcyjny i wdrożenie (statyczny hosting)

Po zakończeniu prac czas przygotować zoptymalizowaną paczkę produkcyjną, którą łatwo udostępnić przez statyczny hosting w ServBay.

1. Tworzenie builda produkcyjnego

   W katalogu projektu uruchom:

   npm run build

   Wynikiem będzie zestaw zoptymalizowanych plików w folderze dist.

2. Konfiguracja statycznej strony w ServBay

   W ServBay, w sekcji Strony, dodaj nową stronę typu Statyczna:

   • Nazwa: np. My first Vue production site
   • Domena: np. servbay-vue-prod.servbay.demo
   • Typ strony: Statyczna
   • Katalog root strony:
     • macOS: /Applications/ServBay/www/servbay-vue-app/dist
     • Windows: C:\ServBay\www\servbay-vue-app\dist

   Po zapisaniu konfiguracji serwer WWW ServBay będzie serwować pliki bezpośrednio z folderu dist.

3. Testowanie wersji produkcyjnej

   Sprawdź, czy serwer WWW ServBay działa. Wejdź na domenę produkcyjną, np. https://servbay-vue-prod.servbay.demo.

   Zobaczysz zoptymalizowaną aplikację Vue, gotową do publikacji. Dzięki własnej domenie i SSL możesz przetestować produkcję lokalnie, bezpiecznie i wygodnie.

Dodatkowe uwagi

• Konflikt portów: Jeśli wybrany port (np. 8585) jest zajęty, polecenie uruchomienia serwera zgłosi błąd – użyj innego wolnego portu i odpowiednio zmień konfigurację proxy.
• Stan serwera WWW ServBay: Upewnij się, że Web Server (Caddy lub Nginx – zależnie od ustawień ServBay) jest aktywny, inaczej strony nie będą dostępne pod wskazanymi domenami.
• Obsługa domen: ServBay automatycznie przekieruje domeny .servbay.demo na lokalny adres (127.0.0.1). Jeśli wybierzesz inną domenę, może być konieczna ręczna edycja pliku hosts lub użycie menedżera hosts ServBay.

Podsumowanie

ServBay umożliwia wygodne i szybkie tworzenie lokalnego środowiska deweloperskiego z Node.js na macOS i Windows. Zarządzanie projektem Vue.js jest dzięki temu proste na każdym etapie – zarówno podczas programowania, jak i tworzenia buildów produkcyjnych. Funkcja Strony pozwala efektywnie skonfigurować reverse proxy dla serwera deweloperskiego lub hosting statyczny dla produktu końcowego, z własną domeną i automatycznym SSL, co usprawnia przebieg pracy i testowania. To zdecydowanie ułatwia setup i workflow dla deweloperów Vue.js pracujących lokalnie.