使用 Remix、Prisma 和 MongoDB 构建全栈应用：项目设置

目录

• 介绍
  • 您将使用的技术
  • 本系列涵盖的内容
  • 您今天将学到的内容
• 先决条件
  • 假定的知识
  • 开发环境
• 生成 Remix 应用程序
  • 看看启动器项目
• 设置 TailwindCSS
• 创建 MongoDB 实例
• 设置 Prisma
  • 初始化和配置 Prisma
  • 设置您的环境变量
  • 数据建模
  • 推送模式更改
• 总结 & 接下来是什么

介绍

本系列的目标是深入了解如何使用下面提到的技术启动、开发和部署应用程序，并希望突出显示使用这些工具提供的丰富功能集来完成这些操作是多么容易！

在本系列结束时，您将构建并部署一个名为“Kudos”的应用程序，这是一个用户可以创建帐户、登录并向网站的其他用户致敬的网站。它最终看起来像这样

我们将使用的技术

在本系列中，您将使用以下工具来构建此应用程序

• MongoDB 作为数据库
• Prisma 作为您的对象文档映射器 (ODM)
• Remix 作为 React 框架
• TailwindCSS 用于应用程序的样式设置
• AWS S3 用于存储用户上传的图像
• Vercel 用于部署应用程序

本系列涵盖的内容

您将深入研究构建此应用程序的各个方面，包括

• 数据库配置
• 数据建模
• 使用基于会话的身份验证进行身份验证
• 创建、读取、更新和删除 (CRUD) 操作，以及使用 Prisma 过滤和排序数据
• 使用 AWS S3 上传图像
• 部署到 Vercel

您今天将学到的内容

在第一篇文章中，您将学习启动 Remix 项目、使用 Mongo 的 Atlas 平台设置 MongoDB 数据库、安装 Prisma 以及开始为本系列的下一部分建模一些数据的过程。到最后，您应该有一个坚实的基础来继续构建应用程序的其余部分。

先决条件

假定的知识

虽然本系列旨在指导您完成全栈应用程序的开发，但将假定以下先前的知识

• 在 JavaScript 生态系统中工作的经验
• React 的经验，因为 Remix 是一个基于 React 构建的框架
• 对“无模式”数据库概念的基本理解，特别是 MongoDB
• 对使用 Git 的基本理解

开发环境

为了遵循提供的示例，您将被期望...

• ... 安装 Node.js。
• ... 安装 Git。
• ... 安装 TailwindCSS VSCode 扩展。（可选）
• ... 安装 Prisma VSCode 扩展。（可选）

注意：可选的扩展为 Tailwind 和 Prisma 添加了一些非常好的智能感知和语法高亮。

生成 Remix 应用程序

您需要做的第一件事是初始化一个 Remix 应用程序。Remix 是一个全栈 Web 框架，可让您轻松构建整个 React 应用程序，而无需担心应用程序的基础架构。

它可以帮助您专注于开发应用程序，而不是花费时间单独管理堆栈的多个区域并协调它们的交互。

它还提供了一组不错的工具，您将使用这些工具来帮助完成其他繁琐的任务。

要启动 Remix 项目，请在您希望项目存在的位置运行以下命令

这将为您搭建一个启动器项目，并向您询问几个问题。选择以下选项以告知 Remix 您想要一个使用 TypeScript 的空白项目，并且您打算将其部署到 Vercel。

• 您要创建哪种类型的应用程序？Just the basics （仅基础功能）
• 您想部署到哪里？如果您不确定，请选择 Remix，它很容易更改部署目标。Vercel
• TypeScript 还是 JavaScript？TypeScript
• 您希望我运行 npm install 吗？Yes （是）

看看启动器项目

项目设置完成后，继续打开它，方法是在代码编辑器中打开项目，或者如果您正在使用 VSCode 的 CLI，则在终端中该文件夹内运行命令 code .。

您将看到生成的样板项目，其文件结构如下所示

在本系列的大部分内容中，您将在 app 目录中工作，该目录将保存此应用程序的所有自定义代码。

./app/routes 中的任何文件都将转换为路由。例如，假设您的应用程序在 localhost:3000 上运行，则 ./app/routes/index.tsx 文件将生成一个位于 localhost:3000/ 的路由。如果您要在 app/routes/home.tsx 中创建另一个文件，Remix 将在您的站点中生成一个 localhost:3000/home 路由。

这是 Remix 的神奇之处之一，它使开发变得如此容易！当然，除了这个基本示例之外，还有许多更强大的功能。如果您感到好奇，请查看他们关于路由功能的 文档。

注意：您可以在此处阅读有关 Remix 路由的更多信息。您还将在本系列的后面部分使用其他路由功能，例如嵌套路由和资源路由！

如果您使用命令 npm run dev 运行此项目并访问 https://127.0.0.1:3000/，您应该会看到基本的启动器应用程序。

太棒了！您的基本项目已启动，Remix 已经搭建了许多您通常需要手动设置的部分，例如路由和构建过程。现在您将继续设置 TailwindCSS，以便您可以使应用程序看起来更漂亮！

设置 TailwindCSS

TailwindCSS 提供了一组强大的实用程序类和函数，可帮助您快速构建美观的用户界面，这些界面可以轻松自定义以满足您的自定义设计需求。您将使用 TailwindCSS 进行此应用程序中的所有样式设置。

Tailwind 有一个很棒的 指南，其中介绍了在 Remix 项目中配置它的步骤。下面将指导您完成这些步骤

首先，您需要一些依赖项才能使用 Tailwind

这将安装以下开发依赖项

• tailwindcss：命令行界面 (CLI)，允许您初始化 Tailwind 配置。
• postcss：TailwindCSS 是一个 PostCSS 插件，并依赖 PostCSS 构建。
• autoprefixer：一个 PostCSS 插件，用于自动将浏览器特定的前缀添加到您生成的 CSS 中。TailwindCSS 需要此插件。
• concurrently：这允许您与 Remix 构建过程并行运行 Tailwind 构建过程。

安装完成后，您可以在项目中初始化 Tailwind

这将生成两个文件

• tailwind.config.js：您可以在此处调整和扩展 TailwindCSS。请参阅 此处 的所有选项。
• postcss.config.js：PostCSS 是一个 CSS 转换编译器。此文件是您可以在其中添加插件的位置。

运行构建时，Tailwind 将扫描代码库以确定需要将其哪些实用程序类捆绑到其生成的输出中。您需要让 Tailwind 知道它应该查看哪些文件来确定这一点。在 tailwind.config.js 中，将以下 glob 模式添加到 content 键

这将告诉 Tailwind，app 文件夹中具有提供的扩展名的任何文件都应扫描关键字和类名，Tailwind 将识别这些关键字和类名以生成其输出文件。

接下来，在 package.json 中，更新您的 scripts 部分，以在构建应用程序和运行开发服务器时包含 Tailwind 的构建过程。添加以下脚本

您可能会注意到一些脚本指向 ./styles/app.css 处尚不存在的文件。这将是 Tailwind 的源文件，当它构建时，您将在其中导入 Tailwind 将使用的各种 函数和指令。

继续在 ./styles/app.css 创建该源文件，并使用 @tailwind 指令添加 Tailwind 的每个 层

现在，当应用程序运行或构建时，您的 scripts 也将启动运行 Tailwind 扫描和构建过程的进程。结果将输出到 app/styles/app.css 中。

您将在 Remix 应用程序中导入该文件，以便您可以在代码中使用 Tailwind！

在 app/root.tsx 中，导入生成的样式表并导出一个 links 函数，以告知 Remix 您有一个资产要导入到应用程序构建时的所有模块中

上面的代码将

1. 导入 Remix 的 links 函数的类型。
2. 导入生成的样式表。
3. 导出一个名为 links 的函数，该函数遵循 Remix 识别并用于将资产导入所有模块的约定。

注意：如果您在单个路由文件而不是 root.tsx 文件中导出了 links 函数，则它将仅加载在该路由上返回的资产。有关资产导入和约定的更多信息，请查看 Remix 的 文档。

现在进入 ./app/routes/index.tsx 文件，并将其内容替换为以下示例，以确保 Tailwind 设置正确

您应该看到一个类似于这样的屏幕

注意：如果您没有看到 Tailwind 的样式应用于您的页面，您可能需要重新启动您的开发服务器。

如果看起来不错，您已经成功配置了 TailwindCSS，可以继续下一步，设置数据库！

创建 MongoDB 实例

在此项目中，您将使用 Prisma 与 MongoDB 数据库交互。但是，在您配置 Prisma 之前，您将需要一个 MongoDB 实例来连接！

您将使用 Mongo 的 Atlas 云数据平台设置 MongoDB 集群。

注意：当然，您可以以您感觉舒适的任何方式设置 MongoDB 实例。但是，Atlas 提供了最简单快捷的体验。Prisma 的唯一要求是您的 MongoDB 部署了 副本集。

前往上面链接的 Atlas 主页。如果您还没有帐户，您需要创建一个。

您应该会进入一个包含几个选项的屏幕。对于本系列的目的，请选择 Free（免费）选项。然后点击页面右下角附近的 Create（创建）按钮

当您选择该选项时，您将被带到一个页面，您可以在其中配置将生成的集群。对于您的应用程序，您可以使用默认设置。只需单击页面右下角附近的 Create Cluster（创建集群）。

这将启动 MongoDB 集群的配置和部署！您现在只需要一个数据库用户和一种连接到数据库的方法。幸运的是，MongoDB 将在其快速入门过程中引导您完成此设置。

您将看到一些提示，帮助您进行这些配置。按照提示创建一个新用户。

然后，在 Where would you like to connect from?（您想从哪里连接？）部分中，点击 Add My Current IP Address（添加我的当前 IP 地址）以将您的开发机器的 IP 地址列入白名单，从而允许它连接到数据库。

完成这些步骤后，您的数据库应在几分钟内 （最多） 完成其配置过程，并准备好供您使用！

设置 Prisma

现在您已经有一个 MongoDB 数据库可以连接，是时候设置 Prisma 了！

初始化和配置 Prisma

您要做的第一件事是安装 Prisma CLI 作为开发依赖项。这将使您能够运行各种 Prisma 命令。

要在项目中初始化 Prisma，只需运行

这将在您的项目中创建一些不同的文件。您将看到一个 prisma 文件夹，其中包含一个 schema.prisma 文件。您将在其中定义您的模式并建模您的数据。

如果之前不存在 .env 文件，它也会自动生成一个，其中包含一个示例环境变量，该变量将保存您的数据库连接字符串。

如果您打开 ./prisma/schema.prisma，您应该会看到 Prisma 模式的默认启动器模板。

注意：此文件以 PSL（Prisma 模式语言）编写，允许您映射您的模式。有关 Prisma 模式和 PSL 的更多信息，请查看 Prisma 文档。

在 datasource 块的 url 中，您可以看到它引用了 .env 文件中的 DATABASE_URL 环境变量，使用了 PSL 提供的 env() 函数。Prisma 在后台使用 dotenv 向 Prisma 公开这些变量。

设置您的环境变量

您现在将在 环境变量 中为 Prisma 提供正确的连接字符串，以便它可以连接到数据库。

要在 Atlas 仪表板上找到您的连接字符串，请点击 Connect（连接）按钮。

这将弹出一个模态框。点击 Connect your application（连接您的应用程序）选项。

这应该会显示一些信息。您关心的是连接字符串。

在您的 .env 文件中，将默认连接字符串替换为您的 MongoDB 连接字符串。此连接字符串应遵循以下格式

在粘贴连接字符串并对其进行修改以匹配上述格式后，您应该得到一个如下所示的字符串

注意：请注意 kudos 数据库名称。您可以在此处为您的 DATABASE 放置任何您想要的名称。如果 MongoDB 数据库尚不存在，它将自动创建新数据库。

有关连接到 MongoDB 数据库的更多详细信息，请查看 文档。

数据建模

现在您可以开始考虑您的数据模型，并开始映射数据库的 集合。请注意，您不 会在本文中建模您的整个数据集。相反，您将在整个系列中迭代构建 Prisma 模式。

但是，对于本节，请创建一个 User 模型，您将在本系列的下一节中使用它来处理设置身份验证。

在 prisma/prisma.schema 中，向您的模式添加一个新的 model，名为 User。这将是您定义用户在数据库中的外观的位置。

注意：MongoDB 是一个为灵活数据构建的无模式数据库，因此为存储在其中的数据定义“模式”似乎违反直觉。但是，随着无模式数据库的增长和发展，出现了一个问题，即在考虑遗留数据形状的同时，很难跟踪哪些数据位于何处。因此，定义模式可能会在长远来看省去一些麻烦。

每个 Prisma 模型都需要有一个唯一的 id 字段。

上面的代码将创建一个 id 字段，并使用 @id 属性告知 Prisma 这是一个唯一标识符。由于 MongoDB 会为每个集合自动创建一个 _id 字段，因此您将使用 @map 属性告知 Prisma，虽然您在模式中将此字段称为 id，但它应该映射到数据库中的 _id 字段。

该代码还将定义您的 id 字段的数据类型，并将默认值设置为 auto()，这将允许您使用 MongoDB 自动生成的唯一 ID。

注意：将 Prisma 与 MongoDB 一起使用时，每个 模型 必须 具有完全像这样定义的唯一标识符字段，才能正确映射到 MongoDB 生成的 _id 字段。此字段定义中唯一可能变化的部分是您决定命名要映射到基础 _id 字段的字段。

现在您已经有了一个 id 字段，继续向 User 模型添加一些其他有用的数据。

如您在上面看到的，您将添加两个 DateTime 类型字段，它们将跟踪用户的创建时间和更新时间。@updatedAt 属性将在每次更新该用户时自动使用当前时间戳更新该字段。

它还将添加一个类型为 String 的 email 字段，该字段必须是唯一的，由 @unique 属性指示。这意味着没有其他用户可以具有相同的电子邮件。

最后，您将拥有一个密码字段，它只是一个纯字符串。

这就是您现在在 User 模型中需要的所有内容！您现在可以将此模式推送到 MongoDB，以便您可以看到它创建的集合。

推送模式更改

在更改我们的模式后，您可以运行命令

这将把您的模式更改推送到 MongoDB，创建您定义的任何新集合或索引。例如，当您现在推送模式时，您应该在输出中看到以下内容

由于 MongoDB 是无模式的，因此没有真正的迁移概念。无模式数据库的数据可以随着应用程序范围的扩大和变化而灵活地变化和发展。此命令仅创建定义的集合和索引。

总结 & 接下来是什么

在本文中，您启动并运行了 Remix 应用程序以及 MongoDB 实例。您还在您的项目中设置了 Prisma 和 TailwindCSS，并开始建模您将在本系列的下一部分中使用的数据。

在下一篇文章中，您将学习

• 在 Remix 中设置基于会话的身份验证
• 使用 Prisma 和 MongoDB 存储和修改用户数据
• 构建登录表单
• 构建注册表单