React component events not working on NodeJs+Express server

Question

we are building a project using the MERN stack for the first time. It is a Stand-ups and Retros app. The problem is that our react component events are not working on the server side but work perfectly on the client side. Basically we are able to serve a static page using React but not a dynamically one which updates and saves the state when using Node & Express as our server. Any help to fix this block is much appreciated.

We have initialised our project with react-app. Our package.json looks like this: { "name": "standup", "version": "0.1.0", "private": true, "devDependencies": { "babel-cli": "^6.22.2", "babel-core": "^6.22.1", "ejs": "^2.5.5", "express-react-engine": "^0.6.0", "express-react-views": "^0.10.2", "http-server": "^0.9.0", "mocha": "^3.2.0", "react-router": "^3.0.2", "react-scripts": "0.8.5", "should": "^11.2.0", "supertest": "^3.0.0" }, "dependencies": { "body-parser": "^1.16.0", "express": "^4.14.1", "react": "^15.4.2", "react-addons-test-utils": "^15.4.2", "react-dom": "^15.4.2" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } } When we run npm start and visit localhost:3000 we get this view which is dynamically updated: client side rendering screenshot

When we open the node server using nodemon --exec babel-node --presets 'react,es2015' src/server.js none of the buttons work.

The only noticeable difference in the Network tab is the Bundle.js. Which is not loaded on the server side.

This is our Express server:
import path from 'path';
import {Server} from 'http';
import Express from 'express'
import React from 'react';
import { renderToString } from 'react-dom/server';
import HomePage from './components/HomePage'
import RetroPage from './components/RetroPage'
import StandupPage from './components/StandupPage'


const app = new Express();
const server = new Server(app);

app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));
console.log(path)

app.use(Express.static(path.join(__dirname, 'public')));

app.get('/', (req, res) => {
  let markup = renderToString(<HomePage />)
  res.render('index', {markup});
});

app.get('/standup', (req, res) => {
  let markup = renderToString(<StandupPage/>)
  res.render('index', {markup})
})

app.get('/retro', (req, res) => {
  let markup = renderToString(<RetroPage/>)
  res.send(markup);
})

const port = process.env.PORT || 3000;
const env = process.env.NODE_ENV || 'production';
server.listen(port, err => {
  if (err) {
    return console.error(err);
  }
  console.info(`Server running on http://localhost:${port} [${env}]`);
})

I am not showing the React components here because we know they are working fine for the client side.

We believe that we are missing something in the Express routing, when we send the requests but can't put the finger on it.

Thank you!

Answer 1

Your server-rendered views are, like you said, STATIC-- pure markup, just text. That's what renderToString does. These pages still need to incorporate JS on the client side in order to handle events.

Another way around that is to write all of the code inside your event handlers directly into the prop as an anonymous function. This is bad practice.

Answer 2

Thank you for your feedback guys. We really appreciate it.

We analysed your answers and took them into consideration.

But with the help of our coach Mary, we realised that we weren't requiring our Javascript code in our view template, index.ejs on the server side.

An easy error that we omitted because when you render on the client side with React using index.html, you don't need to include a <script> tag with all your Javascript code.

So we installed Webpack to bundle our modules that were compiled with Babel because we are using the latest ES6 syntax. May the gods of code forgive us for this mistake :) but it's the first time when we are doing a project of this complexity with a totally new technology stack like MERN plus several other middleware and libraries.

I guess Rails is totally opinionated but NodeJs + ExpressJs... let's just say it's a fun one :)

Plus since the initial post, that was 2 days ago, we implemented a few more technologies like Websockets and added MongoDB as our database, so now our code is more complex. And I almost forgot, we also deployed our app on Heroku(I'll put the link when it's finished on Friday the 10th of February.

I will post the Github repo once the project is over. It's a cool Standups and Retros app :) Now we are even speaking about Flux.

Is this a new architecture that will replace the MVC legend, at least in some instances and in some companies such as Facebook?

I guess we'll see!