npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

universal-redux-render

v4.0.5

Published

A universal redux renderer (ES6, Webpack, Express)

Downloads

8

Readme

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 npm@3 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.