Tworzenie i uruchamianie projektów React w lokalnym środowisku macOS z ServBay

Czym jest React?

React to otwartoźródłowa biblioteka JavaScript, rozwijana przez Meta (dawniej Facebook) oraz społeczność, służąca do budowania interfejsów użytkownika (UI). Umożliwia komponentowe tworzenie interaktywnych UI, co pozwala programistom efektywnie budować złożone i łatwe w utrzymaniu aplikacje jednostronicowe (SPA) lub rozbudowane aplikacje webowe. Do największych zalet Reacta należą deklaratywne podejście do programowania, wydajny mechanizm wirtualnego DOM oraz bogaty ekosystem.

Najważniejsze cechy i zalety React

• Rozwój oparty na komponentach: Dzieli skomplikowane UI na niezależne, wielokrotnego użytku komponenty, co poprawia czytelność i łatwość utrzymania kodu.
• Deklaratywne widoki: Programista opisuje, jak powinien wyglądać UI w danym stanie, a React zajmuje się aktualizacją DOM, upraszczając logikę aplikacji.
• Wirtualny DOM: Przechowuje w pamięci wirtualną reprezentację DOM i aktualizuje rzeczywisty DOM tylko tam, gdzie zaszły zmiany, znacznie podnosząc wydajność.
• Jednokierunkowy przepływ danych: Dane przepływają z góry w dół, co ułatwia przewidywanie i śledzenie zmian stanu w aplikacji.
• JSX: Rozszerzenie składni JavaScript, umożliwiające pisanie kodu przypominającego HTML w obrębie plików JS, co poprawia czytelność.
• Rozbudowany ekosystem: Ogromne wsparcie społeczności i bogactwo bibliotek zewnętrznych, takich jak React Router, Redux/Zustand/MobX, Material UI i wiele innych (zarządzanie stanem, routing, komponenty UI itd.).

Dzięki React możesz szybciej i wydajniej tworzyć nowoczesne, wysokowydajne aplikacje webowe.

Budowa środowiska deweloperskiego i produkcyjnego React z ServBay

ServBay to potężne środowisko lokalnego rozwoju webowego na macOS, oferujące gotowe pakiety oprogramowania, w tym Node.js. Ten przewodnik krok po kroku przeprowadzi Cię przez tworzenie, konfigurację i uruchamianie projektu React z wykorzystaniem środowiska Node.js ServBay oraz funkcji stron internetowych (Websites), w tym reverse proxy dla trybu deweloperskiego i serwowania statycznych plików dla trybu produkcyjnego.

Wymagania wstępne

Przed rozpoczęciem pracy upewnij się, że:

1. Zainstalowano ServBay: ServBay jest poprawnie zainstalowany i działa na Twoim macOS.
2. Dodano pakiet Node.js: Node.js został zainstalowany przez interfejs ServBay lub z linii poleceń. Szczegóły znajdziesz w dokumencie ServBay dotyczącym instalacji Node.js. ServBay automatycznie zarządza wersjami Node.js oraz zmiennymi środowiskowymi.

Tworzenie projektu React

Wykorzystamy nowoczesne narzędzie do budowania frontendów – Vite – aby szybko stworzyć projekt React. Vite oferuje błyskawiczny start i natychmiastowe hot module reloading (HMR), co znacząco poprawia komfort pracy. To obecnie główny wybór dla nowych projektów React, zastępując tradycyjne create-react-app.

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

   Otwórz aplikację terminala. Zalecany domyślny katalog stron ServBay to /Applications/ServBay/www. Przejdź do tego katalogu:

   cd /Applications/ServBay/www

2. Utwórz nowy projekt React za pomocą Vite

   Wpisz poniższe polecenie, aby użyć generatora create-vite do utworzenia projektu o nazwie servbay-react-demo z szablonem React:

   npx create-vite servbay-react-demo --template react

   • npx to narzędzie do uruchamiania pakietów npm bez instalowania ich globalnie, zawsze wykorzystuje najnowszą wersję polecenia.
   • create-vite to oficjalny installer Vite.
   • servbay-react-demo to folder, w którym zostanie utworzony Twój projekt.
   • --template react oznacza użycie szablonu dla React.

   Postępuj zgodnie z instrukcjami na ekranie, aby ukończyć tworzenie projektu.

3. Przejdź do folderu projektu i zainstaluj zależności

   Wejdź do nowo utworzonego katalogu projektu i zainstaluj wymagane paczki za pomocą npm:

   cd servbay-react-demo
   npm install

   • Możesz także użyć yarn install lub pnpm install jeśli preferujesz te menedżery pakietów.

Zmiana zawartości strony startowej React (opcjonalnie)

Aby upewnić się, że konfiguracja przebiegła pomyślnie, warto na szybko zmodyfikować zawartość strony głównej projektu.

1. Otwórz plik src/App.jsx lub src/App.tsx

   Użyj swojego ulubionego edytora, aby otworzyć plik src/App.jsx (jeśli wybrałeś szablon JavaScript) lub src/App.tsx (dla szablonu TypeScript).

2. Edytuj zawartość

   Odszukaj sekcję odpowiedzialną za renderowanie głównej treści i zmień ją tak, aby wyświetlała "Hello ServBay!":

   // ... inne importy ...
   import './App.css';
   
   function App() {
     // ... inne fragmenty kodu ...
     return (
       <>
         {/* ... inne elementy ... */}
         <h1>Hello ServBay!</h1>
         {/* ... inne elementy ... */}
       </>
     );
   }
   
   export default App;

   Zapisz zmiany.

Tryb deweloperski

Podczas pracy nad projektem uruchamiamy lokalny serwer deweloperski, który zapewnia m.in. hot module reloading (HMR) dla komfortu i wydajności. ServBay pozwala skonfigurować reverse proxy, by przekierowywać ruch z zewnątrz do uruchomionego serwera deweloperskiego.

1. Uruchom serwer deweloperski w terminalu

   Będąc w folderze głównym projektu servbay-react-demo, wydaj polecenie uruchamiające serwer Vite na wybranym porcie (np. 8585):

   npm run dev -- --port 8585

   • npm run dev uruchamia skrypt dev z pliku package.json, zwykle startuje on serwer Vite.
   • -- --port 8585 przekazuje numer portu do polecenia Vite.

   Po uruchomieniu w terminalu pojawi się lokalny adres, np. http://localhost:8585. Nie zamykaj tego okna terminala – serwer musi pozostać uruchomiony.

2. Konfiguracja reverse proxy w ServBay

   Otwórz aplikację ServBay i przejdź do sekcji Websites. Kliknij przycisk dodawania i utwórz nową konfigurację strony:

   • Nazwa (Name): ServBay React Dev (dowolna, najlepiej opisowa)
   • Domena (Domain): servbay-react-dev.servbay.demo (przykładowa domena powiązana z brandem ServBay)
   • Typ strony (Site Type): wybierz Reverse Proxy
   • Proxy IP: 127.0.0.1 (serwer deweloperski działa lokalnie)
   • Proxy Port: 8585 (port użyty do uruchomienia serwera)

   Zapisz konfigurację. ServBay automatycznie zastosuje ustawienia i skonfiguruje wbudowany serwer WWW (Caddy lub Nginx), by wszystkie żądania do servbay-react-dev.servbay.demo były przekierowywane do http://127.0.0.1:8585.

   Szczegółowy opis dodawania stron w ServBay znajdziesz w dokumentacji zarządzania stronami ServBay.

3. Odwiedź stronę deweloperską

   Otwórz przeglądarkę i przejdź pod skonfigurowaną domenę: https://servbay-react-dev.servbay.demo.

   • Dzięki wbudowanemu wsparciu ServBay, Twoja lokalna strona automatycznie korzysta z certyfikatu SSL (wystawionego przez ServBay User CA lub ServBay Public CA), co zapewnia bezpieczny dostęp przez HTTPS. Więcej w instrukcji zabezpieczania stron SSL w ServBay.
   • Teraz, modyfikując i zapisując pliki w edytorze kodu, natychmiast zobaczysz odświeżenie strony w przeglądarce – to znak, że hot module reloading działa poprawnie.

Budowanie wersji produkcyjnej

Po zakończeniu prac i przygotowaniu aplikacji do wdrożenia należy wygenerować zoptymalizowaną wersję produkcyjną.

1. Zbuduj wersję produkcyjną w terminalu

   W katalogu głównym projektu servbay-react-demo wpisz:

   npm run build

   Polecenie to uruchamia skrypt build z pliku package.json. Dla projektów React z Vite powoduje ono kompilację, bundling i optymalizację wszystkich źródeł do zestawu statycznych plików (HTML, CSS, JS itd.) zwykle umieszczanych w folderze dist. W terminalu pojawi się informacja o sukcesie budowania.

2. Skonfiguruj statyczną obsługę plików przez ServBay

   Folder dist zawiera w pełni gotowe do publikacji pliki. W ServBay można utworzyć konfigurację statycznej strony obsługującej ten katalog.

   Otwórz aplikację ServBay, przejdź do sekcji Websites i kliknij dodawanie nowej strony:

   • Nazwa (Name): ServBay React Prod (np. opisowa nazwa)
   • Domena (Domain): servbay-react.servbay.demo (inna niż w trybie dev, by odróżnić środowiska)
   • Typ strony (Site Type): wybierz Static
   • Katalog główny strony (Website Root Directory): /Applications/ServBay/www/servbay-react-demo/dist (ścieżka do folderu dist Twojego projektu)

   Zapisz konfigurację. ServBay skonfiguruje serwer WWW do bezpośredniego serwowania plików z katalogu dist.

3. Odwiedź produkcyjną stronę

   W przeglądarce otwórz adres: https://servbay-react.servbay.demo.

   Zobaczysz w pełni zoptymalizowaną, gotową do wdrożenia wersję swojej aplikacji React z automatycznym wsparciem SSL.

Podsumowanie

Postępując zgodnie z powyższymi krokami, udało Ci się utworzyć kompletny projekt React w lokalnym środowisku macOS z ServBay, skonfigurować reverse proxy dla trybu deweloperskiego oraz serwisowanie statycznych plików w środowisku produkcyjnym. ServBay znacznie upraszcza budowę i zarządzanie lokalnym środowiskiem, zapewniając gotowe wsparcie Node.js, elastyczną konfigurację stron (reverse proxy i statyczne) oraz automatyczny SSL – co czyni go świetnym narzędziem dla twórców aplikacji React. Na tej bazie możesz rozwijać, testować oraz wdrażać swoje projekty React z dużą wygodą i bezpieczeństwem.