将 Node.js 后端添加到 React 项目？

Question

So I have created a React app with

npx create-react-app my-app

and written a few functions and some content to my web app. Now I do need to implement backend for connecting to my SQL database and reading/writing from there. It is my understanding that server-side logic (NodeJS) and front-end code (React) should be in same repository, but how exactly is that done? I should probably create /backend folder and server.js inside it, but where? In the same folder with node_modules , public and src or elsewhere? Also, it would be nice to know more about how information exchange between Node and React works so I can display data fetched from database with React. Thanks in advance.

Answer 1

For development I have two folders on same level - src with react and server with node. You start (eg)

• nodejs server on port 5000
• webpack-dev-server on port 3000

React communicates with backend via REST API. You have to proxy api requests to your server (part of webpack dev configuration):

devServer: {
    contentBase: path.join(__dirname, 'server', 'static', 'public'),
    port: 3000,
    publicPath: 'http://localhost:3000/',
    historyApiFallback: true,
    disableHostCheck: true,
    hot: true,
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:5000/',
      },
    },
  },

In production environment the react is compiled to server/reactapp subfolder and served with expressjs as any other webpage.

Part of webpack production:

output: {
    path: path.join(__dirname, 'server', 'reactapp'),
    // publicPath: path.join('dist'),
    filename: '[name].bundle.js',
    publicPath: '/',
  },

In Express (or any other web framework) you then serve the /api path with your backend tasks.

This all means I have two separated development environments - server and react, which partly join till in production environment. They both have separated package.json and node_modules. In newer versions I have replaced REST API communication with websocket, what needs some other settings in communication.