Siedzisz przed ekranem i uśmiechasz się. Nowa aplikacja w React działa idealnie, każdy komponent na swoim miejscu, logika śmiga bez zarzutu… na Twoim komputerze. I wtedy pojawia się pytanie: „Co dalej?”. Jak prosto i – co najważniejsze – za darmo pokazać ją światu?
Na początku drogi proces wdrożenia (deploymentu) brzmi jak czarna magia: skomplikowana konfiguracja serwerów, komendy w terminalu, stres. To mit. Pokażę metodę, z której sama regularnie korzystam przy mniejszych projektach – zamienia strach w satysfakcję w mniej niż kwadrans. Wdrożymy aplikację React (zbudowaną z Vite) na platformie Netlify, która zrobi całą ciężką pracę za nas.
Filozofia: dlaczego Netlify + GitHub to duet idealny?
Zanim przejdziemy do klikania, warto zrozumieć magię, która za tym stoi. Netlify połączony z kontem na GitHubie tworzy tzw. Continuous Deployment (Ciągłe Wdrażanie).
Wyobraź sobie robota-asystenta. Jedyne zadanie to pisać kod i zapisywać go na GitHubie. Za każdym razem, gdy to się dzieje, robot automatycznie pobiera kod, buduje z niego gotową aplikację i publikuje ją w internecie – bez niczyjego udziału. Brzmi dobrze? To właśnie zrobimy.
Warsztat: aplikacja online w 5 krokach
Wystarczy repozytorium na GitHubie. Zaczynamy!
Krok 1: logowanie do Netlify przez GitHub. Wejdź na stronę Netlify i wybierz rejestrację/logowanie przez GitHub. To najprostsza droga – od razu autoryzuje dostęp do projektów.
Krok 2: utworzenie „miejsca” na stronę. W panelu Netlify znajdź duży przycisk „Add new project”. Tu zaczyna się przygoda.
Krok 3: wskazanie repozytorium z kodem. Netlify poprosi o wybór dostawcy Git – klikamy GitHub. Pojawi się lista repozytoriów; wybierz to z aplikacją React.
Krok 4: jak zbudować aplikację. Kluczowy, ale prosty krok – Netlify musi wiedzieć, jakich komend użyć. Dla standardowej aplikacji z Vite:
- Build command:
npm run build(lubyarn build) - Publish directory:
dist
Tyle – mówisz mu tylko, jak budować projekt i gdzie jest gotowa wersja.
Krok 5: „Deploy” i dzieje się magia! Po ustawieniu komend klikasz „Deploy site”. Netlify pobiera kod, uruchamia budowanie i po minucie-dwóch strona jest online pod wygenerowanym adresem. Gotowe – projekt jest w sieci!
Efekt: więcej niż strona online
Najważniejszą korzyścią nie jest samo opublikowanie strony, ale wdrożenie automatycznego procesu. Od teraz koniec z ręcznym wrzucaniem plików na serwer – wystarczy pisać kod i wysyłać go na GitHuba (git push). Resztą zajmie się darmowy asystent, Netlify: każda zmiana automatycznie pojawi się w opublikowanej wersji.
Narzędzia, z których korzystamy, powinny upraszczać pracę. Proces wdrożenia nie musi być barierą – może być satysfakcjonującym zwieńczeniem całego wysiłku.
