next blog firestore Download - next blog firestore Code Source Download

next blog firestore

Code Source AI

1.0.0

Télécharger

Next blog Firestore

Ce blog utilise Next.js pour l'API SSR et Firebase Firestore pour stocker et récupérer des données. Créez et modifiez votre contenu dans un système de gestion de contenu personnalisé simple construit avec React, Mobx State Tree et Styled Components.

Clone ce repo et utilisez-le comme point de départ pour créer votre propre blog de fantaisie.

Pile technologique:

Réagir
Next.js
Firebase Firestore & Auth
Composants coiffés
Mobx-State-Tree
Conception de fourmi
Marksy
Eslint
Plus joli
Webpack
Husky & Lint

Ce que vous obtenez:

Les messages se nourrissent
Articles en vedette
Articles par tags et catégorie
Support multi-langues
Prise en charge de plusieurs auteurs
Markdown avec la capacité d'utiliser des composants de réaction personnalisés
CMS simple et pratique inspiré par Ghost
CMS est protégé par l'authentique Firebase
Réponses rapides et conviviales avec SSR
De bons résultats dans le phare

Commencer

Étape 1. Créez un compte Firebase

Étape 2. Configuration de la méthode d'authentification

Cliquez sur Configurer la méthode d'inscription sur la section Authentification.
Activer le fournisseur d'authentification Google.
Ajoutez votre domaine (si vous en avez un) aux domaines autorisés .

Étape 3. Créez une base de données Firestore

Accédez à la section de la base de données et créez une instance Firestore.

Firestore est toujours en version bêta, mais cela ne le rend pas moins génial.

Étape 4. Configuration de la base de données.

Allez dans la section Rules dans votre base de données et collez la configuration à partir de .FireBase-Rules dans Project Root.
Publier de nouvelles règles.

Étape 5. Configurez les clés secrètes de Firebase pour notre application.

Créer .env à l'origine du projet. Ne commettez pas ce fichier. Ce sont des données personnelles qui ne devraient pas être disponibles pour tout le monde.
Accédez aux paramètres du projet dans la console Firebase (cliquez sur l'icône du matériel à côté de l'aperçu du projet ).
Copiez les données de cette page à .env dans le format suivant:

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

Étape 6. Configurer la touche SDK Admin Firebase pour l'importation / exportation des données de la base de données.

Afin de pouvoir initialiser la base de données avec les graines initiales, nous devons générer une clé de service d'administration de base de feu privé.

Accédez à Paramètres du projet > Comptes de service et cliquez sur Générer un nouveau bouton de clé privée .
Enregistrez le fichier téléchargé en tant que firebase-service-key.json sur Project Root. ** Ne commettez pas ce fichier. Il est ajouté à .gitignore par défaut.

Étape 7. Initialisez la base de données avec les données initiales.

Nous avons presque fini. Initialisons notre base de données avec les données initiales.

yarn
yarn run seed

Étape 8. Configuration des index de base de données.

Nous avons besoin de configurer manuellement les index dans notre base de données Firestore pour pouvoir faire des demandes de repos à notre base de feu.

Accédez à la base de données > Index et créez l'index suivant.

Étape 9. Exécutez le blog localement.

Nous sommes prêts à lancer notre blog localement.

yarn dev

Le blog est opérationnel sur http: // localhost: 3000.

Étape 10. Connectez-vous à la partie admin.

Attendez .. mais qu'en est-il de la partie CMS?

Allez sur http: // localhost: 3000 / admin et cliquez sur "Cliquez pour commencer à écrire" .
Connectez-vous avec votre compte Google dans la fenêtre contextuelle.
Accédez à Firebase Console et ajoutez les droits des auteurs sur le compte avec lequel vous venez de signer.
- Copiez l'utilisateur UID dans la section d'authentification .
- Créer la collection authors dans la base de données
- Créez un enregistrement dans la collection authors , où documentId est UID de l'utilisateur et name est id de l'utilisateur dans le fichier config.js .