react 搭建express脚手架作为服务端

前言

本文基于

• “react”: “^18.2.0”
• “express”: “^4.18.2”

1.全局安装 express 以及脚手架工具 express-generator

yarn add express express-generator -g

2.初始化express脚手架

示例使用 server 作为项目名，创建成功后会在根目录下生成一个 server 文件夹

express <项目名>

3.安装express脚手架依赖

express脚手架默认是没有依赖的，需自行安装

cd server

yarn install

4.配置 express 的启动端口号

react的默认启动端口号是3000，express的默认端口号也是3000，需要进行更改

打开 /bin/www 文件，示例修改为9000

var port = normalizePort(process.env.PORT || '9000');

6.启动express项目

yarn start

出现如下启用成功

浏览器访问

http://localhost:9000/

7.react项目中使用

代理配置请参考: react axios配置代理（proxy)，解决本地开发时的跨域问题

更改代理地址

proxy: {
	'/api': {
        target: 'http://localhost:9000',
        ws: true,
        changeOrigin: true,
        pathRewrite: { '^/api': '/' }
      }
},

需要特别注意的是： webpack配置进行改动后，都需要重新启动项目，不然不生效

8.测试express提供的接口

/users 这个接口是express默认提供的

import React, { Component } from 'react';
import axios from 'axios';

class App extends Component {
  componentDidMount() {
    axios.get('/api/users')
      .then(res => {
        console.log(res);
      })
  }
}

export default App;

9.请求效果

配置热更新请参考：react 将express配置到react项目路径下启动，并配置为自动更新（热加载），并配置同时启动react项目以及express服务

如果本篇文章对你有帮助的话，很高兴能够帮助上你。

当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。