Skip to content

Commit 2d674c9

Browse files
committed
Merge branch 'master' into feature/node
# Conflicts: # lib/react_on_rails/server_rendering_pool.rb
2 parents 03c5d0a + 9995619 commit 2d674c9

11 files changed

+180
-182
lines changed

README.md

+12-179
Large diffs are not rendered by default.

docs/additional-reading/heroku-deployment.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,13 @@ If for some reason you need custom buildpacks that are not officially supported
2626

2727
### Swap out sqlite for postgres by doing the following:
2828

29-
1. Delete the line with `sqlite` and replace it with:
29+
#### 1. Delete the line with `sqlite` and replace it with:
3030

3131
```ruby
3232
gem 'pg'
3333
```
3434

35-
2. Replace your `database.yml` file with this (assuming your app name is "ror")
35+
#### 2. Replace your `database.yml` file with this (assuming your app name is "ror")
3636

3737
```yml
3838
default: &default
@@ -65,7 +65,7 @@ bin/rake db:migrate
6565
bin/rake db:setup
6666
```
6767

68-
3. Create a rake file to add webpack compilation to asset precompilation. You may already have this file if you used the React on Rails generator.
68+
#### 3. Create a rake file to add webpack compilation to asset precompilation. You may already have this file if you used the React on Rails generator.
6969

7070
```ruby
7171
# lib/tasks/assets.rake
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
## Developing with the Webpack Dev Server
2+
One of the benefits of using webpack is access to [webpack's dev server](https://webpack.github.io/docs/webpack-dev-server.html) and its [hot module replacement](https://webpack.github.io/docs/hot-module-replacement-with-webpack.html) functionality.
3+
4+
The webpack dev server with HMR will apply changes from the code (or styles!) to the browser as soon as you save whatever file you're working on. You won't need to reload the page, and your data will still be there. Start foreman as normal (it boots up the Rails server *and* the webpack HMR dev server at the same time).
5+
6+
```bash
7+
foreman start -f Procfile.dev
8+
```
9+
10+
Open your browser to [localhost:3000](http://localhost:3000). Whenever you make changes to your JavaScript code in the `client` folder, they will automatically show up in the browser. Hot module replacement is already enabled by default.
11+
12+
Note that **React-related error messages are possibly more helpful when encountered in the dev server** than the Rails server as they do not include noise added by the React on Rails gem.
13+
14+
### Adding Additional Routes for the Dev Server
15+
As you add more routes to your front-end application, you will need to make the corresponding API for the dev server in `client/server.js`. See our example `server.js` from our [tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client%2Fserver-express.js).
16+

docs/api/javascript-api.md

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# ReactOnRails JavaScript API
2+
The best source of docs is the main [ReactOnRails.js](node_package/src/ReactOnRails.js) file. Here's a quick summary. No guarantees that this won't be outdated!
3+
4+
```js
5+
/**
6+
* Main entry point to using the react-on-rails npm package. This is how Rails will be able to
7+
* find you components for rendering.
8+
* @param components (key is component name, value is component)
9+
*/
10+
register(components)
11+
12+
/**
13+
* Allows registration of store generators to be used by multiple react components on one Rails
14+
* view. store generators are functions that take one arg, props, and return a store. Note that
15+
* the setStore API is different in tha it's the actual store hydrated with props.
16+
* @param stores (key is store name, value is the store generator)
17+
*/
18+
registerStore(stores)
19+
20+
/**
21+
* Allows retrieval of the store by name. This store will be hydrated by any Rails form props.
22+
* Pass optional param throwIfMissing = false if you want to use this call to get back null if the
23+
* store with name is not registered.
24+
* @param name
25+
* @param throwIfMissing Defaults to true. Set to false to have this call return undefined if
26+
* there is no store with the given name.
27+
* @returns Redux Store, possibly hydrated
28+
*/
29+
getStore(name, throwIfMissing = true )
30+
31+
/**
32+
* Set options for ReactOnRails, typically before you call ReactOnRails.register
33+
* Available Options:
34+
* `traceTurbolinks: true|false Gives you debugging messages on Turbolinks events
35+
*/
36+
setOptions(options)
37+
```
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
## Hot Reloading View Helpers
2+
The `env_javascript_include_tag` and `env_stylesheet_link_tag` support the usage of a webpack dev server for providing the JS and CSS assets during development mode. See the [shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/) for a working example.
3+
4+
The key options are `static` and `hot` which specify what you want for static vs. hot. Both of these params are optional, and support either a single value, or an array.
5+
6+
static vs. hot is picked based on whether `ENV["REACT_ON_RAILS_ENV"] == "HOT"`
7+
8+
```erb
9+
<%= env_stylesheet_link_tag(static: 'application_static',
10+
hot: 'application_non_webpack',
11+
media: 'all',
12+
'data-turbolinks-track' => true) %>
13+
14+
<!-- These do not use turbolinks, so no data-turbolinks-track -->
15+
<!-- This is to load the hot assets. -->
16+
<%= env_javascript_include_tag(hot: ['http://localhost:3500/vendor-bundle.js',
17+
'http://localhost:3500/app-bundle.js']) %>
18+
19+
<!-- These do use turbolinks -->
20+
<%= env_javascript_include_tag(static: 'application_static',
21+
hot: 'application_non_webpack',
22+
'data-turbolinks-track' => true) %>
23+
```
24+
25+
See application.html.erb for usage example and [application.html.erb](https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/app%2Fviews%2Flayouts%2Fapplication.html.erb)
26+
27+
Helper to set CSS and JS assets depending on if we want static or "hot", which means from the Webpack dev server.
28+
29+
In this example, `application_non_webpack` is simply a CSS asset pipeline file which includes styles not placed in the webpack build. The same can be said for `application_non_webpack` for JS files. Note, the suffix is not used in the helper calls.
30+
31+
We don't need styles from the webpack build, as those will come via the JavaScript include tags.
32+
33+
The key options are `static` and `hot` which specify what you want for static vs. hot. Both of
34+
these params are optional, and support either a single value, or an array.
35+
36+
```erb
37+
<%= env_stylesheet_link_tag(static: 'application_static',
38+
hot: 'application_non_webpack',
39+
media: 'all',
40+
'data-turbolinks-track' => true) %>
41+
```

docs/api/ruby-api.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
PENDING:
2+
3+
Should we document the view helpers here concisely?

docs/basics/generator.md

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
- [Generator](#generator)
2+
- [Understanding the Organization of the Generated Client Code](#understanding-the-organization-of-the-generated-client-code)
3+
- [Redux](#redux)
4+
- [Multiple React Components on a Page with One Store](#multiple-react-components-on-a-page-with-one-store)
5+
- [Using Images and Fonts](#using-images-and-fonts)
6+
7+
The `react_on_rails:install` generator combined with the example pull requests of generator runs will get you up and running efficiently. There's a fair bit of setup with integrating Webpack with Rails. Defaults for options are such that the default is for the flag to be off. For example, the default for `-R` is that `redux` is off, and the default of `-b` is that `skip-bootstrap` is off.
8+
9+
Run `rails generate react_on_rails:install --help` for descriptions of all available options:
10+
11+
```
12+
Usage:
13+
rails generate react_on_rails:install [options]
14+
15+
Options:
16+
-R, [--redux], [--no-redux] # Install Redux gems and Redux version of Hello World Example
17+
-S, [--server-rendering], [--no-server-rendering] # Add necessary files and configurations for server-side rendering
18+
19+
Runtime options:
20+
-f, [--force] # Overwrite files that already exist
21+
-p, [--pretend], [--no-pretend] # Run but do not make any changes
22+
-q, [--quiet], [--no-quiet] # Suppress status output
23+
-s, [--skip], [--no-skip] # Skip files that already exist
24+
25+
Description:
26+
Create react on rails files for install generator.
27+
```
28+
29+
For a clear example of what each generator option will do, see our generator results repo: [Generator Results](https://github.com/shakacode/react_on_rails-generator-results/blob/master/README.md). Each pull request shows a git "diff" that highlights the changes that the generator has made. Another good option is to create a simple test app per the [Tutorial](docs/tutorial.md).
30+
31+
### Understanding the Organization of the Generated Client Code
32+
The generated client code follows our organization scheme. Each unique set of functionality, is given its own folder inside of `client/app/bundles`. This encourages for modularity of *domains*.
33+
34+
Inside of the generated "HelloWorld" domain you will find the following folders:
35+
36+
+ `startup`: two types of files, one that return a container component and implement any code that differs between client and server code (if using server-rendering), and a `clientRegistration` file that exposes the aforementioned files (as well as a `serverRegistration` file if using server rendering). These registration files are what webpack is using as an entry point.
37+
+ `containers`: "smart components" (components that have functionality and logic that is passed to child "dumb components").
38+
+ `components`: includes "dumb components", or components that simply render their properties and call functions given to them as properties by a parent component. Ultimately, at least one of these dumb components will have a parent container component.
39+
40+
You may also notice the `app/lib` folder. This is for any code that is common between bundles and therefore needs to be shared (for example, middleware).
41+
42+
### Redux
43+
If you have used the `--redux` generator option, you will notice the familiar additional redux folders in addition to the aforementioned folders. The Hello World example has also been modified to use Redux.
44+
45+
Note the organizational paradigm of "bundles". These are like application domains and are used for grouping your code into webpack bundles, in case you decide to create different bundles for deployment. This is also useful for separating out logical parts of your application. The concept is that each bundle will have it's own Redux store. If you have code that you want to reuse across bundles, including components and reducers, place them under `/client/app/lib`.
46+
47+
### Using Images and Fonts
48+
The generator has amended the folders created in `client/assets/` to Rails's asset path. We recommend that if you have any existing assets that you want to use with your client code, you should move them to these folders and use webpack as normal. This allows webpack's development server to have access to your assets, as it will not be able to see any assets in the default Rails directories which are above the `/client` directory.
49+
50+
Alternatively, if you have many existing assets and don't wish to move them, you could consider creating symlinks from client/assets that point to your Rails assets folders inside of `app/assets/`. The assets there will then be visible to both Rails and webpack.
+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
## Migrate From react-rails
2+
If you are using [react-rails](https://github.com/reactjs/react-rails) in your project, it is pretty simple to migrate to [react_on_rails](https://github.com/shakacode/react_on_rails).
3+
4+
- Remove the 'react-rails' gem from your Gemfile.
5+
6+
- Remove the generated lines for react-rails in your application.js file.
7+
8+
```
9+
//= require react
10+
//= require react_ujs
11+
//= require components
12+
```
13+
14+
- Follow our getting started guide: https://github.com/shakacode/react_on_rails#getting-started.
15+
16+
Note: If you have components from react-rails you want to use, then you will need to port them into react_on_rails which uses webpack instead of the asset pipeline.
17+
File renamed without changes.

package.json

+1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"babel-preset-es2015": "^6.6.0",
1616
"babel-preset-react": "^6.5.0",
1717
"babel-preset-stage-0": "^6.5.0",
18+
"babel-runtime": "^6.6.1",
1819
"babel-tape-runner": "^2.0.1",
1920
"babel-types": "^6.7.2",
2021
"babelify": "^7.2.0",

0 commit comments

Comments
 (0)