使用 Node.js 升级：将服务器添加到我的瑜伽姿势库

使用 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中文网其他相关文章！