使用 Node.js 升级：将服务器添加到我的瑜伽姿势库
通过构建一个简单的瑜伽姿势库熟悉 React 后，我想通过添加一些后端功能将我的项目提升到一个新的水平。这就是 Node.js 的用武之地。Node.js 是一个运行时环境，允许我们在服务器端运行 JavaScript 代码。在这篇博文中，我将介绍如何将 Node.js 服务器添加到我的 Yoga Pose Library 应用程序中。这是练习使用前端和后端技术的绝佳方式，它让我对全栈应用程序的工作方式有了更深入的了解。
为什么将 Node.js 添加到我的 React 应用程序中？
将 Node.js 服务器添加到我的 Yoga Pose 库的主要动机是为 React 应用程序提供服务，并为以后的更高级功能做好准备，例如从数据库检索姿势数据或处理用户身份验证。现在，我想专注于设置服务器并从中提供静态文件（React 应用程序）。这样，我就可以以一种以后可以轻松扩展的方式托管该应用程序。
Node.js 入门
在深入研究代码之前，我安装了 Node.js 并使用 Node 包管理器 npm 初始化了我的项目。如果您没有安装 Node.js，只需访问 Node.js 网站并下载最新版本即可。完成后，我设置了一个基本的 Node.js 服务器。
npm init -y
npm install express
登录后复制
我使用 Express.js（Node.js 的极简 Web 框架）来处理路由和提供静态文件。它非常适合像这样的轻量级应用程序。
介绍 server.js
现在，让我们看一下server.js，它负责设置服务器。这是完整的代码：
// Importing the Express framework
const express = require('express');
// Importing the path module to handle file paths
const path = require('path');
// Creating an Express App
const app = express();
// Setting the PORT
const PORT = process.env.PORT || 3000;
// Serve static files from the React app app.use(express.static(path.join(__dirname, 'build')));
// For any request that doesn't match an API route
// serve the React app's index.html.
app.get('*', (req, res) => { res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
// Start the server
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});
登录后复制
分解代码
现在，让我们一步一步地分解 server.js。
导入依赖项:
const express = require('express');
const path = require('path');
登录后复制
在这里，我们导入了express（Node.js的Web框架）和path（一个内置的Node.js模块，可以帮助我们处理文件和目录路径），以便服务器可以正确地定位到文件我们想要服务。
创建 Express 应用程序:
const app = express();
登录后复制
我们创建一个 Express 应用程序的实例，它将处理我们的服务器请求和响应。
设置端口:
const PORT = process.env.PORT || 3000;
登录后复制
我们定义我们的服务器将侦听的端口号。我们检查环境变量 PORT，这对于使用托管服务进行部署非常有用，如果未设置，则回退到端口 3000。
提供静态文件:
app.use(express.static(path.join(__dirname, 'build')));
登录后复制
这一行告诉 Express 从构建目录提供静态文件，其中包含我们的 React 应用程序的编译文件。
包罗万象的路线：
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'build',
'index.html'));
});
登录后复制
这个包罗万象的路由确保以前的路由未处理的任何请求都将以index.html 进行响应。这对于客户端路由与 React Router 正确配合工作非常重要。
启动服务器:
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});
登录后复制
最后，我们启动服务器并侦听定义的端口，准备就绪后将消息记录到控制台。
结论：未来功能的坚实基础
将 Node.js 添加到我的 Yoga Pose Library 应用程序为我接下来构建更高级的功能奠定了坚实的基础。通过从 Node.js 服务器提供应用程序，我可以轻松处理未来更多的动态数据、用户输入，甚至实时功能。这是结合前端和后端技术的一次很好的练习，我很高兴在继续构建过程中探索更多 Node.js 和 Express。
在我的下一篇博客文章中，我计划更深入地探讨如何使用数据库扩展此设置，但现在，我对通过亲自使用 Node.js 学到的东西感到非常兴奋！
以上是使用 Node.js 升级：将服务器添加到我的瑜伽姿势库的详细内容。更多信息请关注PHP中文网其他相关文章！
