Sådan gør du: Vue SSR med Nuxt.js på Firebase

VueConf-sessionerne fra dette års konference frigives, når redigering afsluttes. I går blev udgivelsen af ​​Sebastien Chopins tale om Vue & SSR frigivet. Her er et link, det er en god snak. En af de dejlige ting ved Nuxt.js er, at det giver dig mulighed for at udnytte den samme kode til gengivelse af klient og server. SSR er vigtig for apps, der vender offentligt, især når SEO er involveret.

Jeg har også fået en smule ind i Firebase. Det er en fantastisk platform til opbygning af alle slags applikationer, især hvis du vil gå serverløst. Jeg lavede nogle graver efter eksempler på, hvordan man opsætter Nuxt.js på Firebase, og der var et par ting derude, men intet, som jeg bare kunne klone og gå med. Googles David East har en video, der går igennem processen med at komme i gang, men jeg havde lidt problemer med at følge den. Der er også dette emne på NUXT GitHub-emnes tracker, der var nyttigt, men ikke havde en eksempelløsning.

Så jeg lavede en! Mit prøveprojekt er en pseudosøgemaskine, der demonstrerer, hvordan du kan komme i gang med Nuxt.js på Firebase i dag. Det udnytter tre funktioner i Firebase: Hosting, funktioner og opbevaring. Og det illustrerer også, hvordan man bruger asyncData-funktionen, der er beskrevet i Sebastiens tale.

Hvis du ikke har arbejdet med Nuxt.js eller Firebase før, er dette en nem måde at komme i gang med begge. Her er de høje niveau, du skal tage:

  • Opret en Firebase-konto, og opret et projekt
  • Indstil dit miljø
  • Klon projektet og initialiser Firebase
  • Kør lokalt
  • Udgiv & Voilà

Få en Firebase-konto, og opret et projekt

Du kan gøre dette på https://firebase.google.com. Når du er logget ind med din Google-konto, skal du trykke på giganten Tilføj projekt-knappen og starte et nyt projekt. Giv det et navn, og tryk på knappen Opret projekt. Når du er på projektdashboardet, skal du klikke på Lagring fra venstre nav, og derefter klikke på Kom godt i gang. Dette gør det muligt at gemme lagring for dig og give dig et sted at uploade filer. Når vi har klonet projektet, slipper vi en result.json-fil her, så den er tilgængelig til forespørgsel. Dette fører til skærmbilledet med søgeresultater. Nu er du klar til at gå over til din terminal.

Miljøopsætning

Først vil du være sikker på, at du kører Node 8.x eller nyere. Firebase understøtter kun knudepunkt 6 lige nu (es5), men det er ok. Dette projekt bruger webpack / babel til at transportere for dig, så du kan ignorere de advarsler, du måtte se om dette i din konsol. Du vil også være sikker på, at du har Firebase CLI-værktøjer installeret:

$ npm installer -g firebase-værktøjer

Klon og Init Firebase

Nu kan du klone projektrepoen. Når du har gjort det, skal du koble koden til dit Firebase-projekt. Gør det med følgende:

$ git klon [email protected]: groksrc / groksrc-search.git
$ firebase init

Dette vil lede dig gennem en række spørgsmål, og til sidst oprettes en .firebaserc-fil til dig. Sådan ved Firebase CLI, hvor din backend er.

Forsigtig: Når du kører init-kommandoen, vil den overskrive firebase.json-filen. Sørg for at kassere denne ændring og bare beholde .firebaserc-filen.

Når du går gennem firebase-init-kommandoindstillingerne, skal du vælge følgende:

Trin 1:

  • Vælg kun Hosting-indstillingen. Du kan springe de andre over, fordi dette konfigurerer firebase.json-filen, og vi har allerede en i projektet.

Trin 2:

  • Vælg det projekt, du oprettede ovenfor fra listen over valg. Hvis du ikke kan se det, skal du sørge for, at du er logget ind på den rigtige konto. Dette gemmes i .firebaserc-filen.

Trin 3:

  • Indtast dist til det offentlige bibliotek. Dette forhindrer, at der oprettes uønskede filer.

Resterende trin:

  • Vælg standardindstillingerne

Sørg nu for at nulstille filen firebase.json. Når det er fuldført, skal du også være sikker på og installere npm-afhængigheder:

$ garn installation # eller npm installation

Kører lokalt

Nu skal du være i stand til at starte projektet lokalt. Brug følgende kommando for at sikre dig, at alt kører:

$ garn dev

Det skal starte, og du skal være i stand til at gennemse http: // localhost: 3000. Hvis alt fungerer som forventet, ser du en søgeside, der ligner Googles startside. Når det er op, kan du begynde at foretage ændringer, bør Hot Module Reload også fungere.

Bemærk på dette tidspunkt kører vi lige med nuxt via node.js. Firebase er ikke kommet i spil endnu. Hvis vi vil teste vores Firebase-funktioner lokalt, er vi nødt til at transponere projektet. Så kan vi køre det:

$ garn pakke-funktioner
$ firebase serve - kun hosting, funktioner

Dette vil starte appen via en Firebase-proces, svarende til hvad den ville gøre, når du offentliggør. Bemærk, at HMR ikke er tilgængelig, mens du kører via Firebase CLI.

Forlagsvirksomhed

For at skubbe til dit projekt og se det live kan du køre følgende:

$ garn push

Dette script kompilerer Google Functions-koden i et / funktions-bibliotek og offentliggør den for dig. Koden i dette bibliotek er, hvad Funktioner vil bruge til at udføre serversides gengivelse.

Når push-kommandoen er afsluttet, er projektet ope, og du kan teste det på din live-URL, der vises i konsollen. Bemærk: Da jeg testede disse trin, lagde jeg mærke til, at push-kommandoen ville fejle lejlighedsvis af en eller anden uspecificeret grund. Bare det at køre kommandoen igen så ud til at tage sig af problemet.

Resumé

Eksempelappen er indstillet til at trække resultaterne.json fra det originale Firebase-projekt, jeg oprettede til demoen. For at gøre dine egne resultater bare pop åbne filen i rodkataloget, juster og gem, og upload den derefter til Storage-projektet i din app. Når du har gjort det, skal du klikke på den uploadede fil for at udvide detaljerne og udvide sektionen Filplacering. Kopier download-URL fra dette afsnit. Find derefter result.vue i kildekoden, og opdater URL'en i asyncData-metoden for at pege på din fil. Gem nu, og garn offentliggør igen.

Det er det! På dette tidspunkt er du i gang med Nuxt.js og Firebase. Jeg håber, du er i stand til at tilbringe et par minutter med disse to fantastiske teknologier, det er bestemt en glat måde at oprette en app på, og jeg har virkelig nydt at blive bekendt med dem. Indtil næste gang!

g