Logo

菜单

发布于 2026-01-06 1 阅读
0

我如何构建我的 Express + Typescript + React 应用程序 文件夹结构 创建 React 应用 创建 Express 应用 构建 React 应用 构建 Express 应用 连接 Express 和 React 由 Mux 呈现的 DEV 全球展示挑战赛：展示你的项目！

我如何构建我的 Express + Typescript + React 应用程序

文件夹结构

创建 React 应用

创建 Express 应用

构建 React 应用

构建 Express 应用

连接 Express 和 React

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

在本文中，我将向您展示我是如何设置和构建我的 Express — React 项目的。

文件夹结构

当我搭建 React Express 应用时，我总是使用以下文件夹结构。



├─app
├─build
├─frontend
Enter fullscreen mode Exit fullscreen mode

  • 该app目录将存放 Express 后端应用程序。

  • 该build目录将存放前端和后端应用程序的生产版本。

  • 该frontend目录将存放 React 前端应用程序。

请注意，您可以随意使用任何其他文件夹结构，这只是我个人偏好的做法。

创建 React 应用

我们先来创建 React 应用。我将使用create-react-appnpm 包来实现这个功能。

你可以使用该工具运行 npm 包而无需安装它们npx。



npx create-react-app frontend
Enter fullscreen mode Exit fullscreen mode

React 应用将在文件夹中创建frontend。

我们来测试一下安装是否成功。



cd frontend
yarn run start
Enter fullscreen mode Exit fullscreen mode

该yarn run start命令将运行 React 开发服务器。每当您更改文件时，它都会自动重新编译 React 应用并重新加载浏览器！🚀

React 应用

该create-react-app软件包还会在该frontend目录中初始化一个 Git 仓库。但是，我希望在项目根目录中只有一个 Git 仓库。

要删除目录中的 Git 仓库，frontend只需删除该.git目录即可。



rm -rf .git
Enter fullscreen mode Exit fullscreen mode

创建 Express 应用

现在我们已经有了一个可以运行的前端应用程序，现在是时候设置后端 Typescript Express 应用程序了。

我首先在项目根目录中创建一个新包。

然后我添加了 Express 和 Typescript 依赖项，最后创建了app目录。



yarn init
yarn add express @types/express typescript
mkdir app
Enter fullscreen mode Exit fullscreen mode

接下来，我创建了一个非常标准的配置tsconfig.json文件。这个文件包含了将 TypeScript 编译成 Javascript 的设置。



{
  "compilerOptions": {
    "module": "commonjs",
    "baseUrl": "./",
    "outDir": "build",
    "target": "es6",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "lib": ["es6"],
    "allowJs": true,
    "forceConsistentCasingInFileNames": true,
  },
  "include": [
    "**.ts"
  ],
  "exclude": [
    "./frontend"
  ]
}
Enter fullscreen mode Exit fullscreen mode

我目前只想在后端使用 TypeScript，所以才把这个frontend目录排除在外。

在应用程序目录中，我将创建一个Server.ts包含 Server 类的文件夹。




import {Express, Request, Response} from "express";

export class Server {

    private app: Express;

    constructor(app: Express) {
        this.app = app;

        this.app.get("/api", (req: Request, res: Response): void => {
            res.send("You have reached the API!");
        })
    }

    public start(port: number): void {
        this.app.listen(port, () => console.log(`Server listening on port ${port}!`));
    }

}
Enter fullscreen mode Exit fullscreen mode

此类将Express在构造函数中接收应用程序并初始化应用程序路由。

在现实世界中，我可能会创建另一个类Router.ts来保存所有应用程序路由，但这超出了本文的范围。

为了初始化这个服务器，我index.ts在应用程序根目录下创建了一个文件。这个文件的作用是创建一个新的服务器类并启动服务器。



import {Server} from "./app/Server";
import express from 'express';
const app = express();

const port = 8080;

const server = new Server(app);
server.start(port);
Enter fullscreen mode Exit fullscreen mode

要启动后端服务器，我将以下代码片段添加到package.json文件中。它将使用该ts-node包直接运行 TypeScript 代码。

这样您就无需担心将 TypeScript 编译成 Javascript，因为这一切都已为您完成。



"scripts": {
    "start": "npx ts-node index.ts"
}
Enter fullscreen mode Exit fullscreen mode

这就是为什么我可以通过运行以下命令来启动服务器的原因。

API窗口

此外，您还可以使用Nodemon在文件更改时自动重启 ts-node。

构建 React 应用

让我们构建一个 React 应用的生产版本。

我将修改该frontend/package.json文件。因为在构建 React 应用程序后，我想将构建文件移动到该/build/frontend文件夹​​。

找到"scripts"并更新该"build"行。



"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build && mv ./build ../build/frontend"
  },
Enter fullscreen mode Exit fullscreen mode

我们来运行一下yarn run build命令，看看能不能用！🙌



mkdir build 
cd frontend
yarn run build
Enter fullscreen mode Exit fullscreen mode

如果您导航到该/build/frontend目录，您将看到可用于生产环境的 React 应用！

构建 Express 应用

让我们"build"在文件中添加一个新脚本package.json。



"scripts": {
    "start": "npx ts-node index.ts",
    "build": "npx tsc"
  }
Enter fullscreen mode Exit fullscreen mode

这将简单地调用 Typescript 编译器包tsc来编译（或者如果你喜欢的话，也可以称之为转译 💁‍♂）Typescript 到 Javascript。

运行构建命令测试是否有效！



yarn run build
Enter fullscreen mode Exit fullscreen mode

如果一切顺利，您的构建目录应该如下所示。



build/
├─app/
├─frontend/
├─index.js
Enter fullscreen mode Exit fullscreen mode

连接 Express 和 React

我们可以开发并构建后端和前端应用程序。但是，我们也应该将 Express 与 React 连接起来。

例如，如果我浏览到，localhost:8080/我应该能看到 React 应用程序。

如果我浏览到该页面，localhost:8080/api应该可以看到 API 消息。

为此，我更新了constructor类Server。




constructor(app: Express) {
    this.app = app;

    this.app.use(express.static(path.resolve("./") + "/build/frontend"));

    this.app.get("/api", (req: Request, res: Response): void => {
        res.send("You have reached the API!");
    });

    this.app.get("*", (req: Request, res: Response): void => {
        res.sendFile(path.resolve("./") + "/build/frontend/index.html");
    });
}
Enter fullscreen mode Exit fullscreen mode

首先，我将该build/frontend目录标记为静态资源目录。这意味着 Express 将自动提供该目录中的文件。

接下来，我添加了一个通配符*路由，并将所有路由信息发送到该index.html文件。该文件包含 React 前端应用程序。

让我们重新运行后端应用程序。



yarn run start
Enter fullscreen mode Exit fullscreen mode

导航到该页面后，localhost:8080我就可以看到 React 应用了🎉

React 应用 2

导航到该位置时，localhost:8080/api我可以看到 API 消息 🔥

API消息

就是这样！你可以在Github上找到源代码🚀

文章来源：https://dev.to/dirk94/how-i-struct-my-express-typescript-react-applications-g3e
重置 CSS 的注意事项
启动和停止一只羊驼！如何创建一个非...