1. Darmowe konto Google Firebase
2. Dobra znajomość React & Redux

Nie będziemy spędzać czasu na pisaniu aplikacji React Redux, ale pozwólcie, że podzielę się z wami gotowym projektem redux-scaffold-project . Pobierz swoją kopię z repozytorium github tutaj . Jeśli chcesz przetestować aplikację, postępuj zgodnie z krokami instalacji zapisanymi w projekcie Readme .

Ten projekt obejmuje 3 trasy. Status autoryzacji i zadania są przechowywane w sklepie Redux.
1. Zaloguj się
2. Informacje
3. Strona główna (Chronione)
Podczas tworzenia tego projektu postępowałem zgodnie ze standardowymi praktykami, więc nie krępuj się używać go jako startera do dowolnego projektu :)

Konfigurowanie projektu Firebase

W Firebase najpierw tworzymy projekt, a następnie tworzymy w nim aplikację. W jednym projekcie możesz mieć wiele aplikacji. Wiele usług Firebase ma fajne darmowe plany dla programistów hobbystów. Jest przyjazny dla użytkownika i nie trzeba być osobą DevOps, aby pracować z Firebase.

Aby utworzyć projekt, otwórz konsolę Firebase po zalogowaniu. Jeśli nie tworzyłeś w przeszłości żadnych projektów, będzie to wyglądać jak poniżej. Kliknij przycisk Utwórz projekt .

Następnie zostaniesz poproszony o podanie nazwy projektu i czy chcesz włączyć Firebase Analytics. Wyłączyłem go, aby zachować konkretny charakter, ale możesz wypróbować go samodzielnie. Dają odbiorców w czasie rzeczywistym, odbiorców w oparciu o lokalizację, grupę wiekową odwiedzających i wiele innych statystyk. Poniżej zrzuty ekranu do tworzenia projektu firbease (od lewej do prawej)

Hosting Firebase

Hosting Firebase jest bardzo prosty. Jeśli ćwiczysz to kilka razy, wdrożenie projektów nie powinno zająć więcej niż 2 minuty! Buforują Twój projekt na dyskach SSD i rozprowadzają go na całym świecie, co pomaga użytkownikowi szybko uzyskać dostęp do Twojej witryny. Ponadto zapewniają bezpłatny certyfikat SSL, dzięki czemu Twoja witryna jest zawsze bezpieczna.

Na lewym pasku w sekcji Przegląd projektu wybierz Hosting, a następnie kliknij przycisk Rozpocznij w prawym nagłówku. Proszę zapoznać się z poniższym zrzutem ekranu.

Gorąco zachęcam do obejrzenia filmu na dole, a także skorzystania z linków, które podali wraz z nim.

Otwórz katalog główny naszego projektu React Redux w Vscode i uruchom zintegrowany terminal ( Widok> Terminal ).

1. Zainstaluj Firebase CLI przez npm , uruchamiając poniższe polecenie w zintegrowanym terminalu Vscode. (jeśli zrobiłeś to wcześniej, pomiń)

npm install -g firebase-tools

firebase login

2. Otworzy się strona „Zaloguj się na konto Google” w domyślnej przeglądarce.
3. Wybierz swoje konto Gmail połączone z Firebase. Następnie kliknij Zezwól, gdy pojawi się komunikat „Interfejs wiersza polecenia Firebase chce uzyskać dostęp do Twojego konta Google” .
4. Na koniec wyświetli się komunikat potwierdzający „Logowanie Firebase CLI powiodło się”. ( Możesz teraz zamknąć tę stronę internetową)

firebase init

• Następnie powinien poprosić Cię o skonfigurowanie projektu . Wybierz pierwszą opcję Użyj istniejącego projektu. (naciśnij klawisz Enter )
• Otrzyma listę wszystkich projektów Firebase, wybierz ten, który utworzyliśmy podczas konfigurowania projektu Firebase (ryc. 3)
• Teraz zostaniesz poproszony o podanie nazwy katalogu publicznego, wpisz build i naciśnij Enter
• WAŻNE: Następnie zapyta, czy chcemy skonfigurować nasz projekt React jako aplikację jednostronicową. TAK (wpisz Y i naciśnij Enter)
• Skonfigurować automatyczne kompilacje i wdrożenia za pomocą GitHub? Na razie niewymagane (naciśnij klawisz N i Enter). Dzięki tej inicjalizacji Firebase inicjalizacja jest zakończona!


Zauważ, że 2 pliki są dodawane do katalogu głównego projektu po wykonaniu powyższych kroków.
1. firebase.json zawiera wszystkie właściwości hostingu
2. .firebaserc zawiera identyfikator projektu.
W razie potrzeby możesz wprowadzić je do repozytorium github swojego projektu.

Dodawanie skryptu wdrażania

Możesz teraz bezpiecznie zamknąć zintegrowany terminal, a także zamknąć okno dialogowe Konfigurowanie hostingu Firebase , klikając przycisk „Przejdź do konsoli” w konsoli Firebase. (Pojawiło się, gdy kliknęliśmy Rozpocznij na ryc. 4).



Wewnątrz projektu w Vscode, otwórz package.json i dodaj skrypt wdrożenia we właściwości scripts. (nie zapomnij umieścić , na końcu skryptu wysuwania)

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "deploy": "npm run build && firebase deploy --only hosting"
},

Uruchom silniki!



Uruchom poniższe polecenie w terminalu, a Twój projekt zostanie wdrożony na platformie Hosting Firebase w ciągu 2 minut:

npm run deploy

       

        Fig 7 : Deploying Project to Firebase Hosting
       

https://<project-id>.web.app



Epilog

Delta Auth to fikcyjna nazwa w odniesieniu do tego projektu i artykułu. Służy tylko do celów demonstracyjnych. Wszelkie podobieństwo do podmiotów zewnętrznych jest czystym zbiegiem okoliczności.

Uczę się Docker & Next Js, prawdopodobnie następnym razem coś o tym napiszę. Jeśli podobał Ci się ten artykuł, zostaw kilka braw, podziel się swoimi wątpliwościami w polu komentarza poniżej i do zobaczenia następnym razem!