How to Combine React/Redux and Node/Express

How to Combine React/Redux and Node/Express
0.0 0

#1

Hello campers,

I try to develop React-Apps with node.js as backend to fetch and store data from database, but I don’t know kow to combine this to technologies.
I have understand how to create React-Redux-Applications and I had look into Node and Express but I have no Idea how to combine this two… When I look into some tutorials 2/3 is just webpack configuration - thats the reason why I love the npm package create-react-app is there somethink compareable for react-express?

Have someone some good resources to lern from?

I found a good playlist and a second one too. But this two tutorials are so differant that I don’t know which one is the right/better way.


#2

Good question! Here are a couple similar threads that may help:



I haven’t done a lot with React, but @P1xt is pretty much the resource god of the forums, I am sure she would have an idea. Also, I know that @JacksonBates, @PortableStick, and @jenovs have been working a lot on a full-stack app, they might have some help for you. Good luck!


#4

For the voting app I am attempting (with @ankur1163) to do this.
More details to follow if we get it working!


#5

It’s been a while since I’ve looked at Node/Express, but in general terms your Node API will publish routes, and serve your front-end. Your front-end consumes the API by sending HTTP requests to your API’s routes.

In your Express server you might have:

// CONFIGURATION  =====================================
app.use(express.static(__dirname + '/public'));     // set static files loc
app.use(bodyParser.urlencoded({ 'extended' : 'true' }));
app.use(bodyParser.json());
app.use(bodyParser.json({ type: 'application/vnd.api+json' }));
app.use(methodOverride());

// ROUTES =============================================
require('./app/routes')(app);

Where /public contains your all front-end files, and /app/routes.js defines and exports all your API routes.

Your routes will include a public route that serves the front-end:

// application routes --------------------------------
app.get('*', function (req, res) {
  // load the front-end (react / angular / etc handles page changes)
  res.sendFile(path.join(__dirname, '/public/index.html'));
});

#6

Scotch.io has some good resources / tutorials on Node and Express:


#8

what if, I am using webpack?


#9

You point the static file path to your compiled build folder’s index. For example:

res.status(200)
   .sendFile(path.join(__dirname, '../client/build/index.html'));
}

#10

Stephen Grider advices this:

Put the create react app folder inside the project so those are in the root: models, config, middlewares, routes, etc, “client”. This client folder is the create-react-app. or any custom name.

Say you have webpack on 3000
And express on 5000

To connect them, put this in the client package.json:
“proxy”: “http://localhost:5000” ,

Now, requests wont go to the webpack server, but to express
Beware, that you now have 2 package.json files in the project.
With this structure, you have HMR on the front end and with nodemon also on the back-end. Works great.


#11

Very generalized steps I use.
(1) Create and test Express Server side Api , serving all CRUD requests (add db comunication here if needed)
(2) Create and test Client side , all the way from creating the redux store, to all the required react components and establishing communication between the components and the store
(3) Incorporate component routes on client side using react-router
(4) Use axios to establish communication between client and server Api while using redux-thunk to intercept async dispatch action to after response promise from the API, which will use the axios response to send back to the reducer to update the store state.

Each of these of course can be innumerably expanded on, but generally has worked for my first full stack project and I intend on using these steps for the remaining projects. The 4th step is the most confusing to understand, especially redux-thunk middleware and warrants a lot of googling.


#12

My friend I have a little question. That is great. But how can ı deploy that app to digital ocean? It does not work. I removed the block on 5000 port and wrote a node.js file sed the node app. I to send a hello world message to react front end. In front end I have used a constructor. Locally ıt work like your app completely. But ıt does not work on digital ocean. I monetized the node app. I fixed the nginx settings. Everything is ready but ıt does not work :slight_smile: https://github.com/omermindivanli/visioncenter.se I will be waiting your help


#13

I achieved this with different routes for the api and client front end.
Is there any node/express code you need to send to the client other than api requests?
The other thing you can do is deploy the client code separately from the server code (to 2 different locations)