next blog firestore

下一个博客Firestore

该博客将Next.js用于SSR和Firebase Firestore API用于存储和获取数据。在使用React，MOBX状态树和样式组件构建的简单自定义内容管理系统中创建和编辑您的内容。

克隆此存储库，并将其用作创建自己的花式博客的起点。

技术堆栈：

• 反应
• next.js
• Firebase Firestore＆Auth
• 样式组件
• MOBX-State-Tree
• 蚂蚁设计
• 马克西
• eslint
• 更漂亮
• webpack
• 沙哑和绒毛阶段

你得到的：

• 帖子馈送
• 特色帖子
• 标签和类别的帖子
• 多语言支持
• 多作者支持
• 使用自定义反应组件的能力降级
• 受幽灵启发的简单方便的CMS
• CMS受Firebase Auth的保护
• SSR的快速且对SEO友好的响应
• 灯塔的好成绩

入门

步骤1。创建Firebase帐户

步骤2。设置身份验证方法

• 单击身份验证部分的设置登录方法。
• 仅启用Google身份验证提供商。
• 将您的域（如果有）添加到授权域中。

步骤3。创建Firestore数据库

• 转到数据库部分并创建Firestore实例。

Firestore仍在Beta中，但并没有使它变得不那么出色。

步骤4。数据库配置。

• 转到数据库中的规则部分，并在项目root中的.firebase-rules中粘贴配置。
• 发布新规则。

步骤5。为我们的应用程序设置Firebase Secret Keys。

• 在项目的根源上创建.env 。不要提交此文件。这是个人数据不应适合所有人。
• 转到Firebase控制台中的项目设置（单击项目概述旁边的齿轮图标）。
• 以以下格式复制此页面.env数据：

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

步骤6。设置Firebase Admin SDK密钥，用于从数据库导入/导出数据。

为了能够用初始种子初始化数据库，我们需要生成私人firebase管理员服务密钥。

• 转到项目设置>服务帐户，然后单击生成新的私钥按钮。
• 将下载的文件保存为Project root的firebase-service-key.json 。 **请勿提交此文件。默认情况下，它已添加到.gitignore 。

步骤7。使用初始数据初始化数据库。

我们几乎完成了。让我们用初始数据初始化数据库。

yarn
yarn run seed

步骤8。设置数据库索引。

我们需要在Firestore数据库中手动设置索引，以便能够向我们的Firebase提出休息请求。

• 转到数据库>索引并创建以下索引。

步骤9。在本地运行博客。

我们准备在当地启动我们的博客。

yarn dev

博客正在http：// localhost：3000上运行。

步骤10。登录管理部门。

等等..但是CMS部分是什么？

• 转到http：// localhost：3000/admin，然后单击“单击开始写作” 。
• 在弹出窗口中使用您的Google帐户登录。
• 转到firebase控制台，并添加作者权利，以说明您刚刚签名的帐户。
  • 在身份验证部分中复制用户UID 。
  • 在数据库中创建authors集合
  • 在authors集合中创建记录，其中documentId是用户的UID，并且name是config.js文件中用户的id 。

步骤11。准备出发！

• 转到http：// localhost：3000/admin
• 创建新帖子或编辑现有并发布更改。

执照

根据MIT许可，版权所有©2018-PRESENT ALEXANDER SUEVALOV

有关更多信息，请参见许可证。