Add Node.js backend to React project?

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.

you don't need to add a second package.json or node_modules. why not add a script to the current package.json which runs node? "server": "node server.js"? — evolutionxbox
As for sharing data between node and react, node can render react pages (easy to share data), but react would likely have to send node data via fetch/ajax. — evolutionxbox
it doenst really matter , in the end it depends on your endpoints. It can also be a totally different folder or server... Example: you can have your frontend App running on localhost:3000 and your Backend on localhost: 3001. Next you can define a proxy in your React App to route all API requests to the backend server. — Michael
@evolutionxbox So basically I just create server.js and include it in package.json? I don't need dependencies specifically for server-side? — Mr. Engineer
@Mr.Engineer you probably will need dependencies for the server, but they can be added to the same project. Or you can have them as two completely separate projects — evolutionxbox

Fide Fide · Accepted Answer · 2021-03-04T12:29:01

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

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.

Add Node.js backend to React project?

1 Answers