你在生产中是否正确使用 Node？让我们看看人们在生产环境中运行Node的一些常见错误（直接来自我自己的项目——如codedamn），以及如何减少这些错误。

当你部署Node应用程序时，你可以把它作为你在生产环境中的检查清单。由于这是一篇关于生产环境准备的文章，当你在本地系统上开发应用程序时，其中很多内容并不适用。

以cluster（集群）模式运行/separate node进程

记住，Node是单线程（single threaded）的。它可以将很多事情（如HTTP请求和文件系统的读写）委托给操作系统，由它在多线程（multithreaded）环境下处理。但是，你写的代码，即业务逻辑，仍然是在单线程中运行。

通过在单线程中运行，你的Node进程总是被限制在你的CPU上一个核心。因此，如果你的服务器有多个CPU核，那么你在服务器上只运行一个Node进程就是在浪费计算能力。

running Node just once是什么意思？你看，操作系统有一个内置的调度器，它负责程序进程如何在机器的CPU上分配。当你在一台双核机器上只运行2个进程时，操作系统会决定最好在不同的CPU核上分别运行这两个进程，以挤出最大的性能。

对Node也需要做类似的事情。在这一点上，你有两个选择：

1. Run Node in cluster mode——集群（cluster）模式是一种架构，Node本身已经支持。简单地说，Node会分叉（forks）出更多自己的进程，并通过一个主进程（master process）分配负载。
2. Run Node processes independently——这个选项与上面的略有不同，因为你现在没有一个主进程来控制子Node进程。这意味着，当你产生不同的Node进程时，它们将完全独立运行。没有共享内存，没有IPC，没有通信，什么都没有。

根据stackoverflow answer，后者（选择 2）的性能好得多，但设置起来有点麻烦。

为什么呢？因为在Node应用中，不仅有应用逻辑，而且当你在Node代码中设置服务时，几乎总是需要绑定端口。而一个应用程序的代码库不能在同一个操作系统上绑定两次相同的端口。

然而，这个问题是很容易解决的。环境变量、Docker容器、NGiNX前端代理（frontend proxy）等等都是这方面的一些解决方案。

限制你的接入点（endpoints）速率

让我们面对现实吧。世界上不是每个人都对你的服务器抱有良好的意图。当然，像DDoS这样的攻击是非常复杂的，甚至像GitHub这样的巨头在发生这样的事情时也会瘫痪。

但是，你至少可以防止一个脚本小子对你的服务器上暴露的一个昂贵的、没有设置任何速率限制的 API 端点进行攻击，从而导致你的服务器瘫痪。

如果你使用Express和Node，有2个好用的包（packages），它们可以无缝地一起工作，在第7层限制流量。

1. Express Rate Limit - https://www.npmjs.com/package/express-rate-limit
2. Express Slow Down - https://www.npmjs.com/package/express-slow-down

Express Slow Down实际上是给你的请求慢慢增加的响应延迟，而不是丢弃它们。这样一来，如果合法用户不小心DDoS了（在这里和那里点击按钮的超级活动），他们只是被减慢了速度，而不会被限制速率。

另一方面，如果有一个脚本小子在运行脚本来破坏服务器，Express速率限制器会根据用户的IP、用户账户或其他你想要的东西来监控和限制这个特定的用户。

速率限制也可以（应该！）通过IP地址应用在第4层（第4层意味着在发现内容之前阻止流量-HTTP）。如果你愿意，你可以设置一个NGiNX规则，在第4层拦截流量，拒绝来自一个IP的流量，从而使你的服务器进程不至于不堪重负。

使用前端服务器（frontend server）终止SSL

Node提供了开箱即用的支持，使用https服务器模块和所需的SSL证书与浏览器进行SSL握手。

但是，让我们在这里说实话，无论如何，你的应用程序不应该首先关注SSL。这不是应用逻辑应该做的事情。你的节点代码应该只负责处理请求，而不是对进出服务器的数据进行预处理和后处理。

SSL终止（SSL termination）是指将流量从HTTPS转换为HTTP。在这方面，有比Node更好的工具可用。我推荐NGiNX或HAProxy。两者都有免费版本，可以完成工作，Node不用处理SSL问题。

使用前端服务器（frontend server）来提供静态文件服务

同样，与其使用内置的方法如express.static来提供静态文件，不如使用前端的反向代理服务器如NGiNX来来处理磁盘上的静态文件。

首先，NGiNX比Node做得更快（因为它是从头开始建立的，只做这个）。但它也从单线程的Node进程中接过文件服务，而Node可以把别的事做得更好。

不仅如此--像NGiNX这样的前端代理服务器还可以利用GZIP压缩技术帮助你更快地传送内容。你还可以设置过期标题、缓存数据等等，这不是我们应该期望Node做的事情（不过，Node还是可以做到的）。

配置错误处理

正确的错误处理可以使你免于花费数小时的时间来调试和试图重现困难的错误。在服务器上，设置错误处理的架构特别容易，因为你是运行它的人。我推荐像Sentry与Node这样的工具，它可以记录、报告并在服务器因源代码中的错误而崩溃时向你发送电子邮件。

一旦到位，现在是时候在服务器崩溃时重新启动它了，这样整个网站就不会瘫痪几个小时，直到你手动将它重新启动。

为此，你可以使用像PM2这样的进程管理器。或者更好的是，使用一个docker化的容器环境，使用诸如restart: always的策略，并设置适当的内存和磁盘限制。

Docker设置确保即使你的容器在OME中运行，进程也会再次启动起来（这在PM2环境中可能不会发生，因为如果运行中的进程在某处有内存泄漏，操作系统可能会杀死PM2）。

正确配置日志

所有的答案都在日志中。服务器黑客攻击、服务器崩溃、可疑的用户行为等。为此，你必须确保：

1. 每一个请求尝试都会被记录下来，包括IP地址/请求方式/访问路径，基本上可以记录尽可能多的信息（当然，密码和信用卡信息等私人信息除外）
2. 这可以通过morgan软件包实现。
3. 在生产中设置文件流日志（file stream logs），而不是控制台输出。这更快，更容易看到，并允许你将日志导出到在线日志查看服务。
4. 不是所有的日志信息都具有同等重要性。有些日志只是用来调试的，而如果有些日志出现了，则可能预示着火烧眉毛的情况（如服务器被黑或未经授权的访问）。使用 winston-logger 可记录不同级别的日志。
5. 设置日志轮换（log rotation），这样你就不会在一个月左右后看到服务器的日志大小为GB。
6. 在轮换（rotation）之后，GZIP你的日志文件。文本系统开销少（Text is cheap），而且可压缩性高，容易存储。只要文本日志被压缩了，而且你运行的服务器有相当大的磁盘空间（25GB以上），你就不应该面临文本日志的问题。

结语

在生产过程中注意到一些做法很容易，这可以让你在日后的调试过程中少走弯路。请确保你遵循这些最佳做法，并让我知道你的想法，请在我的推特反馈。

如果你喜欢这篇文章，让我们在社交媒体上交流。这是我的Instagram和 Twitter。我是超级活跃的人，很愿意聊天，欢迎你和我联系。

Peace!
Mehul

如果你使用 Node.js 和命令行界面解决方案，如 Webpack、create-react-app 或 vue-cli-service，你可能已经遇到了这个错误，Error: error:0308010c:digital envelope routines::unsupported.

你并不孤单，因为我现在也遇到了：

React 应用程序确实未能启动：

在这篇文章中，你将学习如何通过 3 种方式来解决这个错误。但首先，让我们讨论一下导致该错误的原因。

什么原因导致 “0308010c:digital envelope routines::unsupported” 的错误？

你遇到这个错误的可能原因主要有两个：

• 你没有使用 Node JS 的 LTS（长期支持）版本。你可以看到我使用的是 Node 17.0.0，这不是 Node 的 LTS 版本。
• 你使用的 react-script 的版本小于 5。

这个错误也可能发生，因为你使用的是Node 17。

如何解决 “0308010c:digital envelope routines::unsupported” 的错误

你至少有 3 种方法可以解决这个错误。我们将一个一个地看。任何一个都应该对你有用。

将 --openssl-legacy-provider 传递给 Webpack 或 CLI 工具

例如，在 React 应用程序中，你可以将 --openssl-legacy-provider 传递给启动脚本，如 "react-scripts --openssl-legacy-provider start"。

这应该就可以了。但是，如果这不能修复错误，那么就进行下一个修复。在许多情况下，它是有效的。

使用 Node JS  的 LTS 版本

考虑将你的 Node 版本降级到 16.16.0 或其他 LTS 版本。

目前，Node 的最新 LTS 版本是 18.12.1。你可以从 Node JS 官方网站下载它，或者使用 NVM 来安装它。

将 React 脚本升级到 5 以上版本

如果你正在使用 React，而这仍然无法为你解决错误，那么这很可能是你的 React 脚本的问题。

如果你使用的 React 脚本版本低于 5，那么你应该把它升级到 5+ 版本。

就我而言，我目前使用的是 react-scripts 3.4.3：

要将 react-scripts 升级到 5+，你可以通过两种方式进行：

卸载并重新安装 react-scripts

• 打开终端，运行 npm uninstall react-scripts
• 运行 npm install react-scripts

手动改变 react 脚本的版本

• 进入你的 package.json，将 react-script 版本改为 5.0.2
• 通过运行 rm –rf node_modules 删除 node_modules 文件夹
• 通过运行 rm –rf package.lock.json 来删除 package.lock.json 文件
• 运行 npm install 或 yarn add，这取决于你所使用的软件包管理器

在将 react-scripts 的版本升级到 5+ 之后，我的 React 应用程序现在可以正常工作了：

总结

正如上文指出的，如果你收到 “0308010c:digital envelope routines::unsupported” 的错误，那么可能是你没有使用 Node JS 的 LTS 版本，或者你使用的 react-scripts 版本小于 5。

希望我们在本教程中讨论的修复方法能帮助你解决这个错误。如果其中一个修复方法不起作用，那么你可以尝试其他方法。在我的例子中，将 react-scripts 升级到 5 以上就行了。

谢谢你阅读本文。

在本文中，我将解释如何在 Windows、Linux 和 Mac 上安装 NVM（Node 版本管理器）。

什么是 NVM？

顾名思义，NVM 是一种用于管理设备上的 Node 版本的工具。

你设备上的不同项目可能使用不同版本的 Node.js。对这些不同的项目仅使用一个版本（由 npm 安装的版本）可能无法为你提供准确的执行结果。

例如，如果你将 10.0.0 的 Node 版本用于使用 12.0.0 的项目，则可能会出现一些错误。如果你用 npm 将 Node 版本更新到 12.0.0，并且你将它用于使用 10.0.0 的项目，你可能无法获得预期的体验。

事实上，你很可能会收到一条警告：

This project requires Node version X

无需使用 npm 为你的不同项目安装和卸载 Node 版本，你可以使用 NVM，它可以帮助你有效地管理每个项目的 Node 版本。

NVM 允许你安装不同版本的 Node，并根据你正在通过命令行处理的项目在这些版本之间切换。

在接下来的部分中，我将向你展示如何在你的 Windows、Linux 或 Mac 设备上安装 NVM。

在继续之前，如果你已经安装了 Node.js，我还建议你卸载它，这样就不会有 Node.js 和 NVM 之间的任何冲突。

如何在 Windows 上安装 NVM？

NVM 主要在 Linux 和 Mac 上得到支持。它不支持 Windows。但是 coreybutler 创建了一个类似的工具，用于在 Windows 中提供 NVM 体验，叫作 nvm-windows。

nvm-windows 提供了一个管理实用程序，用于在 Windows 中管理 Node.js 版本。以下是它的安装方法：

1.点击“立即下载”

在 nvm-windows 仓库的 Readme 文件中，单击“立即下载”：

这将打开一个显示不同 NVM 版本的页面。

2.安装最新版本的 .exe 文件

在最新版本（截至撰写本文时为 1.1.9）中，你会发现不同的资源。单击 nvm-setup.exe 资源，它是该工具的安装文件：

3.完成安装向导

打开你下载的文件，然后完成安装向导。

完成后，你可以通过运行以下命令确认 NVM 已安装：

nvm -v

如果 NVM 安装正确，此命令将显示已安装的 NVM 版本。

如何在 Linux 和 Mac 上安装 NVM

由于 Linux 和 Mac 有一些相似之处（它们都是基于 UNIX 的操作系统），因此你可以以类似的方式在它们上安装 NVM。

1.运行 NVM 安装程序

在你的终端中，像这样运行 NVM 安装程序：

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

# or

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

你可以根据设备上可用的命令使用 curl 或 bash。

这些命令会将 NVM 仓库克隆到设备上的 ~/.nvm 目录。

2. 更新你的个人资料配置

第 1 步的安装过程还应该自动将 NVM 配置添加到你的配置文件中。如果你使用的是 zsh，那将是 ~/.zshrc。如果你使用的是 bash，那将是 ~/.bash_profile... 或其他一些配置文件。

如果它没有自动添加 NVM 配置，你可以自己将其添加到你的配置文件中：

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

上面的这个命令会加载 NVM 以供使用。

3.重新加载 shell 配置

随着你的配置文件配置更新，现在你将重新加载配置以供你的终端使用：

source ~/.bashrc

执行此命令后，NVM 就可以使用了。你可以通过运行以下命令确认 nvm 已正确安装：

nvm -v

这应该会显示所安装的 NVM 的版本。

总结

安装了 NVM 后，你现在可以在你的 Windows、Linux 或 Mac 设备中安装、卸载和切换不同的 Node 版本。

你可以像这样安装 Node 版本。

nvm install latest

此命令将安装最新版本的 Node：

nvm install vX.Y.Z

这将安装 X.Y.Z Node 版本。

你还可以通过运行以下命令将版本设置为默认版本：

nvm alias default vX.Y.Z

如果你想在任何时候使用特定版本，你可以在终端中运行以下命令：

nvm use vA.B.C

NVM 使管理需要不同 Node.js 版本的不同项目变得更加容易。

Node.js是一个JavaScript运行时环境，将其能力扩展到服务器端。它是建立在Chrome的V8 JavaScript引擎上。

Node是一个事件驱动的非阻塞I/O模型。这意味着它是异步的，不会因为一个请求而阻塞（而是立即移动到下一个请求），这使得Node异常快速和高效。

所谓事件驱动，是指一旦Node启动，它就会启动所有的变量和函数，并等待事件的发生。

NPM即Node包管理工具（Node Package Manager），辅助你管理Node包。 NPX即Node包执行（Node Package Execute），它可以执行任何NPM包，甚至无需安装。

可以前往https://nodejs.org/en/download/下载NPM。

编写你的第一个Node.js项目（Hello World）

在你的项目文件中创建一个名为hello_world.js的文件。

然后在如VS Code这样的代码编辑器中打开文件。在编辑器中输入console.log(“Hello World”);。

打开终端，并且导航到文件所在的位置。

输入node hello_world.js。

如何导入Node核心模块

让我们从基础包开始，即fs（文件系统）。我们使用它来创建、读取和修改文件。

导入fs模块，输入命令：const fs = require(“fs”);。

使用这个模块中的函数，可以参考文档。

创建文件，可以使用fs.writeFileSync(filename, content);。

const fs = require(“fs”);
fs.writeFileSync(“file.txt”, “Hi there..”);

在同一个文件中添加内容可以：

fs.appendFileSync(filename, content);.

如何安装NPM包

我们将使用一个名为superheroes（超级英雄） 的基础NPM包（包含了一个随机的超级英雄清单）来帮助你理解NPM是如何运作的。

我们可以在cmd中使用这条命令来安装任意NPM包：

npm install superheroes

现在输入const sh = require(“superheroes”);导入这个安装好的包。

使用这条命令来随机展示超级英雄的名字：

console.log(sh.random());.

再来试一试另外一个包。让我们安装时下最流行的一个npm包——“chalk"，这个包可以改变终端字符串的样式。

使用以下命令安装chalk（我们将安装版本2.4.2，在这个版本中可以使用require方法）。

npm install chalk@2.4.2

现在我们可以通过命令改变文本字符串演示，使用这条命令来选择文本颜色：

chalk.color(text)

更多信息参考chalk包的文档。

如何在程序中初始化NPM

我们可以使用以下命令来初始化NPM：

npm init

然后输入回车并且回答相应的问题：

或者你可以直接通过npm init -y来完成初始化（相当于所有问题的答案都是回车）。

初始化完毕后会生成一个 package.json 文件：

所以，package.json是什么？

package.json是Nodejs项目的一部分。它包含了所有依赖项（NPM包）的记录和每一个项目的原数据。

如果其他人下载了这个项目，他们可以通过这个文件来安装所有运行程序需要的依赖项。

如何使用Moment.js — 一个NPM包

这是使用最多的NPM包之一，可以使用这个包来解析和验证日期。

使用以下命令安装包：

npm i moment

导入包：

const moment = require(“moment”);

通过创建一个Date对象来获取当前日期和时间（JavaScript方法），运行以下代码：

const time = new Date();

使用包里的moment方法来解析或者格式化日期：

const parsedTime = moment(time).format("h:mm:ss");

打印解析后的日期：

console.log(parsedTime);

该项目的package.json中包含的所有依赖项——这个例子中的依赖项就是moment。

在项目文件夹中也有node_modules文件夹。该文件夹包含了所有项目依赖的的依赖项，包含moment，以及moment依赖的依赖包。

package-lock.json是项目文件夹中另一个文件，包含了项目名称、依赖项、依赖项版本和锁定版本等信息。

该文件描述了项目生成的树，使后续安装可以生成相同的树。

如何使用Express JS——一个NodeJS框架

Express是Node.js的一个web应用框架，该框架提供了全面的功能来支持web和移动应用的开发。

如何安装Express

使用以下命令来创建Express：

npm install express

然后这样导入Express：

const express = require("express");

如何创建一个Express应用

使用以下命令来创建Express应用：

const app = express()

如何在端口3000启动服务器

app.listen(3000, () => { 
    console.log("Server running on port 3000");
}

你可以打开http://localhost:3000登录你创建的服务器。

这里的“cannot get /”意味着还没有定义路由“/” 。

可以使用 app.get()函数定义“/”路由。

**app.get (route, callback function)**函数被用于处理所有GET请求。

这个回调函数有两个参数，req和res，分别指代的是HTTP请求和期望的响应。参数名（req，res）并不是固定的，所以你可以重命名为其他值。

app.get("/", (req,res) => { 
    // app.get处理GET请求
    // req - http请求, res - 期望响应
    res.send("Hello World"); // 给这个路由发送Hello World
}

如何使用Express来创建Hello World程序

在这个部分中我们将使用Express创建基本的Hello World程序：

const express = require("express");
const app = express();
app.get("/", (req, res) => {  
    res.send("hello world");
});
app.listen(3000, () => {  
    console.log("Server running on 3000");
});

输出如下：

如何在Express中渲染静态文件

这部分介绍如何使用Express来渲染静态文件的概念。

首先，创建一个新的项目文件夹，并且使用 npm init -y来初始化npm。

使用 npm i express来安装Express，并创建一个名为app.js的文件。

创建一个app，并在端口3000监听：

const express = require("express);
const app = express();
app.listen(3000, () => {  
    console.log("Server running on 3000");
}

在根目录创建一个名为public的文件夹，来渲染静态web页面，如：HTML、CSS和JS。

由于本教程重点在后端，所有我们不会花时间在前端部分，在public文件夹中，我们仅创建HTML文件。

我们将导入path模块，并将特定路径合并到一起：

const path = require(“path”);

并使用以下命令来渲染这些文件：

app.use(express.static(path.join(__dirname, “/public”)));

__dirname →返回当前目录

const express = require("express");
const path = require("path");
const app = new express();
app.use(express.static(path.join(__dirname, "/public")));
app.listen(3000, () => {  
    console.log("Server running on 3000");
});

输出如下：

如何在Express中渲染动态文件

在这个部分我们将学习如何使用一个输入对象的值来渲染动态文件。

有一些，如：pug、handlebars、ejs等模板用于动态页面的渲染。这些模板使得我们可以在运行时注入动态数据、if条件和循环。

在这里我们将讨论handlebars。

安装包（express和hbs）：

npm i hbs express

创建文件名为app.js的文件，并且导入包：

const express = require(“express”);
const hbs = require(“hbs”);
const path = require(“path”);

创建Express，并在端口3000监听：

const app = express();
app.listen(3000, (req,res) => {  
    console.log("Server running on 3000");
}

将视图引擎（view engine）设置为hbs，使得handlebars生效：

app.set(“view engine”, “hbs”);

视图引擎使得我们可以使用特定模板来渲染动态页面。

基本上，视图引擎会在根目录里寻找“视图（views）”文件夹。但为了避免报错，我们将“views”的路径包含在参数中：

app.set(“views”, path.join(__dirname,“/views”);

然后在根目录中创建 views 文件夹，并在文件夹中创建index.hbs文件（.hbs是handlebars的扩展名）并插入以下HTML代码：

index.hbs

<html>  
    <head> 
        <title>Dynamic Rendering</title> 
    </head>
    <body>  
      <h1>Dynamic Rendering</h1>   
      <p>{{author}}</p> <!--由服务器接受到的动态数据-->
    </body>
</html>

{{author}} — 是插入动态数据的语法。

我们再创建一个app.get函数来处理路由"/"上的GET请求，并且发送动态数据author。

app.get("/", (req, res) => { 
    res.render("index", {    
        author: "Arash Arora", 
    });
});

res.render 是一个渲染视图的函数，在这里我们传入了两个参数。第一个是去掉扩展名的文件名，第二个是本地变量对象，比方说author。

app.js文件

const express = require("express");
const hbs = require("hbs");
const path = require("path");
const app = express();
app.set("view engine", "hbs");
app.set("views", path.join(__dirname, "/views"));
app.get("/", (req, res) => {  
    res.render("index", {    
        author: "Arash Arora", 
    });
});
app.listen(3000, (req, res) => { 
    console.log("Server listening on 3000");
});

文件夹结构

输出如下：

如何使用Handlebars创建高级模板

在这一部分我们将学习可复用组件。在前面的章节我们给每一个页面的header和footer创建了相同的组件。

这里的重复性工作就可以通过高级模板来简化。也就是说我们创建一个组件，并在需要的地方反复使用。

Handlebars引入部分（Partials）的概念

Partials是可被其他模板调用的handlebar文件。Partials是一个被广泛应用的模板类概念，所以不仅限于Handlebars。

想要构建可以复用的模板，可以将它们单独放在同一个文件夹内（Partial），然后在不同的模板中使用。可以将Partial理解为模块化模板的一种简单技术。

可以通过以下步骤创建partial：

• 初始化npm → npm init -y
• 安装必要的包、Express以及hbs → npm i express hbs
• 创建文件夹模板
• 在文件夹模板内部创建另外两个文件夹：partials和views
• 创建文件app.js

文件结构类似

让我们创建两个partial文件：header.hbs和footer.hbs。同时也创建两个视图：index.hbs和about.hbs。

index.hbs

<html lang="en">  
    <head>   
        <title>Advanced Templating</title>  
    </head>  
    <body>    
        {{>header}} <!--包含header组件-->
        <p>I'm a savior</p>    
        {{>footer}} <!-- 包含footer组件-->
    </body>
</html>

about.hbs

<html lang="en">  
    <head>    
        <title>Advanced Templating -- About</title> 
    </head>
    <body>   
        {{>header}}   
        <p>Handlebars</p>    
        {{>footer}} 
    </body>
</html>

header.hbs

<header>  
    <h1>Advanced Templating</h1> 
    <h3>{{title}}</h3><!--服务器传来的动态数据-->
    <a href="/">Home</a> 
    <a href="/about">About</a>
</header>

footer.hbs

<footer>  
    <p>Created by {{name}}</p> <!--name -> 动态数据 -->
</footer>

app.js

const express = require("express");
const hbs = require("hbs");
const path = require("path");
const app = express();
app.set("view engine", "hbs");
app.set("views", path.join(__dirname, "/templates/views"));
hbs.registerPartials(path.join(__dirname, "/templates/partials"));
app.get("/", (req, res) => {  
    res.render("index", {    
        title: "Home",    
        name: "Arash Arora",  
    });
});
app.get("/about", (req, res) => {  
    res.render("about", {    
        title: "About",    
        name: "Arash Arora",  
    });
});
app.listen(3000, () => {  
    console.log("Listening on port 3000");
});

这里基本和在Express中渲染动态数据章节类似，除了使用partial的时候我们需要 注册partials。

如何注册partials

hbs.registerPartials(path_to_partials)

由于我们在模板文件夹中创建了partials目录，这里是 partials 的路径：

hbs.registerPartials(path.join(__dirname, "/templates/partials"));

总结

在这篇文章中，我们从理论到实践讲解了Node.js。虽然我们不能从一篇简短的文章中习得Node.js所有内容，但是我已经尽我所能地在这篇文章中涵盖了重要的知识点，来辅助你开启Node.js之旅。

简言之，我们讨论了什么是Node.js，即一个非阻塞、事件驱动的JavaScript运行时环境，它是异步的、可以使用单线程来执行操作。我们还讨论了使用最广泛的短小、灵活的Node.js的web应用框架——Express。

我们还讲解了Node.js的NPM、 NPX以及静态和动态渲染。

总而言之，Node.js是一项令人惊叹的技术，而且由于其庞大的社区，其可能性是无穷无尽的。

环境变量是在程序之外设置的变量，通常通过云服务提供商或操作系统设置。

在 Node 中，环境变量是一种很好的方式，可以安全、方便地配置那些不经常改变的东西，如 URL、认证密钥和密码。

如何创建环境变量

Node 开箱即支持环境变量，并且可以通过 env 对象（它是 process 全局对象的一个属性）访问。

要看到这一点，你可以在 Node REPL 中通过直接向 process.env 对象添加一个变量来创建你自己的环境变量。

例如，要创建一个环境变量来存储我行李箱上的密码，我可以这样分配变量：process.env.LUGGAGE_COMBO=“12345”。

（根据惯例，环境变量一般用大写字母书写）。

虽然这是一个很好的实验，但你不会在一个应用程序中这样使用 Node REPL。要在你的 Node 应用程序中创建环境变量，你可能想使用像 DotEnv 这样的包。

如何使用 DotEnv

DotEnv 是一个轻量级的 npm 包，它可以从 .env 文件中自动加载环境变量到 process.env 对象。

要使用 DotEnv，首先使用命令安装它：npm i dotenv。然后在你的应用程序中，像这样要求和配置这个包：require('dotenv').config()。

请注意，一些包，如 Create React App 已经包括 DotEnv，而云服务提供商可能有不同的设置环境变量的方法。因此，在你遵循本文的任何建议之前，请确保检查你正在使用的任何包或供应商的文档。

如何创建一个 .env 文件

在你安装并配置了 DotEnv 之后，在文件结构的顶层创建一个名为 .env 的文件，这是你创建所有环境变量的地方，以 NAME=value 格式书写。例如，你可以像这样设置一个端口变量为 3000：PORT=3000。

你可以在 .env 文件中声明多个变量。例如，你可以这样设置与数据库有关的环境变量：

DB_HOST=localhost
DB_USER=admin
DB_PASSWORD=password

没有必要用引号来包裹字符串。DotEnv 会自动为你做这个。

一旦你创建了这个文件，请记住，你不应该把它推送到 GitHub，因为它可能包含敏感数据，如认证密钥和密码。将该文件添加到 .gitignore 中，以避免不小心将其推送到公共仓库。

如何访问环境变量

访问你的变量是非常容易的！它们被附在 process.env 对象上，所以你可以使用 process.env.KEY 模式访问它们。

如果你需要改变任何环境变量的值，你只需要修改 .env 文件。

总结

环境变量将使你的代码更容易维护和更安全。用 Dotenv 来设置它们很容易，并且可以在 Node 中直接使用它们。

现在你知道它是怎么做的了，你可以为你的 Node 应用程序创建环境变量了！

NodeJS 是一个异步事件驱动的 JavaScript 运行环境，旨在建立可扩展的网络应用。

这里的异步指的是 JavaScript 中所有那些在后台处理的、而且不会阻塞任何其他请求的功能。

在这篇文章中，你将学习并理解 NodeJS 是如何工作的，如何处理发送到服务器的所有功能或请求，无论是 同步（synchronously） 还是 异步（asynchronously）。

什么是事件循环（Event Loop）

你可能已经猜对了--Node 在 NodeJS 环境中使用事件循环（Event loop） 处理请求。但首先，让我们了解一些基本术语，这将有助于我们理解整个机制。

事件循环是一个事件监听器（event-listener），它在 NodeJS 环境中发挥作用，并随时准备监听、处理和输出一个 事件（event）。

一个事件可以是任何东西，从鼠标点击到按键或超时。

什么是同步（Synchronous）和异步（Asynchronous）编程

同步编程（Synchronous programming） 意味着代码按其定义的顺序运行。在一个同步程序中，当一个函数被调用并返回了一些值后，才会执行下一行。

让我们通过这个例子来理解:

const listItems = function(items) {
  items.forEach(function(item) {
    console.log(item)
  })
}

const items = ["Buy milk", "Buy coffee"]

listItems(items)

The output will look like this:

"Buy milk"
"Buy coffee"

在这个例子中，当listItems(items)函数被调用时，它将循环浏览数组中的项目。console.log(item)函数首先对数组的第一个项目被调用，并打印出"Buy milk"，然后console.log(item)再次被执行，这次它通过数组的第二项，并打印出"Buy coffee"。

所以你可以说这个函数是按照它被定义的顺序（sequence） 执行的。

另一方面，异步编程（Asynchronous programming） 是指不按顺序执行的代码。这些函数不是按照它们在程序中定义的顺序执行，而是只有在满足某些条件时才执行。

例如，setTimeOut()在延迟一定数量的毫秒后执行一项任务。

setTimeOut(function(){
    return( console.log("Hello World!") )
}, 3000)

这些函数并不逐行运行，而只是在需要运行的时候才运行，与函数的声明无关。在这种情况下，当所有的同步函数都被执行后，该函数会在3秒后自动运行。

注意：异步函数只有在所有同步函数被执行后才会运行和执行。在此之前，它们将在后台被处理。

如果你想了解更多关于 NodeJS 和异步编程的信息，你可以参考这篇文章

但是，NodeJS 如何在后台处理异步函数并先运行所有同步函数？所有这些机制都可以用 NodeJS 的事件循环轻松解释。

事件循环（Event Loop）是如何工作的

现在让我们看看 NodeJS 事件循环如何使用 Nodejs 事件循环图来执行一个简单的同步程序。然后我们将检查 Node 是如何逐行执行程序的。

在接下来的内容里，你会逐步理解这张图：

在左上角，你有一个将要被执行的 Node 文件。在左下方，你有一个程序的输出终端。然后，你有 调用堆栈（Call stack）、Node APIs 和回调队列（Callback queue）。 所有这些共同构成了NodeJS 环境。

对于同步编程，你只需要关注调用栈（call stack）。这是 NodeJS 环境中唯一的一部分，将在这种情况下工作。

回调栈（callback stack）是一个数据结构（data structure），你用它来跟踪将在程序内部运行的所有函数的执行情况。这个数据结构只有一个开放端（open），用于添加或删除顶部项目（top items）。

当程序开始执行时，它首先被包裹在一个匿名（anonymous ）的main()函数中。这是由 NodeJS 自动定义的。所以main()首先被推送到回调栈中。

接下来，变量a和b被创建，它们的总和被存储在一个变量sum中。所有这些值都存储在内存中。

现在，console.log()是一个被调用并推到回调栈内（callback stack）的函数。它被执行，你可以在终端屏幕上看到输出。

在这个函数被执行后，它被从回调栈中删除。然后main()也被删除，因为程序中没有任何东西可以被调用。这就是一个同步程序的执行方式。

现在，让我们看看异步函数或程序如何在 NodeJS 内部执行。我们需要回调栈（callback stack）、Node API 和回调队列（callback queue）一起处理一个异步函数。

让我们先看一下这个例子:

当程序开始执行时，首先main()函数被添加到回调栈（callback stack）中。然后console.log("Start")被调用并添加到回调栈（callback stack）中。在处理之后，输出在终端上是可见的，然后它被从回调栈中删除。

接下来是setTimeOut(...Zero...)函数，它被添加到回调栈（callback stack）中。

由于这是一个异步函数，它不会在回调栈（callback stack）中得到处理。然后，它被从回调栈（callback stack）中添加到 Node APIs 中，在那里，一个事件被注册，一个回调函数被设置为在后台得到处理。

接下来是setTimeOut(...Two...)，它也从回调栈（callback stack）中被添加到 Node API，因为它是一个异步函数。然后另一个回调函数被设置为在后台超时 2 秒后被处理。直到这一点，其他函数可以被执行。

这就是非阻塞行为，所有的同步函数首先被处理和执行，异步函数在后台处理，同时等待轮到自己被执行。

接下来，console.log("End")函数在回调栈（callback stack）的最后被调用，并在此得到处理。你可以看到终端上的输出。现在，所有的同步函数都被处理了，main()被从回调栈（callback stack）中移除。

在后台，所有的异步函数被处理，它们的回调被存储在回调队列（callback queue）中。首先被处理的函数将被首先加入回调栈（callback stack）的执行队列中。

注意：异步函数不能在回调栈（callback stack）内运行，直到它被清空。这意味着在main()被从调用栈（callback stack）中移除后，所有的异步函数才能开始执行。

现在，它们一个接一个地被推到回调栈（callback stack）中，使用事件循环（event loop），最后被执行。每个回调函数都会打印值，每次都会调用console.log()函数。

最后，这些在被执行后也被移除，现在回调栈（callback stack）是空的。

这就是 NodeJS 如何在环境中执行同步和异步函数，以及事件循环如何管理调用异步函数。

总结

在这篇文章中，你了解了 NodeJS 的内部工作，看到了异步程序是如何被执行的。

现在你应该明白为什么两秒的延时函数不会阻止程序的其他部分执行。你也知道为什么零秒延时函数在 “End” 打印后最后打印出数值。

我希望你喜欢阅读这篇文章，并学到一些新东西。如果你觉得这篇文章有用，请和朋友们分享它^_^

React 前端与 Node 后端相配合，对于你想创建的任何应用程序来说都是一个坚如磐石的组合。

本指南旨在帮助你用 React 尽可能容易地创建一个全栈项目。让我们看看如何使用 React 和 Node 从头开始创建一个完整的项目，并将其部署到网络上。

想创建和部署你自己的 React 和 Node 应用程序吗？ 查看我的课程系列，它告诉你如何创建你自己的全栈 React 项目，比如这个项目。

你需要的工具

• 确保 Node 和 NPM 已经安装在你的电脑上。你可以在这个网站下载这两样东西 nodejs.org（NPM 包含在你安装的 Node 中，不需要另外安装)。
• 使用你选择的代码编辑器。我正在使用并且个人推荐使用 VSCode。你可以在这个网站下载 VSCode：code.visualstudio.com。
• 确保你的电脑上安装了 Git。这对于用 Heroku 部署我们的应用程序是必要的。你可以在这个网站上下载：git-scm.com。
• 一个在 heroku.com 的账号。我们将使用 Heroku 将应用程序完全免费地发布到网上。

第一步：创建你的 Node（Express）后端

首先为你的项目创建一个文件夹，命名为react-node-app（示例名称）。

然后，将该文件夹拖入你的代码编辑器。

为了创建我们的 Node 项目，在你的终端运行以下命令：

npm init -y

这将创建一个 package.json 文件，使我们能够跟踪所有的应用程序脚本，并管理我们的 Node 应用程序需要的任何依赖。

我们的服务器代码将放在一个同名的文件夹中：server。让我们来创建这个文件夹。

在这个文件夹中，我们将放置一个文件，从这个文件中运行服务。index.js。

我们将使用 Express 创建一个简单的 Web 服务器，如果环境变量PORT没有给定值，则运行在 3001 端口（Heroku 将在我们部署应用程序时设置这个值）。

// server/index.js

const express = require("express");

const PORT = process.env.PORT || 3001;

const app = express();

app.listen(PORT, () => {
  console.log(`Server listening on ${PORT}`);
});

然后在我们的终端安装 Express 作为一个依赖项来使用它。

npm i express

之后，我们将在 package.json 中创建一个脚本，当我们用npm start运行它时，将启动我们的 Web 服务。

// server/package.json

...
"scripts": {
  "start": "node server/index.js"
},
...

最后，我们可以通过在终端运行 npm start 来运行应用程序，我们应该看到它正在 3001 端口上运行。

npm start

> node server/index.js

Server listening on 3001

第二步：创建一个 API

我们想把我们的 Node 和 Express 服务器作为一个 API，这样它就可以给 React 应用提供数据，改变这些数据，或者做一些其他只有服务才能做的操作。

在这个例子中，我们将简单地给 React 应用发送一个 JSON 对象中的 "Hello from server!"消息。

下面的代码为路由/api创建了一个 endpoint。

如果我们的 React 应用向该路由发出一个 GET 请求，我们就会用 JSON 数据进行响应（使用res，代表响应）。

// server/index.js
...

app.get("/api", (req, res) => {
  res.json({ message: "Hello from server!" });
});

app.listen(PORT, () => {
  console.log(`Server listening on ${PORT}`);
});

注意：请确保将其放在app.listen函数之前。

由于我们已经对 Node 代码进行了修改，我们需要重新启动服务器。

要做到这一点，在终端按 Command/Ctrl+C 结束你的启动脚本，然后再次运行npm start重新启动它。

为了测试这一点，我们可以简单地在浏览器中访问http://localhost:3001/api，看看我们获得的信息。

第三步：创建 React 前端

在创建了后端之后，让我们转到前端。

打开另一个终端标签，使用 create-react-app 创建一个新的 React 项目，名称为client。

npx create-react-app client

之后，我们将拥有一个安装了所有依赖项的 React 应用。

我们要做的唯一改变是在 package.json 文件中添加一个名为proxy的属性（client文件夹下的 package.json 文件）。

这将允许我们向 Node 服务器发出请求，而不必在每次向它发出网络请求时提供它所运行的原点（http://localhost:3001）。

// client/package.json

...
"proxy": "http://localhost:3001",
...

然后我们可以通过运行它的启动脚本来启动 React 应用，这和我们的 Node 服务器一样。首先确保cd进入新创建的client文件夹。

之后，将在localhost:3000上启动（其实启动两个 Node 的进程，一个是 React 开发使用，一个是 Express 开发使用）。

cd client
npm start

Compiled successfully!

You can now view client in the browser.

Local:            http://localhost:3000

第四步：从 React 向 Node 发出 HTTP 请求

现在我们有了一个工作的 React 应用，我们想用它来与我们的 API 进行交互。

让我们看看如何从我们之前创建的/apiendpoint 获取数据。

要做到这一点，我们可以前往src文件夹中的App.js组件，使用useEffect进行 HTTP 请求。

我们将使用 Fetch API 向后端发出一个简单的 GET 请求，然后将我们的数据以 JSON 格式返回。

一旦我们得到了返回的数据，我们将得到消息属性（抓取从服务器发送的问候语），然后把它放在一个叫做data的状态变量中。

这将使我们能够在页面中显示该消息，如果我们有的话。我们在 JSX 中使用一个条件，如果数据还没有，就显示文本 Loading...。

// client/src/App.js

import React from "react";
import logo from "./logo.svg";
import "./App.css";

function App() {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetch("/api")
      .then((res) => res.json())
      .then((data) => setData(data.message));
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>{!data ? "Loading..." : data}</p>
      </header>
    </div>
  );
}

export default App;

用 Heroku 将你的应用程序部署到网上

最后，让我们把应用程序部署到网络上。

首先，在我们的client文件夹中，确保删除由 create-react-app 自动初始化的 Git repo（rm -rf .git, .git 是隐藏文件夹，不能直接看到）。

这对部署我们的应用程序至关重要，因为我们要在项目的根文件夹（react-node-app）中创建 Git repo，而不是在client中。

cd client
rm -rf .git

当我们部署时，Node 后端和 React 前端都将在同一个域名（即 mycoolapp.herokuapp.com）提供服务。

我们看到请求是如何被 Node API 处理的，所以我们需要写一些代码，当我们的 React 应用被用户请求时（例如，当我们进入应用的主页时）显示 React 应用。

我们可以在server/index.js中加入以下代码来完成这个工作。

// server/index.js
const path = require('path');
const express = require('express');

...

// 让 Node 为我们创建的 React 应用提供文件
app.use(express.static(path.resolve(__dirname, '../client/build')));

// 处理对/api 的 GET 请求
app.get("/api", (req, res) => {
  res.json({ message: "Hello from server!" });
});

// 所有之前未被处理的 GET 请求将返回我们的 React app
app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, '../client/build', 'index.html'));
});

这段代码将首先允许 Node 使用express.static函数来访问我们创建的 React 项目的静态文件。

如果有一个 GET 请求进来，而这个请求没有被我们的/api路由处理后，我们的服务器将用 React 应用来响应。

这段代码允许我们的 React 和 Node 应用一起部署在同一个域名。

然后我们可以告诉 Node App 如何做，在我们的服务器 package.json 文件中添加一个build脚本，为生产构建我们的 React 应用。

// server/package.json

...
"scripts": {
    "start": "node server/index.js",
    "build": "cd client && npm install && npm run build"
  },
...

我还建议提供一个名为engines的字段，在这里你要指定你用来构建项目的 Node 版本。这将被用于部署。

你可以通过运行node -v来获得你的 Node 版本，你可以把结果放在engines中（例如14.15.4）。

// server/package.json

"engines": {
  "node": "your-node-version"
}

在这之后，我们准备使用 Heroku 进行部署，所以请确保你在 Heroku.com 有一个账户。

当你登录并查看你的仪表板（dashboard），你将选择新建（New）>创建新的应用程序（Create New App），并提供一个唯一的应用程序名称。

sudo npm i -g heroku

当安装完毕，你将通过 CLI 使用heroku login命令登录到 Heroku。

heroku login

Press any key to login to Heroku

登录后，只需在 "Deploy "选项卡中为我们创建的应用程序遵循部署说明。

以下四个命令将为我们的项目初始化一个新的 Git repo，将我们的文件添加到其中，提交它们，并为 Heroku 添加一个 Git 远程。

git init
heroku git:remote -a insert-your-app-name-here
git add .
git commit -am "Deploy app to Heroku"

然后，最后一步是通过推送我们刚刚添加的 Heroku Git 远程地址（heroku git:remote -a insert-your-app-name-here），来发布我们的应用程序。

git push heroku master

恭喜！我们的全栈式 React 和 Node 应用已经上线。🎉

当你想对你的应用程序进行修改时（并进行部署），你只需要用 Git 来添加你的文件（git add），提交它们（git commit），然后推送到我们的 Heroku 远程（git push）。

git add .
git commit -m "my commit message"
git push heroku master

想用 React 创建像 YouTube、Instagram 和 Twitter 这样的真实世界的应用程序吗？以上就是方法。

在每个月的月底，我将发布一个独家课程，准确地告诉你如何复现从头到尾用 React 创建一个完整的应用程序。

想在下一个课程出现时得到通知吗？在这里加入等候名单。

这篇教程中提到的各种技术，我不会详细介绍如何使用它们。但是我会留下链接，你可以了解更多信息，

你可以在我为教程制作的仓库中找到所有代码。

教程的目的是为你提供有关如何设置和连接前端 client 和后端 API 的实用指南。
在开始之前，请确保你的电脑正在运行 Node.js。

创建主项目目录

在你的终端中，导航到你要保存项目的目录。现在为你的项目创建一个新目录，并导航到其中：

mkdir my_awesome_project
cd my_awesome_project

创建一个 React App

这个过程真的很简单。

我将使用 Facebook 的 create-react-app 来……你猜对了，轻松创建一个名为 client 的 react 应用：

npx create-react-app client
cd client
npm start

让我们看看我做了什么：

• 使用 npm 的 npx 来创建 react 应用并将其命名为 client。
• cd（change directory 更改目录）进入 client 目录。
• 启动应用程序。

在浏览器中，导航到 http://localhost:3000/。

如果一切正常，你将看到 react 欢迎页面。恭喜你！这意味着你现在已经在本地计算机上运行了一个基本的 react 应用程序。容易吧？

要停止运行你的 react 应用，只需在终端中按 Ctrl + c。

创建一个 Express App

好的，这将与前面的示例一样简单。不要忘记导航到你的项目顶部文件夹。

我将使用 Express 应用生成器快速创建应用程序框架，并将其命名为 api：

npx express-generator api
cd api
npm install
npm start

让我们看看我做了什么：

• 使用 npm 的 npx 来全局安装 express-generator。
• 使用 express-generator 创建一个 Express 应用并将其命名为 api。
• cd 进入 API 目录。
• 安装所有依赖项。
• 启动应用程序。

在浏览器中，导航到 http://localhost:3000/。

如果一切正常，你将看到 Express 欢迎页面。恭喜你！ 这意味着你现在已经在本地计算机上运行了基本的 Express 应用程序。容易吧？

要停止运行你的 react 应用，只需在终端中按 Ctrl + c。

在 Express API 中配置新 route

我们开始吧。打开你喜欢的代码编辑器（我正在使用 VS Code），导航到你的项目文件夹。

如果你将 react app 命名为 client，将 express app 命名为 api，则会找到两个主文件夹：client 和 api。

1、在 API 目录中，转到 bin/www，然后将第 15 行的端口号从 3000 更改为 9000。稍后我们将同时运行两个应用程序，因此这样做可以避免出现问题。结果应该是这样的：

2、在 api/routes 上，创建一个 testAPI.js 文件，粘贴以下代码：

var express = require(“express”);
var router = express.Router();

router.get(“/”, function(req, res, next) {
    res.send(“API is working properly”);
});

module.exports = router;

3、在 api/app.js 文件中，在第 24 行插入新的 route：

app.use("/testAPI", testAPIRouter);

4、你正在“告诉” express 使用该 rout。但是，你仍然要求它。让我们在第 9 行进行操作：

var testAPIRouter = require("./routes/testAPI");

唯一的变化是在第 9 行和第 25 行。它应该是这样的：

5、恭喜你！你已经创建了一个新的 route。

如果你启动 API 应用程序（在终端中，导航到 API 目录并运行 “npm start”），然后在浏览器中访问 http://localhost:9000/testAPI，你将看到以下消息：API is working properly（API 正常运行中）。

将 React Client 连接到 Express API

• 在你的代码编辑器上，找到 client 目录，打开位于 my_awesome_project/client/app.js 中的 app.js 文件。
• 在这里，我将使用 Fetch API 从 API 检索数据。只需在 Class 声明之后和 render 方法之前粘贴以下代码：

constructor(props) {
    super(props);
    this.state = { apiResponse: "" };
}

callAPI() {
    fetch("http://localhost:9000/testAPI")
        .then(res => res.text())
        .then(res => this.setState({ apiResponse: res }));
}

componentWillMount() {
    this.callAPI();
}

• 在 render 方法内部，你将找到一个 <; p> 标记。让我们对其进行更改，以使其渲染 apiResponse：

<p className="App-intro">;{this.state.apiResponse}</p>

最后，这个文件应该是这样的：

我知道内容有点多！你可以复制粘贴代码，但是你必须了解自己在做什么。让我们看看我在这里做了什么：

• 在第 6 至 9 行中，我们插入了一个构造函数，用于初始化默认状态。
• 在第 11 至 16 行，我们插入了方法 callAPI()，该方法将从 API 中获取数据并将响应存储在 this.state.apiResponse 上。
• 在第 18 至 20 行，我们插入了一个 react 生命周期方法 componentDidMount()，该方法将在组件安装后执行 callAPI() 方法。
• 最后，在第 29 行，我使用<; p>标记在 client 页面上显示了一个段落，其中包含我们从 API 中检索到的文本。

什么？CORS？

我们快完成了！ 但是，如果我们同时启动应用程序（client 和 API），并导航至http：// localhost：3000 /，页面仍然不会显示预期结果。如果你打开 chrome 开发工具，就会找到原因。在控制台中，你将看到此错误：

Failed to load http://localhost:9000/testAPI: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

这很容易解决。我们只需将 CORS 添加到我们的 API 中，即可允许跨域请求。你可以在此处查看有关 CORS 的更多信息。

• 在你的终端中，导航到 API 目录，并安装 CORS 软件包：

npm install --save cors

• 在你的代码编辑器中，访问 API 目录，打开 my_awesome_project/api/app.js 文件。
• 在第 6 行，require CORS：

var cors = require("cors");

• 在第 8 行，“告诉” express 使用 CORS：

app.use(cors());

现在，API app.js 文件应该是这样：

很棒，我们完成了！

现在，使用 npm start 命令在两个不同的终端中启动你的应用程序（client 和 API）。

如果你在浏览器中导航到 http://localhost:3000/，则应该看到类似的内容：

当然，这个项目没有实现很多，但它是全栈应用的开始。你可以在这个仓库中找到我为教程创建的所有代码。

接下来，我将研究一些补充教程，例如如何将其连接到 MongoDB 数据库，甚至如何在 Docker 容器中运行它们。

正如我的一个好朋友说的：

Be Strong and Code On!!!

每天都要变得更好哦;)

原文：How to create a React frontend and a Node/Express backend and connect them，作者：João Henrique