How to use react-redux-universal-hot-example: setup and tutorial

Is react-redux-universal-hot-example still safe to use?

The README begins with the warning "DO NOT USE THIS!!" and describes the repo as a historical artifact of React development in 2015. The author says it is far out of date.

This makes it a good study project rather than a foundation for a new app. For new work, current tools such as Vite, Next.js, Create React App or Remix are better fits, according to the comparison list for this project.

• Good for: students studying a 2015-era React and Redux structure
• Good for: readers interested in the history of server-rendered JavaScript apps
• Not good for: new projects, teams needing security updates, or beginners wanting a modern starting point

What do you need before installing?

The install method is clone-and-build. The prerequisites listed for this project are Node.js and npm.

• Node.js
• npm

Install dependencies and run the development server

After getting the project code, install its dependencies with npm, then start the dev server. The README notes that the first run can take a while, with several webpack-isomorphic-tools messages, and suggests waiting around 30 seconds.

Redux DevTools are enabled by default in development. To turn them off during development, set __DEVTOOLS__ to false in /webpack/dev.config.js. They are not enabled in production.

• Dock toggle: CTRL+H
• Move dock position: CTRL+Q
• The Redux DevTools Chrome extension is used on the client side if installed

Build and run the production server

To produce a production build and start the production server, run the two commands below in order. The README lists these as the build and start steps.

How the server and client work together

bin/server.js enables ES6 and ES7 syntax on the server and then starts server.js. server.js proxies requests to /api/* to an API server at localhost:3030, serves favicon and static files from /static, and delegates rendering to react-router. It listens on port 3000.

The server creates an ApiClient, which both server and client use to talk to the API. On the server it passes the session cookie along. The server then fetches data, renders the page, and writes the Redux state to window.__data. The client entry point client.js loads the routes, rehydrates that state and renders over the server-rendered DOM.

Server-side data fetching uses the redux-async-connect package, which provides a ReduxAsyncConnect container that wraps the render tree on both server and client.

• bin/server.js: enables ES6 and ES7 syntax, then starts server.js
• server.js: proxies /api/*, serves /static, renders with react-router
• client.js: loads routes, rehydrates Redux state, renders over server DOM

What libraries does the project include?

The README lists the main libraries. These include React, React Router, Express, Babel, Webpack, Redux, Redux DevTools, ESLint, redux-form, react-helmet, webpack-isomorphic-tools and mocha for unit tests.

The author describes the stack as bleeding edge at the time of writing in June 2015. Treat the version of every library as historical rather than current.

• React and React Router for pages and routing
• Redux with React Router Redux bindings for state
• Express and Webpack for the server and bundling
• ESLint for code style, mocha for unit tests

Where to read the code and docs next

The repository includes documentation guides, including Exploring the Demo App, Installing the Kit, Adding Text to the Home Page and Adding A Page. A demo is listed as running on Heroku from the heroku branch.

• docs/ExploringTheDemoApp/ExploringTheDemoApp.md
• docs/InstallingTheKit/InstallingTheKit.md
• docs/AddingToHomePage/AddingToHomePage.md
• docs/AddingAPage/AddingAPage.md