Πώς να: Vue SSR με Nuxt.js στην Firebase

Οι συνεδρίες του VueConf από τη διάσκεψη του τρέχοντος έτους κυκλοφορούν καθώς η επεξεργασία τελειώνει πάνω τους. Χθες είδε την απελευθέρωση της ομιλίας του Sebastien Chopin στο Vue & SSR. Εδώ είναι ένας σύνδεσμος, είναι μια καλή συζήτηση. Ένα από τα ωραία πράγματα για το Nuxt.js είναι ότι σας επιτρέπει να αξιοποιήσετε τον ίδιο κώδικα για προβολές πελάτη και διακομιστή. Η SSR είναι σημαντική για εφαρμογές που αντιμετωπίζουν το κοινό, ειδικά όταν πρόκειται για SEO.

Έχω επίσης να πάρει στο Firebase λίγο. Είναι μια μεγάλη πλατφόρμα για την κατασκευή όλων των ειδών εφαρμογών, ειδικά αν θέλετε να πάτε χωρίς διακομιστές. Κάναμε κάποια σκάψιμο για παραδείγματα για το πώς να ρυθμίσετε το Nuxt.js στο Firebase και υπήρχαν μερικά πράγματα εκεί έξω, αλλά τίποτα που απλά θα μπορούσα να κλωνοποιήσω και να προχωρήσω. Ο David East της Google διαθέτει ένα βίντεο που περνάει από τη διαδικασία της έναρξης, αλλά το έκανα λίγο πρόβλημα να το ακολουθήσω. Υπάρχει επίσης αυτό το ζήτημα στο εργαλείο παρακολούθησης προβλημάτων NUXT GitHub που ήταν χρήσιμο, αλλά δεν είχε λύση παράδειγμα.

Έτσι έκανα ένα! Το δείγμα του έργου μου είναι μια μηχανή ψευδο-αναζήτησης που δείχνει πώς μπορείτε να ξεκινήσετε με το Nuxt.js στο Firebase σήμερα. Αξιοποιεί τα τρία χαρακτηριστικά της Firebase: Φιλοξενία, Λειτουργίες και Αποθήκευση. Και δείχνει επίσης πώς να χρησιμοποιήσετε τη λειτουργία asyncData που περιγράφεται στην ομιλία του Sebastien.

Αν δεν έχετε δουλέψει με το Nuxt.js ή το Firebase πριν από αυτό είναι ένας εύκολος τρόπος να ξεκινήσετε και με τους δύο. Ακολουθούν τα βήματα υψηλού επιπέδου που πρέπει να λάβετε:

  • Δημιουργήστε ένα λογαριασμό Firebase και δημιουργήστε ένα έργο
  • Ρυθμίστε το περιβάλλον σας
  • Κλωνοποιήστε το έργο και αρχικοποιήστε το Firebase
  • Εκτελέστε τοπικά
  • Δημοσίευση & Voila

Αποκτήστε έναν λογαριασμό Firebase και δημιουργήστε ένα έργο

Μπορείτε να το κάνετε αυτό στη διεύθυνση https://firebase.google.com. Αφού συνδεθείτε με το λογαριασμό σας στο Google, πατήστε το κουμπί "Προσθήκη έργου" και ξεκινήστε ένα νέο έργο. Δώστε το όνομα και πατήστε το κουμπί Δημιουργία Έργου. Αφού βρεθείτε στον πίνακα ελέγχου του έργου, κάντε κλικ στην επιλογή Αποθήκευση από το αριστερό παράθυρο και, στη συνέχεια, κάντε κλικ στην επιλογή Ξεκινώντας. Αυτό θα επιτρέψει την αποθήκευση για σας και θα σας δώσει ένα μέρος για να ανεβάσετε αρχεία. Αφού κλωνοποιήσουμε το έργο, θα αφήσουμε εδώ ένα αρχείο results.json έτσι ώστε να είναι διαθέσιμο για αναζήτηση. Αυτό θα οδηγήσει την οθόνη αποτελεσμάτων αναζήτησης. Τώρα είστε έτοιμοι να κατευθυνθείτε στο τερματικό σας.

Ρύθμιση περιβάλλοντος

Πρώτα θα θελήσετε να είστε βέβαιοι ότι τρέχετε τον κόμβο 8.x ή νεότερο. Το Firebase υποστηρίζει μόνο τον Κόμβο 6 αυτή τη στιγμή (es5), αλλά αυτό είναι εντάξει. Αυτό το έργο χρησιμοποιεί webpack / babel για να μεταφερθεί για εσάς, έτσι μπορείτε να αγνοήσετε τις προειδοποιήσεις που μπορείτε να δείτε σχετικά με αυτό στην κονσόλα σας. Θα θέλατε επίσης να είστε βέβαιοι ότι έχετε εγκαταστήσει τα εργαλεία του Firebase CLI:

$ npm install -g firebase-tools

Clone και Init Firebase

Τώρα μπορείτε να κλωνοποιήσετε το repo έργου. Αφού το κάνετε αυτό, πρέπει να συνδέσετε τον κώδικα στο έργο Firebase. Κάνετε αυτό με τα ακόλουθα:

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

Αυτό θα σας οδηγήσει σε μια σειρά ερωτήσεων και στο τέλος θα δημιουργηθεί ένα αρχείο .firebaserc για εσάς. Έτσι ο Firebase CLI ξέρει πού είναι η backend σας.

Προσοχή: όταν εκτελείτε την εντολή init, θα αντικαταστήσετε το αρχείο firebase.json. Βεβαιωθείτε ότι έχετε απορρίψει αυτήν την αλλαγή και ότι διατηρείτε μόνο το αρχείο .firebaserc.

Καθώς περπατάτε μέσα από τις επιλογές εντολών init firebase επιλέξτε τα εξής:

Βήμα 1:

  • Επιλέξτε μόνο την επιλογή Hosting. Μπορείτε να παραλείψετε τα υπόλοιπα επειδή αυτό ρυθμίζει το αρχείο firebase.json και έχουμε ήδη ένα στο έργο.

Βήμα 2:

  • Επιλέξτε το έργο που δημιουργήσατε παραπάνω από τη λίστα των επιλογών. Εάν δεν το βλέπετε, βεβαιωθείτε ότι είστε συνδεδεμένοι στο σωστό λογαριασμό. Αυτό θα αποθηκευτεί στο αρχείο .firebaserc.

Βήμα 3:

  • Εισαγάγετε dist για τον δημόσιο κατάλογο. Αυτό θα αποτρέψει τη δημιουργία αρχείων ανεπιθύμητης αλληλογραφίας.

Εναλλακτικά βήματα:

  • Επιλέξτε τις προεπιλογές

Τώρα βεβαιωθείτε ότι έχετε επαναφέρει το αρχείο firebase.json. Μόλις ολοκληρωθεί θα πρέπει να είστε βέβαιοι και να εγκαταστήσετε τις εξαρτήσεις npm:

$ εγκατάσταση νήματος # ή npm εγκατάσταση

Λειτουργία τοπικά

Τώρα θα πρέπει να είστε σε θέση να ξεκινήσετε το έργο τοπικά. Χρησιμοποιήστε την ακόλουθη εντολή για να βεβαιωθείτε ότι όλα λειτουργούν:

$ νήμα dev

Θα πρέπει να ξεκινήσει και θα πρέπει να μπορείτε να περιηγηθείτε στο http: // localhost: 3000. Εάν όλα λειτουργούν όπως αναμένεται, θα δείτε μια σελίδα αναζήτησης που μοιάζει με την αρχική σελίδα της Google. Μόλις ξεκινήσετε να κάνετε αλλαγές, το Hot Module Reload θα πρέπει να λειτουργήσει πάρα πολύ.

Σημειώστε ότι σε αυτό το σημείο τρέχουμε απλά με nuxt μέσω node.js. Η Firebase δεν έχει έρθει ακόμα σε παιχνίδι. Αν θέλουμε να δοκιμάσουμε τοπικά τις λειτουργίες Firebase, πρέπει να μεταφέρουμε το έργο. Τότε μπορούμε να το τρέξουμε:

$ πακέτο-λειτουργίες συσκευασίας
$ firebase εξυπηρετούν - μόνο φιλοξενία, λειτουργίες

Αυτό θα ξεκινήσει την εφαρμογή μέσω μιας διαδικασίας Firebase, παρόμοια με όσα θα κάνατε μόλις δημοσιεύσετε. Σημειώστε ότι το HMR δεν είναι διαθέσιμο ενώ εκτελείται μέσω του Firebase CLI.

Εκδόσεις

Για να σπρώξετε το έργο σας και να το δείτε ζωντανά, μπορείτε να εκτελέσετε τα εξής:

$ push νήμα

Αυτό το σενάριο θα μεταγλωττίσει τον κώδικα Google Functions σε έναν κατάλογο λειτουργιών και θα το δημοσιεύσει για εσάς. Ο κώδικας σε αυτόν τον κατάλογο είναι αυτό που οι λειτουργίες θα χρησιμοποιήσουν για την εκτέλεση της απόδοσης πλευράς διακομιστή.

Μόλις ολοκληρωθεί η εντολή ώθησης, το έργο θα εμφανιστεί και μπορείτε να το δοκιμάσετε στην ζωντανή διεύθυνση URL που εμφανίζεται στην κονσόλα. Σημείωση: κατά τη δοκιμή αυτών των βημάτων, παρατήρησα ότι η εντολή ώθησης θα αποτύγχανε μερικές φορές για κάποιο απροσδιόριστο λόγο. Απλά η εκτέλεση της εντολής φάνηκε να φροντίζει το πρόβλημα.

Περίληψη

Η εφαρμογή δείγματος έχει οριστεί για να τραβήξει το results.json από το αρχικό πρόγραμμα Firebase που έχω δημιουργήσει για το demo. Για να φτιάξετε τα δικά σας αποτελέσματα, απλώς ανοίξτε το αρχείο στον ριζικό κατάλογο, τροποποιήστε και αποθηκεύστε και, στη συνέχεια, μεταφορτώστε το στο έργο Αποθήκευσης στην εφαρμογή σας. Μόλις το κάνετε, κάντε κλικ στο αρχείο που ανεβάσατε για να αναπτύξετε τις λεπτομέρειες και να αναπτύξετε την ενότητα Τοποθεσία αρχείου. Αντιγράψτε τη διεύθυνση URL λήψης από αυτήν την ενότητα. Στη συνέχεια, στον πηγαίο κώδικα εντοπίστε results.vue και ενημερώστε τη διεύθυνση URL στη μέθοδο asyncData για να δείξετε στο αρχείο σας. Τώρα αποθηκεύστε και το νήμα δημοσιεύστε ξανά.

Αυτό είναι! Σε αυτό το σημείο βρίσκεστε εκτός λειτουργίας με το Nuxt.js και το Firebase. Ελπίζω να είστε σε θέση να περάσετε μερικά λεπτά με αυτές τις δύο φοβερές τεχνολογίες, είναι σίγουρα ένας ομαλός τρόπος για να χτίσετε μια εφαρμογή και μου άρεσε πραγματικά να εξοικειωθώ με αυτά. Μέχρι την επόμενη φορά!

σολ