next blog firestore Download - next blog firestore Código fonte download

next blog firestore

Código-Fonte de IA

1.0.0

Baixar

Próximo blog Firestore

Este blog usa o Next.js para a API SSR & Firebase Firestore para armazenar e buscar dados. Crie e edite seu conteúdo em um sistema de gerenciamento de conteúdo personalizado simples, construído com o React, a árvore do estado mobx e os componentes estilizados.

Clone este repositório e use -o como ponto de partida para criar seu próprio blog sofisticado.

Pilha de tecnologia:

Reagir
Next.js
Firebase Firestore & Auth
Componentes com estilo
Mobx-State-Tree
Projeto de formiga
Marksy
Eslint
Mais bonito
Webpack
Husky e fiagetraged

O que você recebe:

Feed de postagens
Postagens em destaque
Postagens por tags e categoria
Suporte de Multi Linguagem
Suporte de multi -autor
Markdown com capacidade de usar componentes de reação personalizados
CMs simples e convenientes inspirados em fantasmas
CMS é protegido pela Firebase Auth
Respostas rápidas e amigas de SEO com SSR
Bons resultados em Lighthouse

Começando

Etapa 1. Crie uma conta do Firebase

Etapa 2. Método de autenticação de configuração

Clique em Configurar o método de inscrição na seção de autenticação.
Ative apenas o provedor de autenticação do Google.
Adicione seu domínio (se você tiver um) aos domínios autorizados .

Etapa 3. Crie banco de dados Firestore

Vá para a seção do banco de dados e crie a instância do Firestore.

Firestore ainda está na versão beta, mas não o torna menos incrível.

Etapa 4. Configuração do banco de dados.

Vá para a seção Regras no seu banco de dados e coloque a configuração de .FireBase-Rules na raiz do projeto.
Publique novas regras.

Etapa 5. Configure as chaves secretas do Firebase para o nosso aplicativo.

Crie .env na raiz do projeto. Não comprometa este arquivo. São dados pessoais que não devem estar disponíveis para todos.
Vá para as configurações do projeto no console do Firebase (clique no ícone de engrenagem ao lado da visão geral do projeto ).
Copie dados desta página para .env no seguinte formato:

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

Etapa 6. Configure a tecla SDK do Firebase Admin para importar/exportar dados do banco de dados.

Para poder inicializar o banco de dados com a semente inicial, precisamos gerar a chave de serviço de administração de FireBase privada.

Vá para Configurações do projeto > Contas de serviço e clique em Gere um novo botão de tecla privada .
Salvar o arquivo baixado como firebase-service-key.json no Project Root. ** Não comprometa este arquivo. É adicionado ao .gitignore por padrão.

Etapa 7. Inicialize o banco de dados com dados iniciais.

Quase terminamos. Vamos inicializar nosso banco de dados com dados iniciais.

yarn
yarn run seed

Etapa 8. Configurar índices de banco de dados.

Precisamos configurar manualmente os índices em nosso banco de dados Firestore para poder fazer solicitações de descanso à nossa base de fogo.

Vá para o banco de dados > Indexos e crie o seguinte índice.

Etapa 9. Execute o blog localmente.

Estamos prontos para lançar nosso blog localmente.

yarn dev

O blog está em funcionamento em http: // localhost: 3000.

Etapa 10. Entre na parte do administrador.

Espere .. Mas o que há sobre o CMS Part?

Vá para http: // localhost: 3000/admin e clique em "Clique para começar a escrever" .
Entre na sua conta do Google na janela pop-up.
Vá para o Firebase Console e adicione os direitos dos autores para que você acabe de se inscrever.
- Copie o usuário UID na seção de autenticação .
- Crie uma coleção authors no banco de dados
- Crie um registro na coleção authors , onde documentId é UID do usuário e name é id do usuário do Usuário no config.js .