next blog firestore Descargar - next blog firestore Código fuente de descarga

next blog firestore

Código Fuente de IA

1.0.0

Descargar

Siguiente blog Firestore

Este blog usa Next.js para la API SSR y Firebase Firestore para almacenar y obtener datos. Cree y edite su contenido en un sistema de gestión de contenido personalizado simple construido con React, Mobx State Tree y componentes de estilo.

Clone este repositorio y úselo como punto de partida para crear su propio blog elegante.

Pila de tecnología:

Reaccionar
Next.js
Firebase Firestore y Auth
Componentes con estilo
Árbol de estado mobx
Diseño de hormigas
Marcado
Eslint
Más bonito
Pájaro web
Husky y pelusa

Lo que obtienes:

Posts Feed
Publicaciones destacadas
Publicaciones por etiquetas y categoría
Soporte de lenguaje múltiple
Soporte de autores múltiples
Markdown con la capacidad de usar componentes React personalizados
CMS simple y conveniente inspirado en Ghost
CMS está protegido por Firebase Auth
Respuestas rápidas y amigables con SEO con SSR
Buenos resultados en el faro

Empezando

Paso 1. Crear cuenta de Firebase

Paso 2. Configuración del método de autenticación

Haga clic en Configurar el método de inicio de sesión en la sección de autenticación.
Habilite solo el proveedor de autenticación de Google.
Agregue su dominio (si tiene uno) a los dominios autorizados .

Paso 3. Crear base de datos Firestore

Vaya a la sección de la base de datos y cree una instancia de Firestore.

Firestore todavía está en beta, pero no lo hace menos increíble.

Paso 4. Configuración de la base de datos.

Vaya a la sección Reglas en su base de datos y pegue la configuración de .FireBase-Rules en Project Root.
Publicar nuevas reglas.

Paso 5. Configure las claves secretas de Firebase para nuestra aplicación.

Crear .env en la raíz del proyecto. No cometa este archivo. Son datos personales que no deberían estar disponibles para todos.
Vaya a la configuración del proyecto en la consola Firebase (haga clic en el icono de engranajes junto a la descripción general del proyecto ).
Copiar datos de esta página a .env en el siguiente formato:

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

Paso 6. Configure la tecla SDK de administrador de Firebase para importar/exportar datos de la base de datos.

Para poder inicializar la base de datos con la semilla inicial, necesitamos generar la clave de servicio de administración de Firebase privado.

Vaya a Configuración del proyecto > Cuentas de servicio y haga clic en Generar un nuevo botón de clave privada .
Guarde el archivo descargado como firebase-service-key.json en Project Root. ** No confirme este archivo. Se agrega a .gitignore por defecto.

Paso 7. Inicializar la base de datos con los datos iniciales.

Casi terminamos. Inicialicemos nuestra base de datos con datos iniciales.

yarn
yarn run seed

Paso 8. Configuración de índices de base de datos.

Necesitamos índices de configuración manualmente en nuestra base de datos Firestore para poder hacer solicitudes de descanso a nuestra Firebase.

Vaya a la base de datos > índices y cree el siguiente índice.

Paso 9. Ejecute el blog localmente.

Estamos listos para lanzar nuestro blog localmente.

yarn dev

El blog está en funcionamiento en http: // localhost: 3000.

Paso 10. Inicie sesión en la parte administradora.

Espera ... pero ¿qué pasa con la parte CMS?

Vaya a http: // localhost: 3000/admin y haga clic en "Haga clic para comenzar a escribir" .
Inicie sesión con su cuenta de Google en la ventana emergente.
Vaya a la consola de Firebase y agregue los derechos del autor a la cuenta con la que acaba de firmar.
- Copie el usuario UID en la sección de autenticación .
- Crear colección authors en la base de datos
- Cree un registro en la colección authors , donde documentId es UID del usuario y name es id del usuario en el archivo config.js .