Ten wpis jest jednym z trzech dotyczących deploymentu aplikacji na platformy Heroku, GitHub Pages oraz Firebase. W tym tutorialu pokażę w jaki sposób wgrać swój projekt do Firebase.

Od czego zacząć?

Przyda się na pewno konto w Google, ponieważ bez niego nie będziemy mogli korzystać z Firebase. Kolejnym etapem założenie nowego projektu na stronie: https://console.firebase.google.com

Nie potrzebna jest teraz konfiguracja Google Analytics, więc integrację można pominąć:

Następnie klikamy w przycisk utwórz projekt. Firebase udostępnia wiele ciekawych serwisów takich jak bazy danych (Cloud Firestore oraz Realtime Database), hosting plików, hosting projektów, wywoływanie funkcji (usługa podobna do AWS lambda) czy zestawy do testów A/B. Nas w tym momencie interesuje jedynie hosting:

Konfiguracja środowiska

Mamy już przestrzeń na Firebase gdzie będziemy mogli zrobić deploy projektu. Będziemy go wykonywać tak jak do tej pory, czyli z poziomu terminala. Przyda się do tego biblioteka firebase-tools, którą należy zainstalować globalnie:

npm install -g firebase-tools

Po instalacji musimy połączyć terminal z naszym kontem Firebase:

firebase login

Możemy się upewnić czy cały proces się udał oraz czy widzimy nasz projekt:

firebase list

Jeśli widzisz listę projektów (lub tylko jeden projekt), to znaczy, że wszystko poszło OK i można przejść dalej.

Kolejnym krokiem jest zmiana folderu na ten w, którym znajduje się projekt i wykonać polecenie:

firebase init

Pojawi się lista wyboru (poruszamy się za pomocą strzałek, opcje wybieramy za pomocą spacji). Opcja, jaką należy wybrać to Hosting:

W kolejnym kroku wybieramy projekt, który chcemy „sparować” z Firebase, w moim przypadku będzie to projekt o nazwie: szkola-reacta:

Teraz przyszedł czas, aby wskazać folder, z jakiego mają być hostowane pliki. W przypadku Firebase domyślną opcją jest folder public. W aplikacjach Reactowych folderem, gdzie znajdują się pliki do deploymentu jest folder build, więc należy go podać w terminalu:

Teraz jeszcze trochę konfiguracji:

• Configure as single-app app: wybierz Yes
• File build/index.html already exists. Overwrite? wybierz No

Nadszedł czas próby 🙂 Firebase posiada ciekawą komendę, która pozwala na przetestowanie aplikacji zanim zdecydujesz się wgrać ją na serwery Google. Aby sprawdzić apkę, wykonaj polecenie:

firebase serve --only hosting

Pojawi się numer portu na jakim aplikacja jest uruchomiona (w moim przypadku jest to http://localhost:5000, u Ciebie prawdopodobnie będzie tak samo). Aby ta instrukcja zadziałała musimy mieć oczywiście coś w folderze build 🙂 Jeśli nic tam jeszcze nie ma lub w ogóle nie masz folderu build, wykonaj polecenie:

npm run build

Jeśli wszystko działa, można przejść do deploymentu. Wykonuje się go za pomocą polecenia:

firebase deploy

I to wszystko! Aplikacja jest już dostępna pod adresem, który zobaczysz w terminalu 🙂

Podsumowanie

Firebase Hosting, to bardzo szybki sposób na hostowanie swoich aplikacji Reactowych (i nie tylko) online, a ponad to przy bardziej zaawansowanych projektach możemy wykorzystywać Realtime Database czy Cloud Firestore – bazy danych dostępne out of the box bez konieczności stawiania dodatkowych serwerów (magia serverless).

Zachęcam również do sprawdzenia jak robi się deploy na Heroku oraz GitHub Pages.

Tutorial wideo

Jeśli wolisz formę wideo, obejrzyj ten film: