next blog firestore Download - next blog firestore Source Code Download

next blog firestore

AI-Quellcode

1.0.0

Herunterladen

Nächster Blog Firestore

In diesem Blog wird Next.js für die SSR & Firebase Firestore -API zum Speichern und Abholen von Daten verwendet. Erstellen und bearbeiten Sie Ihre Inhalte im einfachen benutzerdefinierten Content -Management -System, das mit React, MOBX State Tree und gestalteten Komponenten erstellt wurde.

Klonen Sie dieses Repo und verwenden Sie ihn als Ausgangspunkt, um Ihr eigenes schickes Blog zu erstellen.

Technologiestapel:

Reagieren
Weiter.js
Firebase Firestore & Auth
Stilkomponenten
MOBX-State-Tree
Ameisendesign
Marky
Eslint
Hübscher
Webpack
Husky & Lint

Was du bekommst:

Beiträge Feed
Ausgewählte Beiträge
Beiträge von Tags und Kategorie
Mehrsprachenunterstützung
Multi -Autor -Unterstützung
Markieren Sie mit der Möglichkeit, benutzerdefinierte React -Komponenten zu verwenden
Einfaches und bequemes CMS inspiriert von Ghost
CMS wird durch Firebase Auth geschützt
Schnelle und SEO-freundliche Antworten mit SSR
Gute Ergebnisse im Leuchtturm

Erste Schritte

Schritt 1. Erstellen Sie Firebase -Konto

Schritt 2. Setup -Authentifizierungsmethode

Klicken Sie im Abschnitt Authentifizierung einrichten .
Aktivieren Sie nur Google Authentication Provider.
Fügen Sie Ihre Domain (wenn Sie eine haben) zu autorisierten Domänen hinzu.

Schritt 3. Erstellen Sie die Firestore -Datenbank

Gehen Sie zum Abschnitt "Datenbank" und erstellen Sie Firestore -Instanz.

Firestore ist immer noch in der Beta, aber es macht es nicht weniger großartig.

Schritt 4. Datenbankkonfiguration.

Gehen Sie in Ihre Datenbank und fügen Sie in Ihre Datenbank und fügen Sie die Konfiguration von .firebase-Rules in Project Root ein.
Neue Regeln veröffentlichen.

Schritt 5. Richten Sie Firebase Secret Keys für unsere App ein.

Erstellen Sie .env am Wurzel des Projekts. Begehen Sie diese Datei nicht. Es sind personenbezogene Daten, die nicht für alle verfügbar sein sollten.
Gehen Sie zu Projekteinstellungen in Firebase Console (klicken Sie auf das Zahnradsymbol neben der Projektübersicht ).
Kopieren Sie Daten von dieser Seite nach .env im folgenden Format:

F_PROJECT_ID= < your Project ID >
F_AUTH_DOMAIN= < your Project ID > .firebaseapp.com
F_API_KEY= < your Web API Key >

Schritt 6. Richten Sie den Firebase Admin SDK -Schlüssel zum Import/Exportieren von Daten aus der Datenbank ein.

Um die Datenbank mit anfänglichem Saatgut initialisieren zu können, müssen wir einen privaten Firebase Admin -Serviceschlüssel generieren.

Gehen Sie zu Projekteinstellungen > Servicekonten und klicken Sie auf die Schaltfläche "Neue private Taste generieren" .
Speichern Sie die heruntergeladene Datei als firebase-service-key.json bei Project Root. ** Begehen Sie diese Datei nicht. Es wird standardmäßig zu .gitignore hinzugefügt.

Schritt 7. Initialisieren Sie die Datenbank mit anfänglichen Daten.

Wir sind fast fertig. Lassen Sie uns unsere Datenbank mit anfänglichen Daten initialisieren.

yarn
yarn run seed

Schritt 8. Setup -Datenbankindizes einrichten.

Wir benötigen manuelle Indexes in unserer Firestore -Datenbank, um REST -Anfragen an unsere Firebase zu stellen.

Gehen Sie zu Datenbank > Indizes und erstellen Sie den folgenden Index.

Schritt 9. Blog lokal ausführen.

Wir sind bereit, unseren Blog vor Ort zu starten.

yarn dev

Der Blog ist in Betrieb auf http: // localhost: 3000.

Schritt 10. Melden Sie sich zum Administrator an.

Warten Sie .. Aber was ist mit CMS -Teil?

Gehen Sie zu http: // localhost: 3000/admin und klicken Sie auf "Klicken Sie, um zu schreiben" .
Melden Sie sich mit Ihrem Google-Konto im Popup-Fenster an.
Gehen Sie zur Firebase -Konsole und fügen Sie die Rechte der Autoren hinzu, in denen Sie gerade unterschrieben sind.
- Kopieren Sie die Benutzer UID in der Authentifizierung .
- Erstellen Sie die authors in der Datenbank
- Erstellen Sie einen Datensatz in der authors Collection, wobei documentId UID des Benutzer und name des id in config.js -Datei ist.