Skip to content

Commit bdb604a

Browse files
committed
update readme
1 parent 361b1b4 commit bdb604a

1 file changed

Lines changed: 55 additions & 46 deletions

File tree

README.md

Lines changed: 55 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
12
# React Redux Universal Hot Example
23

34
[![Build Status](https://travis-ci.org/bertho-zero/react-redux-universal-hot-example.svg?branch=master&style=flat-square)](https://travis-ci.org/bertho-zero/react-redux-universal-hot-example)
@@ -16,7 +17,7 @@ This is a starter boilerplate app I've put together using the following technolo
1617
* [React Router](https://github.com/reactjs/react-router)
1718
* [Express](http://expressjs.com)
1819
* [Feathers](http://feathersjs.com/)
19-
* [Passport](http://passportjs.org) for authentication
20+
* [Passport](http://passportjs.org), [feathers-authentication](https://github.com/feathersjs/feathers-authentication) and [redux-auth-wrapper](https://github.com/mjrussell/redux-auth-wrapper) for authentication
2021
* [Babel](http://babeljs.io) for ES6 and ES7 magic
2122
* [Webpack](https://webpack.js.org/) for bundling
2223
* [Webpack Dev Middleware](http://webpack.github.io/docs/webpack-dev-middleware.html)
@@ -25,7 +26,7 @@ This is a starter boilerplate app I've put together using the following technolo
2526
* [Redux Dev Tools](https://github.com/reactjs/redux-devtools) for next generation DX (developer experience). Watch [Dan Abramov's talk](https://www.youtube.com/watch?v=xsSnOQynTHs).
2627
* [React Router Redux](https://github.com/reactjs/react-router-redux) Redux/React Router bindings.
2728
* [ESLint](http://eslint.org) to maintain a consistent code style
28-
* [redux-form](https://github.com/erikras/redux-form) to manage form state in Redux
29+
* [redux-form](http://redux-form.com/) to manage form state in Redux
2930
* [lru-memoize](https://github.com/erikras/lru-memoize) to speed up form validation
3031
* [multireducer](https://github.com/erikras/multireducer) to combine single reducers into one key-based reducer
3132
* [style-loader](https://github.com/webpack/style-loader), [sass-loader](https://github.com/jtangelder/sass-loader) and [less-loader](https://github.com/webpack/less-loader) to allow import of stylesheets in plain css, sass and less,
@@ -36,28 +37,50 @@ This is a starter boilerplate app I've put together using the following technolo
3637

3738
I cobbled this together from a wide variety of similar "starter" repositories. As I post this in June 2015, all of these libraries are right at the bleeding edge of web development. They may fall out of fashion as quickly as they have come into it, but I personally believe that this stack is the future of web development and will survive for several years. I'm building my new projects like this, and I recommend that you do, too.
3839

39-
## Installation
40+
## Features
4041

41-
```bash
42-
npm install
43-
```
42+
<dt>Hot reload</dt>
43+
<dd>Enjoy the developer experience! Your saved changes to the CSS and JS are reflected instantaneously without refreshing the page and preserving application state ! On the server as on the client.</dd>
44+
45+
<dt>Next generation JavaScript</dt>
46+
<dd>Use JSX syntax with all ES6 features, and some of ES7 (see <a href=".babel.rc">.babel.rc</a>).</dd>
47+
48+
<dt>CSS in modules</dt>
49+
<dd>Write composable, modular and maintenable CSS with your components.</dd>
50+
51+
<dt>Predictable state management</dt>
52+
<dd>Unidirectional data flow with Redux helps you write applications that behave consistently and are easy to test. On top of that, it provides a great developer experience.</dd>
53+
54+
<dt>Backend API oriented services</dt>
55+
<dd>With Feathers it's easy to create scalable real-time applications with services and hooks.
56+
<a href="https://en.wikipedia.org/wiki/Cross-cutting_concern">Cross cutting concerns</a> are an extremely powerful part of aspect oriented programming. They are a very good fit for web and mobile applications since the majority are primarily CRUD applications with lots of shared functionality. You can create before and after hooks and chain them together to create very complex processes while still maintaining modularity and flexibility.</dd>
57+
58+
<dt>Authentication</dt>
59+
<dd>Passport authentication allows you to use all the desired strategies. The connections in REST and in real time are protected in the same way with the hooks. React-router, redux and <a href="https://github.com/mjrussell/redux-auth-wrapper">redux-auth-wrapper</a> allow you to keep control in your React app.</dd>
60+
61+
<dt>Progressive wep app & Offline-first</dt>
62+
<dd>Progressive Web Apps are user experiences that have the reach of the web, and are:<br>
63+
Reliable - Load instantly and never show the downasaur, even in uncertain network conditions.<br>
64+
Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling.<br>
65+
Engaging - Feel like a natural app on the device, with an immersive user experience.<br><br>
66+
This new level of quality allows Progressive Web Apps to earn a place on the user's home screen.</dd>
4467

45-
### Database
68+
<dt>Lazy loading & dynamic routing</dt>
69+
<dd>The lazy loading makes the size of your main bundle almost fixed, and with react-router you can load application pieces on demand. You can send bundles to people who are only trained, such as administration.</dd>
4670

47-
#### Mongoose, Sequelize, Waterline and other connectors
71+
<dt>Universal rendering</dt>
72+
<dd>With the help of server side rendering the first rendering is never empty and performance is better. This is the time for example to prefetch the data.
73+
<a href="https://github.com/halt-hammerzeit/webpack-isomorphic-tools">Webpack-isomorphic-tools</a> to allow require() work for statics both on client and server.</dd>
4874

49-
For those who prefer to use Mongoose, Sequelize or others you can remove `feathers-nedb` dependencies, install a Feathers adapter below and configure it with feathers in [api.js](https://github.com/bertho-zero/react-redux-universal-hot-example/blob/master/api/api.js).
50-
And to finish create the schema/model `User` (eg: `/api/database/User.js` or directly in service), and modify [Users service](https://github.com/bertho-zero/react-redux-universal-hot-example/blob/master/api/services/users/index.js) for use your favorite adapter.
75+
<dt>SEO</dt>
76+
<dd>We support SEO for search engines even whithout support indexing of JavaScript content with server side rendering.</dd>
77+
</dl>
5178

52-
- [feathers-memory](https://github.com/feathersjs/feathers-memory)
53-
- [feathers-mongodb](https://github.com/feathersjs/feathers-mongodb)
54-
- [feathers-mongoose](https://github.com/feathersjs/feathers-mongoose)
55-
- [feathers-nedb](https://github.com/feathersjs/feathers-nedb)
56-
- [feathers-rethinkdb](https://github.com/feathersjs/feathers-rethinkdb)
57-
- [feathers-sequelize](https://github.com/feathersjs/feathers-sequelize)
58-
- [feathers-waterline](https://github.com/feathersjs/feathers-waterline)
59-
- [feathers-localstorage](https://github.com/feathersjs/feathers-localstorage) (A client side service based on feathers-memory that persists to LocalStorage)
60-
- ...
79+
## Installation
80+
81+
```bash
82+
npm install
83+
```
6184

6285
## Running Dev Server
6386

@@ -75,11 +98,10 @@ The first time it may take a little while to generate the first `webpack-assets.
7598
- <kbd>CTRL</kbd>+<kbd>Q</kbd> Move DevTools Dock Position
7699
- see [redux-devtools-dock-monitor](https://github.com/gaearon/redux-devtools-dock-monitor) for more detailed information.
77100

78-
If you have the
79-
[Redux DevTools chrome extension](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd) installed it will automatically be used on the client-side instead.
101+
If you have the [Redux DevTools chrome extension](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd) installed it will automatically be used on the client-side instead.
80102

81103
If you want to disable the dev tools during development, set `__DEVTOOLS__` to `false` in `/webpack/dev.config.js`.
82-
DevTools are not enabled during production.
104+
DevTools are not enabled during production by default.
83105

84106
## Building and Running Production Server
85107

@@ -90,29 +112,16 @@ npm run start
90112

91113
## Demo
92114

93-
A demonstration of this app can be seen [running on heroku](https://react-redux.herokuapp.com), which is a deployment of the [heroku branch](https://github.com/erikras/react-redux-universal-hot-example/tree/heroku).
94-
95-
## Documentation
96-
97-
* [Exploring the Demo App](docs/ExploringTheDemoApp/ExploringTheDemoApp.md) is a guide that can be used before you install the kit.
98-
* [Installing the Kit](docs/InstallingTheKit/InstallingTheKit.md) guides you through installation and running the development server locally.
99-
* [Adding Text to the Home Page](docs/AddingToHomePage/AddingToHomePage.md) guides you through adding "Hello, World!" to the home page.
100-
* [Adding A Page](docs/AddingAPage/AddingAPage.md) guides you through adding a new page.
101-
* [React Tutorial - Converting Reflux to Redux](http://engineering.wework.com/process/2015/10/01/react-reflux-to-redux/), by Matt Star
102-
If you are the kind of person that learns best by following along a tutorial, I can recommend Matt Star's overview and examples.
103-
115+
A demonstration of this app can be seen [running on heroku](https://react-hot-example.herokuapp.com/), which is a deployment of the [heroku branch](https://github.com/bertho-zero/react-redux-universal-hot-example/tree/heroku).
104116

105117
## Explanation
106118

107-
What initially gets run is `bin/server.js`, which does little more than enable ES6 and ES7 awesomeness in the
108-
server-side node code. It then initiates `server.js`. In `server.js` we proxy any requests to `/api/*` to the
109-
[API server](#api-server), running at `localhost:3030`. All the data fetching calls from the client go to `/api/*`.
110-
Aside from serving the favicon and static content from `/static`, the only thing `server.js` does is initiate delegate
111-
rendering to `react-router`. At the bottom of `server.js`, we listen to port `3000` and initiate the API server.
119+
What initially gets run is `bin/server.js`, which does little more than enable ES6 and ES7 awesomeness in the server-side node code. It then initiates `server.js`. In `server.js` we proxy any requests to `/api/*` to the API server, running at `localhost:3030`. All the data fetching calls from the client go to `/api/*`. Aside from serving the favicon and static content from `/static`, the only thing `server.js` does is initiate delegate rendering to `react-router`. At the bottom of `server.js`, we listen to port `3000` and initiate the API server.
112120

113121
#### Routing and HTML return
114122

115123
The primary section of `server.js` generates an HTML page with the contents returned by `react-router`. First we instantiate an `ApiClient`, a facade that both server and client code use to talk to the API server. On the server side, `ApiClient` is given the request object so that it can pass along the session cookie to the API server to maintain session state. We pass this API client facade to the `redux` middleware so that the action creators have access to it.
124+
You can also use `app` for RESTful calls to api.
116125

117126
Then we perform [server-side data fetching](#server-side-data-fetching), wait for the data to be loaded, and render the page with the now-fully-loaded `redux` state.
118127

@@ -122,15 +131,15 @@ We also spit out the `redux` state into a global `window.__data` variable in the
122131

123132
#### Server-side Data Fetching
124133

125-
The [redux-connect](https://www.npmjs.com/package/redux-connect) package exposes an API to return promises that need to be fulfilled before a route is rendered. It exposes a `<ReduxAsyncConnect />` container, which wraps our render tree on both [server](https://github.com/erikras/react-redux-universal-hot-example/blob/master/src/server.js) and [client](https://github.com/erikras/react-redux-universal-hot-example/blob/master/src/client.js). More documentation is available on the [redux-connect](https://www.npmjs.com/package/redux-connect) page.
134+
The [redux-connect](https://www.npmjs.com/package/redux-connect) package exposes an API to return promises that need to be fulfilled before a route is rendered. It exposes a `<ReduxAsyncConnect />` container, which wraps our render tree on both [server](https://github.com/bertho-zero/react-redux-universal-hot-example/blob/master/src/server.js) and [client](https://github.com/bertho-zero/react-redux-universal-hot-example/blob/master/src/client.js). More documentation is available on the [redux-connect](https://www.npmjs.com/package/redux-connect) page.
126135

127136
#### Client Side
128137

129138
The client side entry point is reasonably named `client.js`. All it does is load the routes, initiate `react-router`, rehydrate the redux state from the `window.__data` passed in from the server, and render the page over top of the server-rendered DOM. This makes React enable all its event listeners without having to re-render the DOM.
130139

131140
#### Redux Middleware
132141

133-
The middleware, [`clientMiddleware.js`](https://github.com/erikras/react-redux-universal-hot-example/blob/master/src/redux/middleware/clientMiddleware.js), serves two functions:
142+
The middleware, [`clientMiddleware.js`](https://github.com/bertho-zero/react-redux-universal-hot-example/blob/master/src/redux/middleware/clientMiddleware.js), serves two functions:
134143

135144
1. To allow the action creators access to the client API facade. Remember this is the same on both the client and the server, and cannot simply be `import`ed because it holds the cookie needed to maintain session on server-to-server requests.
136145
2. To allow some actions to pass a "promise generator", a function that takes the API client and returns a promise. Such actions require three action types, the `REQUEST` action that initiates the data loading, and a `SUCCESS` and `FAILURE` action that will be fired depending on the result of the promise. There are other ways to accomplish this, some discussed [here](https://github.com/reactjs/redux/issues/99), which you may prefer, but to the author of this example, the middleware way feels cleanest.
@@ -141,10 +150,6 @@ The `src/redux/modules` folder contains "modules" to help
141150
isolate concerns within a Redux application (aka [Ducks](https://github.com/erikras/ducks-modular-redux), a Redux Style Proposal that I came up with). I encourage you to read the
142151
[Ducks Docs](https://github.com/erikras/ducks-modular-redux) and provide feedback.
143152

144-
#### API Server
145-
146-
This is where the meat of your server-side application goes. It doesn't have to be implemented in Node or Express at all. This is where you connect to your database and provide authentication and session management. In this example, it's just spitting out some json with the current time stamp.
147-
148153
#### Getting data and actions into components
149154

150155
To understand how the data and action bindings get into the components – there's only one, `InfoBar`, in this example – I'm going to refer to you to the [Redux](https://github.com/gaearon/redux) library. The only innovation I've made is to package the component and its wrapper in the same js file. This is to encapsulate the fact that the component is bound to the `redux` actions and state. The component using `InfoBar` needn't know or care if `InfoBar` uses the `redux` data or not.
@@ -233,7 +238,7 @@ After this modification to both loaders you will be able to use scss and less fi
233238
234239
#### Unit Tests
235240
236-
The project uses [Mocha](https://mochajs.org/) to run your unit tests, it uses [Karma](http://karma-runner.github.io/0.13/index.html) as the test runner, it enables the feature that you are able to render your tests to the browser (e.g: Firefox, Chrome etc.), which means you are able to use the [Test Utilities](http://facebook.github.io/react/docs/test-utils.html) from Facebook api like `renderIntoDocument()`.
241+
The project uses [Jest](https://facebook.github.io/jest/) and [Mocha](https://mochajs.org/) to run your unit tests, it uses [Karma](http://karma-runner.github.io/0.13/index.html) as the test runner, it enables the feature that you are able to render your tests to the browser (e.g: Firefox, Chrome etc.), which means you are able to use the [Test Utilities](http://facebook.github.io/react/docs/test-utils.html) from Facebook api like `renderIntoDocument()`.
237242
238243
To run the tests in the project, just simply run `npm test` if you have `Chrome` installed, it will be automatically launched as a test service for you.
239244
@@ -253,7 +258,7 @@ The first deploy might take a while, but after that your `node_modules` dir shou
253258
254259
## FAQ
255260
256-
This project moves fast and has an active community, so if you have a question that is not answered below please visit our [Discord channel](https://discord.gg/0ZcbPKXt5bZZb1Ko) or file an issue.
261+
This project moves fast and has an active community, so if you have a question that is not answered below please file an issue.
257262
258263
259264
## Roadmap
@@ -271,4 +276,8 @@ If you would like to submit a pull request, please make an effort to follow the
271276
---
272277
Thanks for checking this out.
273278
279+
Created by:
274280
– Erik Rasmussen, [@erikras](https://twitter.com/erikras)
281+
282+
Maintened by:
283+
– Berthommier Kévin, [@bertho-zero](https://github.com/bertho-zero)

0 commit comments

Comments
 (0)