universal-redux
Advanced tools
Universal Redux is an npm package that when used as a dependency in your project provides a universal (isomorphic) rendering server. You can either use its defaults and begin coding your project, or configure it to your liking with custom Webpack options and Express or Redux middleware. It's intended as both an easy starting point for developers new to React and Redux, as well as an extensible base by which advanced developers can augment with their own middleware and keep up to date with the fast-moving React ecosystem.
Your project must define a set of routes as specified by a React Router configuration, but other than that, your folder structure and development path is up to you. Depending on your other dependencies, you may want to use a version of Universal Redux that is not the latest, using the section below to decide.
Node.JS >= 4.1.1 and npm >= 3 are strongly recommended. If you are using npm 2, note that you may need to add additional dependencies yourself.
npm install --save universal-redux
Add a configuration file in your project at config/universal-redux.config.js that defines what properties you want to customize. You can start by copying the annotated example.
The following npm bin aliases have been defined:
universal-redux-dev
universal-redux-watch
universal-redux-server
universal-redux-build
You'll generally call these from the corresponding section of your project's scripts. See package.json in the example project.
Generally kept in src/routes.js, this is where you define what routes map to what views. See routes.js in the example project.
The npm module also exposes a few ways of integrating your code with that of the module.
Any items specified in the webpack.config of your configuration will be merged with the default Webpack configuration. You may also turn on verbose mode to see the exact Webpack configuration you are running.
You can add your own Express middleware like so:
import universal from 'universal-redux';
import config from '../config/universal-redux.config.js';
const app = universal.app();
// add some middleware
// add some more middleware
universal.setup(config);
universal.start();
Alternatively, you may pass your own Express instance as a parameter when calling universal.app().
You can activate your own Redux middleware by specifying the middleware property in the configuration file. This must be a path to a file which exports each middleware as a function. On serverside renders, those functions will be called with two parameters: the Express request and response objects. On clientside renders, they will be called with none. All properties specified in globals will be available to the middleware.
You can specify htmlShell: '/path/to/your/Html.js' in your configuration and this will be used instead of the default one. This allows you to add your own additions to <head> as well as third party <script> tags such as for metrics tracking.
You can add or override the default webpack-isomorphic-tools configuration, by providing a toolsConfigPath value to your config.js.
Peer dependencies for each version:
"react": "^0.14.3",
"react-dom": "^0.14.3",
"react-router": "^1.0.0",
"redux-router": "^1.0.0-beta4"
"react": "^0.14.3",
"react-dom": "^0.14.3",
"react-router": "^1.0.0",
"redux-simple-router": "^1.0.1"
Still being discussed here.
If you'd like to develop on Universal Redux, clone the repo and while testing with a project that uses it, you can run PROJECT_PATH=/path/to/project npm run dev from the Universal Redux root, which will watch for changes and copy them over to your project's node_modules/universal-redux/lib directory. If any of your changes add dependencies, you will need to copy those over manually.
This project forked off of react-redux-universal-hot-example. Please refer to the README there for more details and join the discussion at the pull request.
FAQs
A universal redux renderer (ES6, Webpack, Express)
The npm package universal-redux receives a total of 3 weekly downloads. As such, universal-redux popularity was classified as not popular.
We found that universal-redux demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
TC39 met in Seattle and advanced 9 JavaScript proposals, including three to Stage 4, introducing new features and enhancements for a future ECMAScript release.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.