react_on_rails 1.2.2 → 2.0.0.beta.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- metadata +5 -126
- data/.babelrc +0 -3
- data/.coveralls.yml +0 -1
- data/.dockerignore +0 -2
- data/.eslintignore +0 -5
- data/.eslintrc +0 -48
- data/.gitignore +0 -26
- data/.jscsrc +0 -26
- data/.rspec +0 -2
- data/.rubocop.yml +0 -70
- data/.scss-lint.yml +0 -205
- data/.travis.yml +0 -41
- data/CHANGELOG.md +0 -42
- data/Dockerfile_tests +0 -12
- data/Gemfile +0 -38
- data/README.md +0 -363
- data/Rakefile +0 -5
- data/app/assets/javascripts/react_on_rails.js +0 -241
- data/app/helpers/react_on_rails_helper.rb +0 -224
- data/docker-compose.yml +0 -11
- data/docs/LICENSE +0 -21
- data/docs/additional_reading/heroku_deployment.md +0 -23
- data/docs/additional_reading/manual_installation.md +0 -142
- data/docs/additional_reading/node_dependencies_and_npm.md +0 -29
- data/docs/additional_reading/optional_configuration.md +0 -34
- data/docs/additional_reading/react-and-redux.md +0 -36
- data/docs/additional_reading/react_router.md +0 -45
- data/docs/additional_reading/server_rendering_tips.md +0 -16
- data/docs/additional_reading/tips.md +0 -10
- data/docs/additional_reading/webpack.md +0 -46
- data/docs/code_of_conduct.md +0 -13
- data/docs/coding-style/linters.md +0 -64
- data/docs/coding-style/style.md +0 -42
- data/docs/contributing.md +0 -62
- data/docs/generator_testing.md +0 -20
- data/docs/install_and_releasing.md +0 -24
- data/docs/sample_generated_js/README.md +0 -4
- data/docs/sample_generated_js/client-generated.js +0 -12
- data/docs/sample_generated_js/server-generated.js +0 -25
- data/lib/generators/USAGE +0 -99
- data/lib/generators/react_on_rails/base_generator.rb +0 -198
- data/lib/generators/react_on_rails/bootstrap_generator.rb +0 -91
- data/lib/generators/react_on_rails/dev_tests_generator.rb +0 -30
- data/lib/generators/react_on_rails/generator_errors.rb +0 -15
- data/lib/generators/react_on_rails/generator_helper.rb +0 -58
- data/lib/generators/react_on_rails/heroku_deployment_generator.rb +0 -30
- data/lib/generators/react_on_rails/install_generator.rb +0 -111
- data/lib/generators/react_on_rails/js_linters_generator.rb +0 -19
- data/lib/generators/react_on_rails/react_no_redux_generator.rb +0 -41
- data/lib/generators/react_on_rails/react_with_redux_generator.rb +0 -52
- data/lib/generators/react_on_rails/ruby_linters_generator.rb +0 -33
- data/lib/generators/react_on_rails/templates/base/base/Procfile.dev.tt +0 -4
- data/lib/generators/react_on_rails/templates/base/base/REACT_ON_RAILS.md +0 -16
- data/lib/generators/react_on_rails/templates/base/base/app/controllers/hello_world_controller.rb +0 -5
- data/lib/generators/react_on_rails/templates/base/base/app/views/hello_world/index.html.erb.tt +0 -5
- data/lib/generators/react_on_rails/templates/base/base/client/.babelrc +0 -3
- data/lib/generators/react_on_rails/templates/base/base/client/REACT_ON_RAILS_CLIENT_README.md +0 -3
- data/lib/generators/react_on_rails/templates/base/base/client/app/bundles/HelloWorld/startup/globals.jsx.tt +0 -5
- data/lib/generators/react_on_rails/templates/base/base/client/index.jade +0 -15
- data/lib/generators/react_on_rails/templates/base/base/client/npm-shrinkwrap.json +0 -2907
- data/lib/generators/react_on_rails/templates/base/base/client/package.json.tt +0 -98
- data/lib/generators/react_on_rails/templates/base/base/client/server.js +0 -64
- data/lib/generators/react_on_rails/templates/base/base/client/webpack.client.base.config.js.tt +0 -67
- data/lib/generators/react_on_rails/templates/base/base/client/webpack.client.hot.config.js.tt +0 -67
- data/lib/generators/react_on_rails/templates/base/base/client/webpack.client.rails.config.js +0 -41
- data/lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb +0 -28
- data/lib/generators/react_on_rails/templates/base/base/lib/tasks/assets.rake.tt +0 -26
- data/lib/generators/react_on_rails/templates/base/base/lib/tasks/linters.rake.tt +0 -88
- data/lib/generators/react_on_rails/templates/base/base/package.json +0 -31
- data/lib/generators/react_on_rails/templates/base/server_rendering/client/app/bundles/HelloWorld/startup/serverGlobals.jsx +0 -3
- data/lib/generators/react_on_rails/templates/base/server_rendering/client/webpack.server.rails.config.js +0 -40
- data/lib/generators/react_on_rails/templates/bootstrap/app/assets/stylesheets/_bootstrap-custom.scss +0 -63
- data/lib/generators/react_on_rails/templates/bootstrap/client/assets/stylesheets/_post-bootstrap.scss +0 -10
- data/lib/generators/react_on_rails/templates/bootstrap/client/assets/stylesheets/_pre-bootstrap.scss +0 -8
- data/lib/generators/react_on_rails/templates/bootstrap/client/assets/stylesheets/_react-on-rails-sass-helper.scss +0 -19
- data/lib/generators/react_on_rails/templates/bootstrap/client/bootstrap-sass.config.js +0 -89
- data/lib/generators/react_on_rails/templates/dev_tests/.rspec +0 -2
- data/lib/generators/react_on_rails/templates/dev_tests/spec/features/hello_world_spec.rb +0 -25
- data/lib/generators/react_on_rails/templates/dev_tests/spec/rails_helper.rb +0 -57
- data/lib/generators/react_on_rails/templates/dev_tests/spec/simplecov_helper.rb +0 -21
- data/lib/generators/react_on_rails/templates/dev_tests/spec/spec_helper.rb +0 -95
- data/lib/generators/react_on_rails/templates/heroku_deployment/.buildpacks +0 -2
- data/lib/generators/react_on_rails/templates/heroku_deployment/Procfile +0 -1
- data/lib/generators/react_on_rails/templates/heroku_deployment/config/puma.rb +0 -15
- data/lib/generators/react_on_rails/templates/js_linters/client/.eslintignore +0 -1
- data/lib/generators/react_on_rails/templates/js_linters/client/.eslintrc +0 -48
- data/lib/generators/react_on_rails/templates/js_linters/client/.jscsrc +0 -18
- data/lib/generators/react_on_rails/templates/no_redux/base/client/app/bundles/HelloWorld/components/HelloWorldWidget.jsx +0 -39
- data/lib/generators/react_on_rails/templates/no_redux/base/client/app/bundles/HelloWorld/containers/HelloWorld.jsx +0 -33
- data/lib/generators/react_on_rails/templates/no_redux/base/client/app/bundles/HelloWorld/startup/HelloWorldAppClient.jsx.tt +0 -12
- data/lib/generators/react_on_rails/templates/no_redux/server_rendering/client/app/bundles/HelloWorld/startup/HelloWorldAppServer.jsx +0 -11
- data/lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/actions/helloWorldActionCreators.jsx +0 -8
- data/lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/components/HelloWorldWidget.jsx +0 -48
- data/lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/constants/helloWorldConstants.jsx +0 -8
- data/lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/containers/HelloWorld.jsx +0 -43
- data/lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/reducers/helloWorldReducer.jsx +0 -21
- data/lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/reducers/index.jsx +0 -14
- data/lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/startup/HelloWorldAppClient.jsx.tt +0 -21
- data/lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/store/helloWorldStore.jsx +0 -35
- data/lib/generators/react_on_rails/templates/redux/base/client/app/lib/middlewares/loggerMiddleware.js +0 -20
- data/lib/generators/react_on_rails/templates/redux/server_rendering/client/app/bundles/HelloWorld/startup/HelloWorldAppServer.jsx +0 -21
- data/lib/generators/react_on_rails/templates/ruby_linters/.rubocop.yml +0 -26
- data/lib/generators/react_on_rails/templates/ruby_linters/.scss-lint.yml +0 -205
- data/lib/generators/react_on_rails/templates/ruby_linters/lib/tasks/brakeman.rake +0 -17
- data/lib/generators/react_on_rails/templates/ruby_linters/lib/tasks/ci.rake +0 -33
- data/lib/generators/react_on_rails/templates/ruby_linters/ruby-lint.yml +0 -20
- data/lib/react_on_rails.rb +0 -6
- data/lib/react_on_rails/configuration.rb +0 -53
- data/lib/react_on_rails/engine.rb +0 -7
- data/lib/react_on_rails/prerender_error.rb +0 -31
- data/lib/react_on_rails/server_rendering_pool.rb +0 -111
- data/lib/react_on_rails/version.rb +0 -3
- data/rakelib/docker.rake +0 -33
- data/rakelib/dummy_apps.rake +0 -29
- data/rakelib/example_type.rb +0 -160
- data/rakelib/examples.rake +0 -103
- data/rakelib/examples_config.yml +0 -19
- data/rakelib/lint.rake +0 -37
- data/rakelib/run_rspec.rake +0 -65
- data/rakelib/task_helpers.rb +0 -44
- data/react_on_rails.gemspec +0 -31
- data/ruby-lint.yml +0 -24
data/docker-compose.yml
DELETED
data/docs/LICENSE
DELETED
@@ -1,21 +0,0 @@
|
|
1
|
-
The MIT License (MIT)
|
2
|
-
|
3
|
-
Copyright (c) 2015 Justin Gordon
|
4
|
-
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
7
|
-
in the Software without restriction, including without limitation the rights
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
10
|
-
furnished to do so, subject to the following conditions:
|
11
|
-
|
12
|
-
The above copyright notice and this permission notice shall be included in
|
13
|
-
all copies or substantial portions of the Software.
|
14
|
-
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
21
|
-
THE SOFTWARE.
|
@@ -1,23 +0,0 @@
|
|
1
|
-
# Heroku Deployment
|
2
|
-
The generator has created the necessary files and gems for deployment to Heroku. If you have installed manually, you will need to provide these files yourself:
|
3
|
-
|
4
|
-
+ `Procfile`: used by Heroku and Foreman to start the Puma server
|
5
|
-
+ `.buildpacks`: used to install Ruby and Node environments
|
6
|
-
+ `12factor` gem: required by Heroku
|
7
|
-
+ `'puma'` gem: recommended Heroku webserver
|
8
|
-
+ `config/puma.rb`: Puma webserver config file
|
9
|
-
+ `lib/tasks/assets.rake`: This rake task file is provided by the generator regardless of whether the user chose Heroku Deployment as an option. It is highlighted here because it is helpful to understand that this task is what generates your JavaScript bundles in production.
|
10
|
-
|
11
|
-
## How to Deploy
|
12
|
-
|
13
|
-
React on Rails requires both a ruby environment (for Rails) and a Node environment (for Webpack), so you will need to have Heroku use multiple buildpacks. Currently, we would suggest using [DDollar's Heroku Buildpack Multi](https://github.com/ddollar/heroku-buildpack-multi).
|
14
|
-
|
15
|
-
Assuming you have downloaded and installed the Heroku command-line utility and have initialized the app, you will need to tell Heroku to use Heroku Buildpack Multi via the command-line:
|
16
|
-
|
17
|
-
```
|
18
|
-
heroku buildpacks:set https://github.com/heroku/heroku-buildpack-multi
|
19
|
-
```
|
20
|
-
|
21
|
-
Heroku will now be able to use the multiple buildpacks specified in `.buildpacks`.
|
22
|
-
|
23
|
-
Note, an alternative approach is to use the [Heroku Toolbelt to set buildpacks](https://devcenter.heroku.com/articles/using-multiple-buildpacks-for-an-app).
|
@@ -1,142 +0,0 @@
|
|
1
|
-
# Manual Installation
|
2
|
-
Follow these steps if you choose to forgo the generator:
|
3
|
-
|
4
|
-
1. Globally expose React in your webpack config like [this](https://github.com/shakacode/react-webpack-rails-tutorial/blob/537c985dc82faee333d80509343ca32a3965f9dd/client/webpack.client.base.config.js#L31):
|
5
|
-
|
6
|
-
```javascript
|
7
|
-
module: {
|
8
|
-
loaders: [
|
9
|
-
// React is necessary for the client rendering:
|
10
|
-
{ test: require.resolve('react'), loader: 'expose?React' },
|
11
|
-
|
12
|
-
// For React 0.14
|
13
|
-
{ test: require.resolve('react-dom'), loader: 'expose?ReactDOM' }, // not in the server one
|
14
|
-
```
|
15
|
-
|
16
|
-
|
17
|
-
2. Require `react_on_rails` in your `application.js` like [this](https://github.com/shakacode/react-webpack-rails-tutorial/blob/361f4338ebb39a5d3934b00cb6d6fcf494773000/app/assets/javascripts/application.js#L15). It possibly should come after you require `turbolinks`:
|
18
|
-
|
19
|
-
```
|
20
|
-
//= require react_on_rails
|
21
|
-
```
|
22
|
-
3. Expose your client globals like [this](https://github.com/shakacode/react-webpack-rails-tutorial/blob/537c985dc82faee333d80509343ca32a3965f9dd/client/app/startup/clientGlobals.jsx#L3):
|
23
|
-
|
24
|
-
```javascript
|
25
|
-
import App from './ClientApp';
|
26
|
-
window.App = App;
|
27
|
-
```
|
28
|
-
4. Put your client globals file as webpack entry points like [this](https://github.com/shakacode/react-webpack-rails-tutorial/blob/537c985dc82faee333d80509343ca32a3965f9dd/client/webpack.client.rails.config.js#L22). Similar pattern for server rendering.
|
29
|
-
|
30
|
-
```javascript
|
31
|
-
config.entry.app.push('./app/startup/clientGlobals');
|
32
|
-
```
|
33
|
-
|
34
|
-
## Additional Steps For Server Rendering (option `prerender` shown below)
|
35
|
-
See the next section for a sample webpack.server.rails.config.js.
|
36
|
-
|
37
|
-
1. Expose your server globals like [this](https://github.com/shakacode/react-webpack-rails-tutorial/blob/537c985dc82faee333d80509343ca32a3965f9dd/client/app/startup/serverGlobals.jsx#L7)
|
38
|
-
|
39
|
-
```javascript
|
40
|
-
import App from './ServerApp';
|
41
|
-
global.App = App;
|
42
|
-
```
|
43
|
-
2. Make the server globals file an entry point in your webpack config, like [this](https://github.com/shakacode/react-webpack-rails-tutorial/blob/537c985dc82faee333d80509343ca32a3965f9dd/client/webpack.server.rails.config.js#L7)
|
44
|
-
|
45
|
-
```javascript
|
46
|
-
entry: ['./app/startup/serverGlobals'],
|
47
|
-
```
|
48
|
-
3. Ensure the name of your ouput file (shown [here](https://github.com/shakacode/react-webpack-rails-tutorial/blob/537c985dc82faee333d80509343ca32a3965f9dd/client/webpack.server.rails.config.js#L9)) of your server bundle corresponds to the configuration of the gem. The default path is `app/assets/javascripts/generated`. See below for customization of configuration variables.
|
49
|
-
4. Expose `React` in your webpack config, like [this](https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client/webpack.server.rails.build.config.js#L54-L55)
|
50
|
-
|
51
|
-
```javascript
|
52
|
-
{ test: require.resolve('react'), loader: 'expose?React' },
|
53
|
-
|
54
|
-
// For React 0.14
|
55
|
-
{ test: require.resolve('react-dom/server'), loader: 'expose?ReactDOMServer' }, // not in client one, only server
|
56
|
-
```
|
57
|
-
### Sample webpack.server.rails.build.config.js (ONLY for server rendering)
|
58
|
-
Be sure to check out the latest example version of [client/webpack.server.rails.build.config.js](https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client/webpack.server.rails.build.config.js).
|
59
|
-
|
60
|
-
```javascript
|
61
|
-
// Common webpack configuration for server bundle
|
62
|
-
|
63
|
-
module.exports = {
|
64
|
-
|
65
|
-
// the project dir
|
66
|
-
context: __dirname,
|
67
|
-
entry: ['./app/startup/serverGlobals'],
|
68
|
-
output: {
|
69
|
-
filename: 'server-bundle.js',
|
70
|
-
path: '../app/assets/javascripts/generated',
|
71
|
-
|
72
|
-
// CRITICAL to set libraryTarget: 'this' for enabling Rails to find the exposed modules IF you
|
73
|
-
// use the "expose" webpackfunctionality. See startup/serverGlobals.jsx.
|
74
|
-
// NOTE: This is NOT necessary if you use the syntax of global.MyComponent = MyComponent syntax.
|
75
|
-
// See http://webpack.github.io/docs/configuration.html#externals for documentation of this option
|
76
|
-
//libraryTarget: 'this',
|
77
|
-
},
|
78
|
-
resolve: {
|
79
|
-
extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx', 'config.js'],
|
80
|
-
},
|
81
|
-
module: {
|
82
|
-
loaders: [
|
83
|
-
{test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/},
|
84
|
-
|
85
|
-
// React is necessary for the client rendering:
|
86
|
-
{ test: require.resolve('react'), loader: 'expose?React' },
|
87
|
-
{ test: require.resolve('react-dom/server'), loader: 'expose?ReactDOMServer' },
|
88
|
-
],
|
89
|
-
},
|
90
|
-
};
|
91
|
-
```
|
92
|
-
|
93
|
-
## What Happens?
|
94
|
-
|
95
|
-
Here's what the browser will render with a call to the `react_component` helper.
|
96
|
-
![2015-09-28_20-24-35](https://cloud.githubusercontent.com/assets/1118459/10157268/41435186-6624-11e5-9341-6fc4cf35ee90.png)
|
97
|
-
|
98
|
-
If you're curious as to what the gem generates for the server and client rendering, see [`spec/dummy/client/app/startup/serverGlobals.jsx`](https://github.com/shakacode/react_on_rails/blob/master/spec/dummy/spec/sample_generated_js/server-generated.js)
|
99
|
-
and [`spec/dummy/client/app/startup/ClientReduxApp.jsx`](https://github.com/shakacode/react_on_rails/blob/master/spec/dummy/spec/sample_generated_js/client-generated.js) for examples of this. Note, this is not the code that you are providing. You can see the client code by viewing the page source.
|
100
|
-
|
101
|
-
* **props**: [hash | string of json] Properties to pass to the react object. See this example if you're using Jbuilder: [react-webpack-rails-tutorial view rendering props using jBuilder](https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/app/views/pages/index.html.erb#L20)
|
102
|
-
|
103
|
-
```erb
|
104
|
-
<%= react_component('App', render(template: "/comments/index.json.jbuilder"),
|
105
|
-
generator_function: true, prerender: true) %>
|
106
|
-
```
|
107
|
-
* **options:** [hash]
|
108
|
-
* **generator_function**: <true/false> default is false, set to true if you want to use a generator function rather than a React Component.
|
109
|
-
* **prerender**: <true/false> set to false when debugging!
|
110
|
-
* **trace**: <true/false> set to true to print additional debugging information in the browser default is true for development, off otherwise
|
111
|
-
* **replay_console**: <true/false> Default is true. False will disable echoing server rendering logs, which can make troubleshooting server rendering difficult.
|
112
|
-
* Any other options are passed to the content tag, including the id.
|
113
|
-
|
114
|
-
# JavaScript
|
115
|
-
|
116
|
-
1. Configure your webpack configuration to create the file used for server rendering if you plan to do server rendering.
|
117
|
-
2. Follow the examples in `spec/dummy/client/app/startup/clientGlobals.jsx` to expose your react components for client side rendering.
|
118
|
-
|
119
|
-
```ruby
|
120
|
-
import HelloWorld from '../components/HelloWorld';
|
121
|
-
window.HelloWorld = HelloWorld;
|
122
|
-
```
|
123
|
-
3. Follow the examples in `spec/dummy/client/app/startup/serverGlobals.jsx` to expose your react components for server side rendering.
|
124
|
-
|
125
|
-
```ruby
|
126
|
-
import HelloWorld from '../components/HelloWorld';
|
127
|
-
global.HelloWorld = HelloWorld;
|
128
|
-
```
|
129
|
-
|
130
|
-
## React 0.13 vs. React 0.14
|
131
|
-
The main difference for using react_on_rails is that you need to add additional lines in the webpack config files:
|
132
|
-
|
133
|
-
+ Normal mode (JavaScript is rendered on the client side) webpack config file:
|
134
|
-
|
135
|
-
```javascript
|
136
|
-
{ test: require.resolve('react-dom'), loader: 'expose?ReactDOM' },
|
137
|
-
```
|
138
|
-
+ Server-side rendering webpack config file:
|
139
|
-
|
140
|
-
```javascript
|
141
|
-
{ test: require.resolve('react-dom/server'), loader: 'expose?ReactDOMServer' },
|
142
|
-
```
|
@@ -1,29 +0,0 @@
|
|
1
|
-
# Node Dependencies and NPM
|
2
|
-
## Updating
|
3
|
-
After installing the files, you may want to update the node dependencies. This is analogous to updating gem versions:
|
4
|
-
|
5
|
-
```bash
|
6
|
-
cd client
|
7
|
-
npm install -g npm-check-updates
|
8
|
-
rm npm-shrinkwrap.json
|
9
|
-
npm-check-updates -u
|
10
|
-
npm install
|
11
|
-
npm prune
|
12
|
-
npm shrinkwrap
|
13
|
-
```
|
14
|
-
|
15
|
-
Confirm that the hot replacement dev server and the Rails server both work. You may have to delete `node_modules` and `npm-shrinkwrap.json` and then run `npm shrinkwrap`.
|
16
|
-
|
17
|
-
*Note: `npm prune` is required before running `npm shrinkwrap` to remove dependencies that are no longer needed after doing updates.*
|
18
|
-
|
19
|
-
## Adding New Dependencies
|
20
|
-
Typically, you can add your Node dependencies as you normally would. Occasionally, adding a new dependency may require removing and re-running `npm shrinkwrap`:
|
21
|
-
|
22
|
-
```bash
|
23
|
-
cd client
|
24
|
-
npm install --save module_name@version
|
25
|
-
# or
|
26
|
-
# npm install --save_dev module_name@version
|
27
|
-
rm npm-shrinkwrap.json
|
28
|
-
npm shrinkwrap
|
29
|
-
```
|
@@ -1,34 +0,0 @@
|
|
1
|
-
# Optional Configuration
|
2
|
-
|
3
|
-
Create a file `config/react_on_rails.rb` to override any defaults (this file is automatically created for you when using the generator). If you don't specify this file, the default options are below.
|
4
|
-
|
5
|
-
The `server_bundle_js_file` must correspond to the bundle you want to use for server rendering.
|
6
|
-
|
7
|
-
```ruby
|
8
|
-
# Shown below are the defaults for configuration
|
9
|
-
ReactOnRails.configure do |config|
|
10
|
-
# Client bundles are configured in application.js
|
11
|
-
# Server bundle is a single file for all server rendering of components.
|
12
|
-
# Set the server_bundle_js_file to "" if you know that you will not be server rendering.
|
13
|
-
config.server_bundle_js_file = "app/assets/javascripts/generated/server.js" # This is the default
|
14
|
-
|
15
|
-
# Below options can be overriden by passing to the helper method.
|
16
|
-
config.prerender = false # default is false
|
17
|
-
config.generator_function = false # default is false, meaning that you expose ReactComponents directly
|
18
|
-
config.trace = Rails.env.development? # default is true for development, off otherwise
|
19
|
-
|
20
|
-
# For server rendering. This can be set to false so that server side messages are discarded.
|
21
|
-
config.replay_console = true # Default is true. Be cautious about turning this off.
|
22
|
-
config.logging_on_server = true # Default is true. Logs server rendering messags to Rails.logger.info
|
23
|
-
|
24
|
-
# Settings for the pool of renderers:
|
25
|
-
config.server_renderer_pool_size ||= 1 # ExecJS doesn't allow more than one on MRI
|
26
|
-
config.server_renderer_timeout ||= 20 # seconds
|
27
|
-
end
|
28
|
-
```
|
29
|
-
|
30
|
-
You can configure your pool of JS virtual machines and specify where it should load code:
|
31
|
-
|
32
|
-
- On MRI, use `therubyracer` for the best performance (see [discussion](https://github.com/reactjs/react-rails/pull/290))
|
33
|
-
- On MRI, you'll get a deadlock with `pool_size` > 1
|
34
|
-
- If you're using JRuby, you can increase `pool_size` to have real multi-threaded rendering.
|
@@ -1,36 +0,0 @@
|
|
1
|
-
# Communication between React Components and Redux Reducers
|
2
|
-
|
3
|
-
## Communication Between Components
|
4
|
-
See https://facebook.github.io/react/tips/communicate-between-components.html
|
5
|
-
|
6
|
-
# Redux Reducers
|
7
|
-
Documentation of generated Redux code for reducers.
|
8
|
-
|
9
|
-
## Example
|
10
|
-
The `helloWorld/reducers/index.jsx` example that results from running the generator with the Redux option may be slightly confusing because of its simplicity. For clarity, what follows is a more fleshed-out example of what a reducer might look like:
|
11
|
-
|
12
|
-
```javascript
|
13
|
-
import usersReducer from './usersReducer';
|
14
|
-
import blogPostsReducer from './blogPostsReducer';
|
15
|
-
import commentsReducer from './commentsReducer';
|
16
|
-
// ...
|
17
|
-
|
18
|
-
import { $$initialState as $$usersState } from './usersReducer';
|
19
|
-
import { $$initialState as $$blogPostsState } from './blogPostsReducer';
|
20
|
-
import { $$initialState as $$commentsState } from './commentsReducer';
|
21
|
-
// ...
|
22
|
-
|
23
|
-
export default {
|
24
|
-
$$usersStore: usersReducer,
|
25
|
-
$$blogPostsStore: blogPostsReducer,
|
26
|
-
$$commentsStore: commentsReducer,
|
27
|
-
// ...
|
28
|
-
};
|
29
|
-
|
30
|
-
export const initalStates = {
|
31
|
-
$$usersState,
|
32
|
-
$$blogPostsState,
|
33
|
-
$$commentsState,
|
34
|
-
// ...
|
35
|
-
};
|
36
|
-
```
|
@@ -1,45 +0,0 @@
|
|
1
|
-
# Using React Router
|
2
|
-
React on Rails supports the use of React Router. Client-side code doesn't need any special configuration for the React on Rails gem. Implement React Router how you normally would.
|
3
|
-
|
4
|
-
However, when attempting to use server-rendering, it is necessary to take steps that prevent rendering when there is a router error or redirect. In these cases, the client code should return an object containing the `error` and a `redirectLocation` instead of the React component. The `react_component` helper method in your Rails view will automatically detect that there was an error/redirect and handle it accordingly.
|
5
|
-
|
6
|
-
If you are working with the HelloWorldApp created by the react_on_rails generator, then the code below corresponds to the module in `client/app/bundles/HelloWorld/startup/HelloWorldAppServer.jsx`.
|
7
|
-
|
8
|
-
```js
|
9
|
-
const RouterApp = (props, location) => {
|
10
|
-
const store = createStore(props);
|
11
|
-
|
12
|
-
let error;
|
13
|
-
let redirectLocation;
|
14
|
-
let routeProps;
|
15
|
-
|
16
|
-
// See https://github.com/rackt/react-router/blob/master/docs/guides/advanced/ServerRendering.md
|
17
|
-
match({ routes, location }, (_error, _redirectLocation, _routeProps) => {
|
18
|
-
error = _error;
|
19
|
-
redirectLocation = _redirectLocation;
|
20
|
-
routeProps = _routeProps;
|
21
|
-
});
|
22
|
-
|
23
|
-
// This tell react_on_rails to skip server rendering any HTML. Note, client rendering
|
24
|
-
// will handle the redirect. What's key is that we don't try to render.
|
25
|
-
// Critical to return the Object properties to match this { error, redirectLocation }
|
26
|
-
if (error || redirectLocation) {
|
27
|
-
return { error, redirectLocation };
|
28
|
-
}
|
29
|
-
|
30
|
-
// Important that you don't do this if you are redirecting or have an error.
|
31
|
-
return (
|
32
|
-
<Provider store={store}>
|
33
|
-
<RoutingContext {...routeProps} />
|
34
|
-
</Provider>
|
35
|
-
);
|
36
|
-
};
|
37
|
-
```
|
38
|
-
|
39
|
-
For a fleshed out integration of react_on_rails with react-router, check out [React Webpack Rails Tutorial Code](https://github.com/shakacode/react-webpack-rails-tutorial), specifically the files:
|
40
|
-
|
41
|
-
* [react-webpack-rails-tutorial/client/app/bundles/comments/routes/routes.jsx](https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client/app/bundles/comments/routes/routes.jsx)
|
42
|
-
|
43
|
-
* [react-webpack-rails-tutorial/client/app/bundles/comments/startup/ClientRouterApp.jsx](https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client/app/bundles/comments/startup/ClientRouterApp.jsx)
|
44
|
-
|
45
|
-
* [react-webpack-rails-tutorial/client/app/bundles/comments/startup/ServerRouterApp.jsx](https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client/app/bundles/comments/startup/ServerRouterApp.jsx)
|
@@ -1,16 +0,0 @@
|
|
1
|
-
# Server Rendering Tips
|
2
|
-
|
3
|
-
- Your code can't reference `document`. Server side JS execution does not have access to `document`, so jQuery and some
|
4
|
-
other libs won't work in this environment. You can debug this by putting in `console.log`
|
5
|
-
statements in your code.
|
6
|
-
- You can conditionally avoid running code that references document by passing in a boolean prop to your top level react
|
7
|
-
component. Since the passed in props Hash from the view helper applies to client and server side code, the best way to
|
8
|
-
do this is to use a generator function.
|
9
|
-
- If you're serious about server rendering, it's worth the effort to have different entry points for client and server rendering. It's worth the extra complexity.
|
10
|
-
|
11
|
-
You might also do something like this in some file for your top level component:
|
12
|
-
```javascript
|
13
|
-
global.App = () => <MyComponent serverSide={true} />;
|
14
|
-
```
|
15
|
-
|
16
|
-
The point is that you have separate files for top level client or server side, and you pass some extra option indicating that rendering is happening server sie.
|
@@ -1,10 +0,0 @@
|
|
1
|
-
# Tips
|
2
|
-
+ **DO NOT RUN `rails s`** and instead run
|
3
|
-
|
4
|
-
`foreman start -f Procfile.dev`
|
5
|
-
|
6
|
-
to automatically start the webpack file watchers that will regenerate your JavaScript. Note, RSpec does not automatically rebuild the bundle files, so you could get incorrect results from your tests if you change the client code and do not rebuild the bundles. The same problem occurs when pulling down changes from GitHub and running tests without first rebuilding the bundles.
|
7
|
-
+ The default for rendering right now is `prerender: false`. **NOTE:** Server side rendering does not work for some components that use an async setup for server rendering. You can configure the default for prerender in your config.
|
8
|
-
+ You can expose either a React component or a function that returns a React component. If you wish to create a React component via a function, rather than simply props, then you need to set the property "generator" on that helper invocation to true (or change the defaults). When that is done, the function is invoked with a single parameter of "props", and that function should return a React element.
|
9
|
-
+ Be sure you can first render your react component **client only** before you try to debug server rendering!
|
10
|
-
+ Open up the HTML source and take a look at the generated HTML and the JavaScript to see what's going on under the covers. Note that when server rendering is turned on, then you'll see the server rendered react components. When server rendering is turned off, then you'll only see the `div` element where the in-line JavaScript will render the component. You might also notice how the props you pass (a Ruby Hash) becomes in-line JavaScript on the HTML page.
|
@@ -1,46 +0,0 @@
|
|
1
|
-
# Entry Points and Globally Exposing Objects
|
2
|
-
|
3
|
-
You should ensure you configure the entry points correctly for webpack.
|
4
|
-
|
5
|
-
## When using React 0.14 and greater
|
6
|
-
|
7
|
-
You need both include `react-dom/server` and `react` as values for `entry`, like this:
|
8
|
-
|
9
|
-
```
|
10
|
-
entry: {
|
11
|
-
|
12
|
-
// See use of 'vendor' in the CommonsChunkPlugin inclusion below.
|
13
|
-
vendor: [
|
14
|
-
'babel-core/polyfill',
|
15
|
-
'jquery',
|
16
|
-
'jquery-ujs',
|
17
|
-
'react',
|
18
|
-
'react-dom',
|
19
|
-
],
|
20
|
-
```
|
21
|
-
|
22
|
-
and you need to expose them:
|
23
|
-
|
24
|
-
```
|
25
|
-
// React is necessary for the client rendering:
|
26
|
-
{test: require.resolve('react'), loader: 'expose?React'},
|
27
|
-
{test: require.resolve('react-dom'), loader: 'expose?ReactDOM'},
|
28
|
-
{test: require.resolve('jquery'), loader: 'expose?jQuery'},
|
29
|
-
{test: require.resolve('jquery'), loader: 'expose?$'},
|
30
|
-
```
|
31
|
-
|
32
|
-
`webpack.server.config.js` is similar, but substitute:
|
33
|
-
|
34
|
-
```
|
35
|
-
entry: ['./yourCode', 'react-dom/server', 'react'],
|
36
|
-
```
|
37
|
-
|
38
|
-
and use this line rather than `{test: require.resolve('react-dom'), loader: 'expose?ReactDOM'},`:
|
39
|
-
|
40
|
-
```
|
41
|
-
{test: require.resolve('react-dom/server'), loader: 'expose?ReactDOMServer'},
|
42
|
-
```
|
43
|
-
|
44
|
-
## When you use React 0.13
|
45
|
-
|
46
|
-
You don't need to put in react-dom.
|
data/docs/code_of_conduct.md
DELETED
@@ -1,13 +0,0 @@
|
|
1
|
-
# Contributor Code of Conduct
|
2
|
-
|
3
|
-
As contributors and maintainers of this project, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities.
|
4
|
-
|
5
|
-
We are committed to making participation in this project a harassment-free experience for everyone, regardless of level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, ethnicity, age, or religion.
|
6
|
-
|
7
|
-
Examples of unacceptable behavior by participants include the use of sexual language or imagery, derogatory comments or personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct.
|
8
|
-
|
9
|
-
Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct. Project maintainers who do not follow the Code of Conduct may be removed from the project team.
|
10
|
-
|
11
|
-
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by opening an issue or contacting one or more of the project maintainers.
|
12
|
-
|
13
|
-
This Code of Conduct is adapted from the [Contributor Covenant](http://contributor-covenant.org), version 1.0.0, available at [http://contributor-covenant.org/version/1/0/0/](http://contributor-covenant.org/version/1/0/0/)
|
@@ -1,64 +0,0 @@
|
|
1
|
-
# Linters
|
2
|
-
These linters support the [ShakaCode Style Guidelines](./style.md)
|
3
|
-
|
4
|
-
## Autofix!
|
5
|
-
|
6
|
-
If you haven't tried the autofix options for `jscs` and `rubocop`, you're seriously missing out!
|
7
|
-
|
8
|
-
1. Be **SURE** you have a clean git status, as you'll want to review what the autofix does to your code!
|
9
|
-
2. **Rubocop:** Be sure to be in the right directory where you have Ruby files, probably the top level of your Rails project.
|
10
|
-
```
|
11
|
-
rubocop -a
|
12
|
-
```
|
13
|
-
|
14
|
-
3. **JSCS:**: Be sure to be in the right directory where you have JS files.
|
15
|
-
```
|
16
|
-
jscs -x .
|
17
|
-
```
|
18
|
-
|
19
|
-
Autofixing is a **HUGE** time saver!
|
20
|
-
|
21
|
-
## ESLint
|
22
|
-
|
23
|
-
### Configuring Rules
|
24
|
-
|
25
|
-
Rules are configured with a 0, 1 or 2. Setting a rule to 0 is turning it off, setting it to 1 triggers a warning if that rule is violated, and setting it to 2 triggers an error.
|
26
|
-
|
27
|
-
Rules can also take a few additional options. In this case, the rule can be set to an array, the first item of which is the 0/1/2 flag and the rest are options.
|
28
|
-
|
29
|
-
See file [.eslintrc](../../client/.eslintrc) for examples of configuration
|
30
|
-
|
31
|
-
### Specify/Override rules in code
|
32
|
-
|
33
|
-
Rules can also be specified in the code file to be linted, as JavaScript comments. This can be useful when the rule is a one-off or is a override to a project-wide rule.
|
34
|
-
|
35
|
-
For example, if your file assumes a few globals and you have the no-undef rule set in the .eslintrc file, you might want to relax the rule in the current file.
|
36
|
-
|
37
|
-
```
|
38
|
-
/* global $, window, angular */
|
39
|
-
// rest of code
|
40
|
-
```
|
41
|
-
|
42
|
-
It's also useful to disable ESLint for particular lines or blocks of lines.
|
43
|
-
|
44
|
-
```
|
45
|
-
console.log('console.log not allowed'); // eslint-disable-line
|
46
|
-
|
47
|
-
alert('alert not allowed'); // eslint-disable-line no-alert
|
48
|
-
|
49
|
-
/* eslint-disable no-console, no-alert */
|
50
|
-
console.log('more console.log');
|
51
|
-
alert('more alert');
|
52
|
-
/* eslint-enable no-console, no-alert */
|
53
|
-
```
|
54
|
-
|
55
|
-
You can disable all rules for a line or block, or only specific rules, as shown above.
|
56
|
-
|
57
|
-
### Useful Reference Links
|
58
|
-
|
59
|
-
* [Configuring ESLint](http://eslint.org/docs/user-guide/configuring.html#configuring-rules)
|
60
|
-
* [ESLint quick start](http://untilfalse.com/eslint-quick-start/)
|
61
|
-
* [RuboCop][https://github.com/bbatsov/rubocop]
|
62
|
-
* [ESLint][http://eslint.org/]
|
63
|
-
* [JSCS][https://github.com/jscs-dev/node-jscs]
|
64
|
-
|