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
– evolutionxbox, Commented Mar 4, 2021 at 12:06
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
– evolutionxbox, Commented Mar 4, 2021 at 12:07
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
– Michael, Commented Mar 4, 2021 at 12:07
@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, Commented Mar 4, 2021 at 12:19
@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
– evolutionxbox, Commented Mar 4, 2021 at 12:36

Fide · Accepted Answer · 2021-03-04 13:28:03Z

2

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.

edited Mar 4, 2021 at 13:28

answered Mar 4, 2021 at 12:29

Fide

1,1978 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Mr. Engineer Over a year ago

Is that a package.json file where that configuration code is located?

Fide Over a year ago

No, webpack.js - I have one for development and one for production.

Mr. Engineer Over a year ago

node_modules/webpack/bin/webpack.js ? That doesn't look like a configuration file on my Windows machine...

Fide Over a year ago

I have added my folder structure to my answer with description.

Mr. Engineer Over a year ago

Thanks, I assume that contents of /server are automatically generated (modules and such). How do you do that?

|

Collectives™ on Stack Overflow

Add Node.js backend to React project?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related