Twoja aplikacja React online w 15 minut? Praktyczny przewodnik po wdrożeniu na Netlify
Siedzisz przed ekranem i uśmiechasz się. Twoja nowa aplikacja w React działa idealnie, każdy komponent jest na swoim miejscu, a logika śmiga bez zarzutu… na Twoim komputerze. I wtedy pojawia się to pytanie: „Co dalej?”. Jak w prosty i, co najważniejsze, darmowy sposób pokazać ją światu?
Dla wielu osób na początku drogi proces wdrożenia (deploymentu) brzmi jak czarna magia. Kojarzy się ze skomplikowaną konfiguracją serwerów, komendami w terminalu i stresem. Chcę Ci dziś pokazać, że to mit.
Pokażę Ci metodę, z której sama regularnie korzystam przy mniejszych projektach. Metodę, która zamienia strach w satysfakcję w mniej niż kwadrans. Wdrożymy Twoją aplikację React (zbudowaną z Vite) na platformie Netlify, która zrobi za nas całą ciężką pracę.
Filozofia: Dlaczego Netlify + GitHub to duet idealny?
Zanim przejdziemy do klikania, chcę, żebyś zrozumiał magię, która za tym stoi. Netlify, połączony z Twoim kontem na GitHubie, tworzy coś, co nazywa się Continuous Deployment (Ciągłe Wdrażanie).
Wyobraź sobie, że masz robota-asystenta. Twoim jedynym zadaniem jest pisanie kodu i zapisywanie go na GitHubie. Za każdym razem, gdy to zrobisz, Twój robot automatycznie pobiera kod, buduje z niego gotową aplikację i publikuje ją w internecie. Bez Twojego udziału. Brzmi dobrze? To właśnie zrobimy.
Warsztat: Twoja aplikacja online w 5 prostych krokach
Przygotuj swoje repozytorium na GitHubie. Zaczynamy!
Krok 1: Logujemy się do Netlify przez GitHuba
Wejdź na stronę Netlify i wybierz opcję rejestracji/logowania przez GitHub. To najprostsza droga, bo od razu autoryzujesz dostęp do swoich projektów.
Krok 2: Tworzymy „miejsce” na naszą stronę
W panelu głównym Netlify znajdź duży przycisk „Add new project”. To tutaj zaczyna się nasza przygoda.
Krok 3: Wskazujemy nasz „skarb” – repozytorium z kodem
Netlify poprosi Cię o wybranie dostawcy Git – klikamy oczywiście GitHub. Następnie zobaczysz listę swoich repozytoriów. Wybierz to, w którym znajduje się Twoja aplikacja React.
Krok 4: Mówimy Netlify, jak zbudować naszą aplikację
To kluczowy, ale bardzo prosty krok. Netlify musi wiedzieć, jakich komend użyć. Dla standardowej aplikacji stworzonej z Vite, ustawienia są następujące:
Build command:
npm run build(lubyarn build)Publish directory:
dist
Tyle. Mówisz mu tylko, jak budować projekt i gdzie znajduje się gotowa wersja.
Krok 5: Klikamy „Deploy” i dzieje się magia! Po ustawieniu komend klikasz przycisk „Deploy site”. Netlify w tym momencie pobiera Twój kod, uruchamia proces budowania i po minucie lub dwóch Twoja strona jest online pod losowo wygenerowanym adresem.
Gratulacje, właśnie pokazałeś swój projekt światu!
Efekt: Więcej niż tylko strona online
Najważniejszą korzyścią nie jest samo opublikowanie strony. Jest nią wdrożenie automatycznego procesu. Od teraz zapomnij o ręcznym wrzucaniu plików na serwer. Twoim jedynym zadaniem jest pisanie świetnego kodu i wysyłanie go na GitHuba (git push). Resztą zajmie się Twój nowy, darmowy asystent – Netlify. Każda zmiana w kodzie automatycznie pojawi się w opublikowanej wersji.
Wierzę, że narzędzia, z których korzystamy, powinny upraszczać naszą pracę. Proces wdrożenia nie jest już barierą, a satysfakcjonującym zwieńczeniem Twojego wysiłku.
Udało Ci się opublikować pierwszą aplikację, ale chcesz pójść o krok dalej? A może proces wdrożenia w Twoim większym projekcie jest skomplikowany i chcesz go zoptymalizować?
Skontaktuj się ze mną. Chętnie pomogę Ci przenieść Twoje projekty i procesy na wyższy, bardziej zautomatyzowany poziom.
