An npm package that lets you jump right into coding React and Redux with universal (isomorphic) rendering. Only manage Express setups or Webpack configurations if you want to.

Overview

Universal Redux

npm version build status Dependency Status devDependency Status Demo on Heroku Discord

What and Why

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.

Getting Started

The quickest way to get started is to clone the starter project. This gives you a base project that is set up with default configurations of Webpack and Express.

Other Examples

Usage

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.

Requirements

Node.JS >= 4.1.1 npm >= 3.3.12 (install via npm install -g [email protected] if you are on Node 4)

Install

npm install --save universal-redux

Customization

The configuration file in your project at config/universal-redux.config.js defines what properties you want to customize. You can start by copying the annotated example. The configuration file is optional and is only necessary if you wish to modify default behavior.

Routes

Generally kept in src/routes.js, this is where you define what routes map to what views. See routes.js in the example project.

Webpack configuration

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.

Express middleware

You can add Express middleware by creating your own server.js like so:

import { express, renderer, start } from 'universal-redux';
import config from '../config/universal-redux.config.js';

const app = express(config);

// app.use(someMiddleware);
// app.use(someOtherMiddleware);

app.use(renderer(config));
start(app, config);

You will need to run this server.js instead of calling the default universal-redux-server.

Alternatively, you may create your own Express instance, add middleware beforehand and pass that instance as parameter when calling universal.app(app).

Redux middleware

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. All properties specified in globals will be available to the middleware.

Adding your own items to HTML head

The html.head configuration allows you to define your own <head> that will be merged with the necessary items for serverside rendering. You can see an example of this in the JWT project here.

Alternatively, you can specify html.root in your configuration and this will be used instead of the default one. If you do take that approach, you'll want to be sure to include the items from src/server/head.js and src/server/body.js.

Webpack Isomorphic Tools configuration

You can add or override the default webpack-isomorphic-tools configuration, by providing a toolsConfigPath value to your config.js.

Scripts

The following npm bin aliases have been defined:

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.

What version to use

Peer dependencies for each version:

0.x

Babel 5, Redux Router

"react": "^0.14.3",
"react-dom": "^0.14.3",
"react-router": "^1.0.0",
"redux-router": "^1.0.0-beta4"

1.x

Babel 5, Redux Simple Router

"react": "^0.14.3",
"react-dom": "^0.14.3",
"react-router": "^1.0.0",
"redux-simple-router": "^1.0.1"

2.x

Babel 6, Redux Simple Router

"react": "^0.14.3",
"react-dom": "^0.14.3",
"react-router": "^1.0.0",
"redux-simple-router": "^1.0.1"

3.x

Babel 6, React Router 2, React Router Redux 3 (Redux Simple Router renamed) is available but optional.

"react": "^0.14.3",
"react-dom": "^0.14.3",
"react-router": "^2.0.0-rc4",

4.x

Babel 6, React Router 2, React Router Redux 3 (Redux Simple Router renamed) is available but optional.

"react": "^15.0.0",
"react-dom": "^15.0.0",
"react-router": "^2.0.0",

Local development

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.

Inspirations

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.

Comments
  • how to setting universal-redux.config.js

    how to setting universal-redux.config.js

    excuse me, I git clone https://github.com/bdefore/universal-redux-starter

    to setting config/universal-redux.config.js https://github.com/bdefore/universal-redux/blob/master/config%2Funiversal-redux.config.js

    I modify it some attributes(head, body ... etc), and I npm run dev

    but it's not change anything. so how can I do something?

    Thanks!

    opened by sexyoung 18
  • Redux middleware SSR access to request and response for setting cookies

    Redux middleware SSR access to request and response for setting cookies

    Greetings,

    I have problem with setting cookies in ApiFetcher class with something like this

            // req is incoming express request
            // request is to be sent to api superagent request
            if (__SERVER__ && req.get('cookie')) {
               request.set('cookie', req.get('cookie'));
            }
    

    https://github.com/bdefore/universal-redux#redux-middleware says that

    On server side renders, those functions will be called with two parameters: the Express request and response objects.

    But I can't find a way to access those objects. Do you have any clue how should I access them?

    Thank you, Marijan

    opened by msvalina 16
  • Vendor/common-chunks configuration?

    Vendor/common-chunks configuration?

    I'd like to split JS into "vendor" and "app", so that webpack doesn't have to keep writing a 4MB inline-source-mapped monstrosity every time it needs to put out a 7kb hot-loader chunk. Should I just configure the webpack piece to do exactly that? My assumption is that that will break some internal configuration of universal-redux, but I figured I'd talk about this before diving in and trying it out.

    opened by dts 16
  • feat: add support for customizing root components

    feat: add support for customizing root components

    This PR adds support for customizing the rendering of the root components. It works by defining a rootComponent path in the config file which points to a file that defines functions for rendering the server/client root components. I think it takes care of bdefore/universal-redux#48 but I'm not familiar enough with Relay/Falcor to be sure.

    For now the rootComponent.js included in this PR does not support any form of async loading. It would be easy to update it to use Rezonans/redux-async-connect if you want to support async loading by default. Let me know if that's something you would like me to do.

    If you are curious, here is a gist for a custom async loading solution that fits my need but I'm not suggesting we use it by default.

    Please let me know what you think!

    opened by aam229 15
  • Feature/separate dev deps

    Feature/separate dev deps

    Here is a proposed solution for #2. I am not sure how well this will work on [email protected]

    Just noticed it is on the old 0.x branch. If you want to move forward with this solution, I can merge into the other branches as well.

    npm install --production
    ls node_modules
    babel                  compression            file-loader            lodash                 query-string           react-document-meta    react-router           redux-router
    babel-plugin-typecheck express                history                pretty-error           react                  react-dom              redux
    
    
    NODE_ENV=production npm install
    ls node_modules
    babel                  compression            file-loader            lodash                 query-string           react-document-meta    react-router           redux-router
    babel-plugin-typecheck express                history                pretty-error           react                  react-dom              redux
    
    
    npm install
    ls node_modules
    autoprefixer-loader          compression                  history                      mocha                        react-transform-catch-errors serve-favicon
    babel                        css-loader                   json-loader                  node-sass                    react-transform-hmr          strip-loader
    babel-core                   eslint                       karma                        phantomjs                    redbox-react                 style-loader
    babel-eslint                 eslint-config-airbnb         karma-cli                    phantomjs-polyfill           redux                        url-loader
    babel-loader                 eslint-loader                karma-mocha                  pretty-error                 redux-devtools               webpack
    babel-plugin-react-transform eslint-plugin-import         karma-mocha-reporter         query-string                 redux-devtools-dock-monitor  webpack-config-merger
    babel-plugin-typecheck       eslint-plugin-react          karma-phantomjs-launcher     react                        redux-devtools-log-monitor   webpack-dev-middleware
    babel-runtime                express                      karma-sourcemap-loader       react-addons-test-utils      redux-logger                 webpack-error-notification
    bootstrap-sass               extract-text-webpack-plugin  karma-webpack                react-document-meta          redux-router                 webpack-hot-middleware
    bootstrap-sass-loader        file-loader                  less                         react-dom                    sass-loader                  webpack-isomorphic-tools
    chai                         font-awesome                 less-loader                  react-redux                  scroll-behavior
    clean-webpack-plugin         font-awesome-webpack         lodash                       react-router                 serialize-javascript
    
    opened by chrisblossom 15
  • Plugins

    Plugins

    Add a plugin system based on hooks. Right now it only support customizing the rendering of the server/client root components but it would be easy to add support for other hooks. You can find a few examples for plugins here

    Please see the following issues for more information:

    • bdefore/universal-redux#56
    • bdefore/universal-redux#57

    Please let me know what you think.

    opened by aam229 11
  • Custom rootComponents in rc28

    Custom rootComponents in rc28

    I was using a custom rootComponent, but it looks like that feature was modified in rc28.

    Would you provide an example of how they should be specified in the configuration file?

    Thanks!

    opened by jazzido 10
  • koa support

    koa support

    With the latest changes, the serverside rendering has been extracted out of src/server and now returns a formal Express middleware. If anyone is koa-inclined, all it would take is a rewrite of this to be koa friendly middleware: https://github.com/bdefore/universal-redux/blob/master/src/server/renderer.js

    enhancement help wanted 
    opened by bdefore 10
  • suggestions for 3.x

    suggestions for 3.x

    @indb has suggested looking at:

    • koa
    • Radium (inline styles)

    I'm not sure if Radium will make it for this release, but in regards to Koa, I am interested in exploring the following plan for supporting it:

    • allow universal.app() to accept an instance of Koa (as it currently does with an Express instance)
    • breaks off serverside rendering into a new library which universal-redux-server will use
    • internal to universal-redux-server, detect Express or Koa and do what's expected based on what's returned from this new library

    Thoughts?

    opened by bdefore 10
  • Permissions issue with npm run dev on OSX

    Permissions issue with npm run dev on OSX

    Just did a vanilla install of https://github.com/bdefore/react-redux-universal-hot-example/tree/example-project-simple-router on OSX. I ran into a permissions issue, and also maybe the cp command not working as expected based on the "usage" output below. Running 'npm run dev' with sudo gets farther but still outputs the "usage" message, and seems to hang at some point. Please let me know if I'm doing anything obviously wrong here.

    I'm at node version 5.2.0, npm version 3.3.12.

    git clone https://github.com/bdefore/react-redux-universal-hot-example/tree/example-project-simple-router
    cd react-redux-universal-hot-example
    npm install
    (error about missing peers: history at 1.13.x and url-loader at x)
    npm install url-loader (success)
    npm install [email protected] (success)
    
    npm run dev
    
    cp bin/* $PROJECT_PATH/node_modules/redux-universal-starter/bin/; cp config/* $PROJECT_PATH/node_modules/redux-universal-starter/config/; babel src/ -w -d $PROJECT_PATH/node_modules/redux-universal-starter/lib
    
    usage: cp [-R [-H | -L | -P]] [-fi | -n] [-apvX] source_file target_file
           cp [-R [-H | -L | -P]] [-fi | -n] [-apvX] source_file ... target_directory
    usage: cp [-R [-H | -L | -P]] [-fi | -n] [-apvX] source_file target_file
           cp [-R [-H | -L | -P]] [-fi | -n] [-apvX] source_file ... target_directory
    Error: EACCES: permission denied, mkdir '/node_modules'
    
    opened by adailey14 10
  • [webpack-isomorphic-tools] asset not found

    [webpack-isomorphic-tools] asset not found

    After upgrading to 3.0.1 and applying the changes described in https://github.com/bdefore/universal-redux/issues/78#issuecomment-187944363, I got these errors in the dev server console:

    [1] [webpack-isomorphic-tools] [error] asset not found: ./src/components/Tooltip/Tooltip.scss
    [1] [webpack-isomorphic-tools] [error] asset not found: ./src/scss/main.scss
    [1] [webpack-isomorphic-tools] [error] asset not found: ./src/components/charts/Legend/Legend.scss
    [1] [webpack-isomorphic-tools] [error] asset not found: ./src/components/charts/VegaTreemapChart.scss
    [1] [webpack-isomorphic-tools] [error] asset not found: ./src/containers/AggregationView/AggregationView.scss
    // ...edited
    

    Also, the assets key in node_modules/universal-redux/webpack-assets.json is empty. I suspect a projectRoot issue.

    Thanks again!

    opened by jazzido 9
Owner
Buck DeFore
Buck DeFore
A starter boilerplate for a universal webapp using express, react, redux, webpack, and react-transform

React Redux Universal Hot Example About This is a starter boilerplate app I've put together using the following technologies: Isomorphic Universal ren

Erik Rasmussen 12.1k Oct 6, 2022
A universal Javascript starter kit inc. React, Redux, Redux Dev Tools, Universal Redux Router, CSS Modules, hot module reloading, Babel for ES2015+ and ESLint

UniversalJS A universal Javascript starter kit inc. React, Redux, Redux Dev Tools, Universal Redux Router, CSS Modules, hot module reloading, Babel fo

Colin Meinke 65 Jul 1, 2020
Redux app demonstrating isomorphic rendering and routing (with redux-devtools).

Isomorphic Redux App This project serves as a simple boilerplate to start building an isomorphic rendering application in React and Redux. Features As

Callum Rimmer 385 Jul 12, 2022
Boilerplate for react universal (isomorphic) application based on flux architecture (redux implementation)

Redux universal boilerplate Boilerplate for react universal application building on flux architecture based on redux implementation. Boilerplate based

Sergey 73 Mar 30, 2022
React Redux Isomorphic Webpack 2 Boilerplate based on ant.design

React Redux Isomorphic Webpack 2 Boilerplate based on ant.design About This boilerplate has following feature: Universal React rendering Webpack 2 for

Suben K. Saha 18 Mar 29, 2022
This project serves as a simple boilerplate to start building an isomorphic rendering application in React and Redux.

Isomorphic Redux App This project serves as a simple boilerplate to start building an isomorphic rendering application in React and Redux. # Features

Anton Izmailov 33 May 15, 2019
Setup-npm - NPM Setup Instructions

setup-npm Quando trabalhamos com NodeJS, e ao criarmos um novo projeto, existe s

Eduardo Policarpo 3 Sep 8, 2022
🚀 A boilerplate with generic configurations to a Nextjs project with bun, vitest, cicd and etc

?? A boilerplate with generic configurations to a Nextjs project with bun, vitest, cicd and etc

Rodrigo Victor 7 Sep 25, 2022
⚛️ Boilerplate for isomorphic web app with React server-side rendering in TypeScript

react-server-example-tsx A complex example of how to do server-side rendering with React and TypeScript so that component code can be shared between s

Steven 271 Sep 23, 2022
A universal boilerplate for building web applications w/ TypeScript, React, Redux, Server Side Rendering and more.

Vortigern Vortigern is our opinionated boilerplate for crafting universal web applications by using modern technologies like TypeScript, React and Red

Barbar Startup Factory 642 Sep 6, 2022
Jump from the HTML element to the source code of the generator

tsx-source-jump Jump from the HTML element to the source code of the generator.

Kotaro Chikuba 41 May 12, 2022
an npm package for displaying and direct updating state for prototypes on React

React state-control A bunch of lightweight components for updating the model stored in React's stateful components for fast prototyping. Complete libr

Alexander Demin 1 May 7, 2022
An example universal JS application written with the 3REE stack, React + Redux + RethinkDB + Express.

An example universal JS application written with the 3REE stack, React + Redux + RethinkDB + Express. A stack for building apps, front and back end, with just Javascript.

Gordon Dent 857 Aug 28, 2022
Fyodor Simonov 3 Apr 15, 2022
React-Typescript-Webpack was config with React, Typescript, and Webpack without CRA. Faster to start your next react project.

Start your react typescript project with manual webpack config in seconds Flexible to control webpack, easy to deploy Keywords: React Starter, Webpack

jdn97 58 Aug 9, 2022
A boilerplate of SPA, built with React.js, Webpack, ES6+, Redux, Router, Babel, Express, Ant Design...

Getting start Clone this repo: $ git clone https://github.com/jovey-zheng/react-start-kit.git Install dependenices: $ npm i Start the project: $ npm

Jovey Zheng 109 Mar 1, 2022
Large SPA boilerplate use react redux webpack babel es6 express browsync nodemon...

React-workflow Why Large SPA application is hard to design, because a lot of things need to consider The boilerplate had solved the difficulty for

云霜儿 66 Mar 27, 2021
Large SPA boilerplate use react redux webpack babel es6 express browsync nodemon...

React-workflow Why Large SPA application is hard to design, because a lot of things need to consider The boilerplate had solved the difficulty for

云霜儿 66 Mar 27, 2021
Universal rendering for Preact: render JSX and Preact components to HTML.

preact-render-to-string Render JSX and Preact components to an HTML string. Works in Node & the browser, making it useful for universal/isomorphic ren

Preact 495 Sep 28, 2022