How to Render a React App Using an Express Server in Node.js?

Question

what i want to achieve is that i want to make a post request to the node server, and then extract the body from the post request then i want to render my react app (which contains routing) with the body i have extracted from the post request

i am using the following code in the server i created in my react app

import express from "express";
import fs from "fs";
import path from "path";

import React from "react";
import ReactDOMServer from "react-dom/server";

import App from "../src/App";
//import sasa from "../build/index.html"

const PORT = 8000;

const app = express();

app.use("^/$", (req, res, next) => {
  fs.readFile(path.join(__dirname, "..", "build", "index.html"), "utf-8", (err, data) => {
    if (err) {
      console.log(err);
      return res.status(500).send("Some error happened");
    }
    return res.send(
      data.replace(
        '<div id="root"></div>',
        `<div id="root">${ReactDOMServer.renderToString(<App />)}</div>`
      )
    );
  });
});

app.use(express.static(path.resolve(__dirname, '..', 'build')))

app.listen(PORT, () => {
  console.log(`App launched on ${PORT}`);
});

and it gives me the following error

Error: Invariant failed: Browser history needs a DOM
    at invariant (D:\finja\first2\node_modules\tiny-invariant\dist\tiny-invariant.cjs.js:13:11)
    at Object.createHistory [as createBrowserHistory] (D:\finja\first2\node_modules\history\cjs\history.js:273:16)
    at new BrowserRouter (D:\finja\first2\node_modules\react-router-dom\modules\BrowserRouter.js:11:13)
    at processChild (D:\finja\first2\node_modules\react-dom\cjs\react-dom-server.node.development.js:3305:14)
    at resolve (D:\finja\first2\node_modules\react-dom\cjs\react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (D:\finja\first2\node_modules\react-dom\cjs\react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (D:\finja\first2\node_modules\react-dom\cjs\react-dom-server.node.development.js:3690:29)
    at Object.renderToString (D:\finja\first2\node_modules\react-dom\cjs\react-dom-server.node.development.js:4298:27)
    at D:\finja\first2\server\/server.js:24:42
    at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3)
[nodemon] app crashed - waiting for file changes before starting...

Does this answer your question? [react-router 4 - Browser history needs a DOM](https://stackoverflow.com/questions/43058684/react-router-4-browser-history-needs-a-dom) — Asik, Jul 29 '21 at 14:14

score 0 · Answer 1 · answered Jul 29 '21 at 13:54

as your error code suggests needs a DOM, you'll need a Browser in order to use react, you cant just send a dynamic component like <App/> back, this approach would only work with something static like a plain html file.

I suggest serving React from another server (like localhost:3000), this tut might help you with that:

https://www.youtube.com/watch?v=19CcxzZHwuI

score 0 · Answer 2 · answered Jul 29 '21 at 14:07

0

This detailed post about integrating express with React by freecodecamp might help link

answered Jul 29 '21 at 14:07

Mohammad Farseen

75
1
2
8

How to Render a React App Using an Express Server in Node.js?

2 Answers2