React og Firebase er alt hvad du behøver for at være vært for dine webapps

En masse moderne webudviklingshistorier har ikke gode slutninger på grund af det komplekse antal involverede teknologier og den udviklingsmetode, der er valgt for at få arbejdet gjort.

Det virkelige spørgsmål er, hvordan kan vi gøre denne rejse mindre smertefuld, eller skal jeg sige mere frugtbar og effektiv? Ideelt set skal de teknologier, vi vælger, være veletablerede og have stor samfundsstøtte.

I denne artikel vil vi se på to teknologier, der er meget veletablerede og har stærk samfundsstøtte, der gør det muligt for os at oprette live webapps mere effektivt.

Forudsætninger:

  • Du kender noget React, i det mindste det grundlæggende
  • Du har Node.js og NPM installeret
  • Du ved, hvordan du bruger kommandolinjen

Så her er hvad vi skal dække i dag:

  • Opret en simpel React-applikation med create-react-app
  • Log ind på Firebase Console, og opret et nyt projekt
  • Distribuer det til Firebase Hosting med en enkelt kommando

Da jeg oprindeligt prøvede at implementere en React- webapplikation til Firebase- hosting og ønskede at få webappenkørende, stod jeg over for et par forhindringer. Jeg regnede med, at det kan være nyttigt at samle al den forskning, jeg har udført, i en omfattende artikel for at hjælpe samfundet. Så lad os komme i gang.

På et højt niveau er denne artikel opdelt i tre dele:

  1. Få en meget grundlæggende React- app på plads
  2. Opret en Firebase- konto
  3. Forbind vores Firebase- konsol til vores React- app

Del 1 - Opret React-appen

Du ved sandsynligvis, at myapp til create-react-apper den bedste måde at oprette en grundlæggende kedelplade til en React-app på. Det skaber ikke kun en meget grundlæggende kedelplade, men tilføjer også de nødvendige afhængigheder, der er nødvendige for, at React kan køre.

Hvis du ikke er klar over den ægte magi og den kraft, som denne ene linjekommando indeholder, kan du prøve at oprette en mappe til React fra bunden. Først da vil du indse den sande smerte, der er involveret. Et stort råb til de udviklere, der fik denne kommando oprettet i første omgang.

For at komme i gang skal vi installere create-react-app på vores maskine.

$ npm install -g create-react-app

Flagget -g i kommandoen ovenfor installerer NPM-pakken globalt på maskinen.

Når dette er gjort, bruger vi denne pakke til at give os en grundlæggende kedelplade til React.

$ create-react-app myapp

Dette opretter en mappe, der hedder myapp . Nu skal vi navigere ind i biblioteket og køre kommandoen nedenfor.

$ cd myapp$ npm start

Når du har kørt kommandoen ovenfor, skal en lokal dev-server starte og gengive den oprindelige React-app på lokationen localhost: 3000

Jeg håber, det var hurtigt og nemt. Vi har et sidste trin, vi skal gennemføre, men lad os først se på Firebase . Vi kommer tilbage til det sidste trin med React efter det.

Del 2 - Firebase-opsætning

Lad os først forstå, hvad Firebase er, før vi dykker ned i opsætningen.

Firebase er en mobil- og webapp-udviklingsplatform, der giver udviklere en overflod af værktøjer og tjenester, der hjælper dem med at udvikle apps af høj kvalitet, øge deres brugerbase og tjene mere overskud.

Lad os se på Firebases historie, inden vi konfigurerer den.

En kort historie

Tilbage i 2011, før det blev kendt som Firebase, var det en opstart kaldet Envolve. Inddrag som et produkt forsynet udviklere med en API, der muliggjorde integrationen af ​​online chatfunktionalitet på deres hjemmeside.

Virksomheden bemærkede, at udviklere brugte Envolve til at synkronisere applikationsdata, såsom spiltilstand i realtid, på tværs af deres brugere og ikke kun chatbeskeder.

Dette førte grundlæggerne af Envolve, James Tamplin og Andrew Lee, til at adskille chatsystemet og realtidsarkitekturen. I april 2012 blev Firebase oprettet som et separat firma, der leverede Backend-as-a-Service med realtidsfunktionalitet.

Efter at det blev erhvervet af Google i 2014, udviklede Firebase sig hurtigt til den multifunktionelle behemoth af en mobil- og webplatform, som den er i dag.

Dette enkelt billede beskriver Firebase i al sin magt.

Firebase-login

Så lad os begynde med dette: gå til //firebase.google.com/ og log ind med din Google-konto. Når du er logget ind, skal du klikke på Gå til konsol . Du får en mulighed for at oprette et nyt projekt .

Når projektet er oprettet, har du muligheden for at tilføje Firebase til enhver Android- eller iOS-mobilapp og endda en webapp.

Del 3 - Firebase & React

Klik på muligheden for at tilføje Firebase til din webapp . Du får en dialogboks med et kodestykke.

Tilføj dette kodestykke helt nederst i din index.html- fil i dit projekt. Sørg for, at dette kodestykke tilføjes før et af de andre script-tags i din index.html- fil.

Hvis du ser nøje på billedet ovenfor, kan du se, at der er nogle links i bunden. Klik på det første link, og tjek Kom godt i gang med Firebase til webapps . Du får vist skærmen nedenfor.

Klik på Kom i gang.

Gå til din rodmappe, og indtast kommandoen ovenfor i din terminal. Dette downloader Firebase-værktøjerne på din maskine lokalt.

Det næste og sidste trin er at initialisere Firebase og distribuere kildekoden i din mappe til Firebase.

Når du først er færdig, og du har fulgt alle ovenstående trin og indtastet dem i din terminal, skal du have en liste over sidste implementeringsposter vist på websiden.

Genbesøg React, som lovet

Husk i React-delen ovenfor sagde jeg, at vi ville komme tilbage til at gøre en sidste ting? Det gør vi nu.

Naviger til det bibliotek, hvor din app oprettes.

Den måde, hvorpå React fungerer, er, at det lader dig oprette en build-version. Dette er en meget minificeret version af hele det mammutiske kodebibliotek, det opretter, hvis du har en ret tæt applikation.

For at få denne formindskede og komprimerede version kan vi bruge vores terminal og en meget nyttig kommando:

$ npm run build

Dette opretter en ny mappe i dit appkatalog med navnet build . Denne mappe indeholder et par filer, der er de mest vigtige dele af hele din React-applikation.

Konklusion

Hvis du har fulgt alle trin omhyggeligt og har læst en smule af den officielle dokumentation, skal alt dette være en kagevandring.

Personligt føler jeg, at Firebase allerede har revolutioneret den måde, udviklere tester og bruger hosting på som en tjeneste . Dette er en meget enklere og mere afslappet måde at hoste dine apps effektivt på uden at gå ned i detaljerne i hosting.