Server-side backup create-react-app

Question

Server-side backup create-react-app

I am trying to achieve server side rendering with my create-react-app project. I really don't need routes because it is a one-page application. I look through some articles, but they seem to me rather complicated. Can someone let me know how to do this, or link me to simpler articles?

Here is the code so far: -

The main component of the application that imports other components: -

import React, { Component } from "react";
import HomePage from "./HomePage";
import "./App.css";

class App extends Component {

  render() {
    return(
      <div>
        <HomePage/>
      </div>
    );
  }
}

export default App;

Express code so far: -

import express from "express";
import React from "react";
import { renderToString } from "react-dom/server";
import App from "../src/App";

const app = express();

app.use(express.static("../public"));

app.get('*', (req, res) => {
    res.send(`
        <!DOCTYPE html>
        <head>
            <title>Universal React</title>
        </head>
        <body>
            <div id="root">${renderToString(<App/>)}</div>
        </body>
        </html>
    `);
});

app.listen(3000, () => {
    console.log('Server running on PORT 3000');
})

All the articles or videos that I have checked so far use webpack and make changes to the webpack.config.js file, but I use the Create-react-app application that comes with the web package turned on, there is no configuration file, so I'm a little confused about how to make the necessary changes?

0

reactjs express serverside-rendering

Manav Saxena 22 . '17 8:58

2

BE KNOW DO · Answer 1 · 2017-09-15T01:00:22+0000

eject project/scripts/webpack

, response-router/redux

Konstantin Tarkus · Answer 2 · 2018-02-18T11:44:47+0000

react-scripts react-app-tools
NPM package.json react-app build, react-app start
src/index.js src/app.browser.js, src/app.node.js

.
├── /build/                     # Compiled output
│   ├── /public/                # Pre-compiled client-side app
│   └── server.js               # Pre-compiled Node.js app
├── /src/                       # Application source files
│   ├── /components/            # React.js components
│   │   ├── /App/               #   - The top-level React component
│   │   ├── /Button/            #   - Some other UI element
│   │   └── ...                 #   - etc.
│   ├── app.browser.js          # Client-side rendering, e.g. ReactDOM.render(<App />, container)
│   ├── app.node.js             # Server-side rendering, e.g. ReactDOMServer.renderToString(<App />)
│   └── server.js               # Server-side entiry point, e.g. app.listen(process.env.PORT)
└── package.json                # List of project dependencies and NPM scripts

`src/app.browser.js`

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

ReactDOM.hydrate(<App />, document.getElementById('root'));

`src/app.node.js`

import path from 'path';
import express from 'express';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import App from './components/App';

const app = express();

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

app.get('*', (req, res) => {
  res.send(ReactDOMServer.renderToString(<App />));
});

export default app;

`package.json`

{
  "dependencies": {
    "express": "^4.6.12",
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  },
  {
    "react-app-tools": "^2.0.0-beta.5"
  },
  "scripts": {
    "test": "react-app test --env=jsdom",
    "build": "react-app build",
    "start": "react-app start"
  }
}

: https://github.com/kriasoft/react-app

Server-side backup create-react-app

src/app.browser.js

src/app.node.js

package.json

More articles:

`src/app.browser.js`

`src/app.node.js`

`package.json`