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.
Files changed (123) hide show
  1. checksums.yaml +4 -4
  2. metadata +5 -126
  3. data/.babelrc +0 -3
  4. data/.coveralls.yml +0 -1
  5. data/.dockerignore +0 -2
  6. data/.eslintignore +0 -5
  7. data/.eslintrc +0 -48
  8. data/.gitignore +0 -26
  9. data/.jscsrc +0 -26
  10. data/.rspec +0 -2
  11. data/.rubocop.yml +0 -70
  12. data/.scss-lint.yml +0 -205
  13. data/.travis.yml +0 -41
  14. data/CHANGELOG.md +0 -42
  15. data/Dockerfile_tests +0 -12
  16. data/Gemfile +0 -38
  17. data/README.md +0 -363
  18. data/Rakefile +0 -5
  19. data/app/assets/javascripts/react_on_rails.js +0 -241
  20. data/app/helpers/react_on_rails_helper.rb +0 -224
  21. data/docker-compose.yml +0 -11
  22. data/docs/LICENSE +0 -21
  23. data/docs/additional_reading/heroku_deployment.md +0 -23
  24. data/docs/additional_reading/manual_installation.md +0 -142
  25. data/docs/additional_reading/node_dependencies_and_npm.md +0 -29
  26. data/docs/additional_reading/optional_configuration.md +0 -34
  27. data/docs/additional_reading/react-and-redux.md +0 -36
  28. data/docs/additional_reading/react_router.md +0 -45
  29. data/docs/additional_reading/server_rendering_tips.md +0 -16
  30. data/docs/additional_reading/tips.md +0 -10
  31. data/docs/additional_reading/webpack.md +0 -46
  32. data/docs/code_of_conduct.md +0 -13
  33. data/docs/coding-style/linters.md +0 -64
  34. data/docs/coding-style/style.md +0 -42
  35. data/docs/contributing.md +0 -62
  36. data/docs/generator_testing.md +0 -20
  37. data/docs/install_and_releasing.md +0 -24
  38. data/docs/sample_generated_js/README.md +0 -4
  39. data/docs/sample_generated_js/client-generated.js +0 -12
  40. data/docs/sample_generated_js/server-generated.js +0 -25
  41. data/lib/generators/USAGE +0 -99
  42. data/lib/generators/react_on_rails/base_generator.rb +0 -198
  43. data/lib/generators/react_on_rails/bootstrap_generator.rb +0 -91
  44. data/lib/generators/react_on_rails/dev_tests_generator.rb +0 -30
  45. data/lib/generators/react_on_rails/generator_errors.rb +0 -15
  46. data/lib/generators/react_on_rails/generator_helper.rb +0 -58
  47. data/lib/generators/react_on_rails/heroku_deployment_generator.rb +0 -30
  48. data/lib/generators/react_on_rails/install_generator.rb +0 -111
  49. data/lib/generators/react_on_rails/js_linters_generator.rb +0 -19
  50. data/lib/generators/react_on_rails/react_no_redux_generator.rb +0 -41
  51. data/lib/generators/react_on_rails/react_with_redux_generator.rb +0 -52
  52. data/lib/generators/react_on_rails/ruby_linters_generator.rb +0 -33
  53. data/lib/generators/react_on_rails/templates/base/base/Procfile.dev.tt +0 -4
  54. data/lib/generators/react_on_rails/templates/base/base/REACT_ON_RAILS.md +0 -16
  55. data/lib/generators/react_on_rails/templates/base/base/app/controllers/hello_world_controller.rb +0 -5
  56. data/lib/generators/react_on_rails/templates/base/base/app/views/hello_world/index.html.erb.tt +0 -5
  57. data/lib/generators/react_on_rails/templates/base/base/client/.babelrc +0 -3
  58. data/lib/generators/react_on_rails/templates/base/base/client/REACT_ON_RAILS_CLIENT_README.md +0 -3
  59. data/lib/generators/react_on_rails/templates/base/base/client/app/bundles/HelloWorld/startup/globals.jsx.tt +0 -5
  60. data/lib/generators/react_on_rails/templates/base/base/client/index.jade +0 -15
  61. data/lib/generators/react_on_rails/templates/base/base/client/npm-shrinkwrap.json +0 -2907
  62. data/lib/generators/react_on_rails/templates/base/base/client/package.json.tt +0 -98
  63. data/lib/generators/react_on_rails/templates/base/base/client/server.js +0 -64
  64. data/lib/generators/react_on_rails/templates/base/base/client/webpack.client.base.config.js.tt +0 -67
  65. data/lib/generators/react_on_rails/templates/base/base/client/webpack.client.hot.config.js.tt +0 -67
  66. data/lib/generators/react_on_rails/templates/base/base/client/webpack.client.rails.config.js +0 -41
  67. data/lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb +0 -28
  68. data/lib/generators/react_on_rails/templates/base/base/lib/tasks/assets.rake.tt +0 -26
  69. data/lib/generators/react_on_rails/templates/base/base/lib/tasks/linters.rake.tt +0 -88
  70. data/lib/generators/react_on_rails/templates/base/base/package.json +0 -31
  71. data/lib/generators/react_on_rails/templates/base/server_rendering/client/app/bundles/HelloWorld/startup/serverGlobals.jsx +0 -3
  72. data/lib/generators/react_on_rails/templates/base/server_rendering/client/webpack.server.rails.config.js +0 -40
  73. data/lib/generators/react_on_rails/templates/bootstrap/app/assets/stylesheets/_bootstrap-custom.scss +0 -63
  74. data/lib/generators/react_on_rails/templates/bootstrap/client/assets/stylesheets/_post-bootstrap.scss +0 -10
  75. data/lib/generators/react_on_rails/templates/bootstrap/client/assets/stylesheets/_pre-bootstrap.scss +0 -8
  76. data/lib/generators/react_on_rails/templates/bootstrap/client/assets/stylesheets/_react-on-rails-sass-helper.scss +0 -19
  77. data/lib/generators/react_on_rails/templates/bootstrap/client/bootstrap-sass.config.js +0 -89
  78. data/lib/generators/react_on_rails/templates/dev_tests/.rspec +0 -2
  79. data/lib/generators/react_on_rails/templates/dev_tests/spec/features/hello_world_spec.rb +0 -25
  80. data/lib/generators/react_on_rails/templates/dev_tests/spec/rails_helper.rb +0 -57
  81. data/lib/generators/react_on_rails/templates/dev_tests/spec/simplecov_helper.rb +0 -21
  82. data/lib/generators/react_on_rails/templates/dev_tests/spec/spec_helper.rb +0 -95
  83. data/lib/generators/react_on_rails/templates/heroku_deployment/.buildpacks +0 -2
  84. data/lib/generators/react_on_rails/templates/heroku_deployment/Procfile +0 -1
  85. data/lib/generators/react_on_rails/templates/heroku_deployment/config/puma.rb +0 -15
  86. data/lib/generators/react_on_rails/templates/js_linters/client/.eslintignore +0 -1
  87. data/lib/generators/react_on_rails/templates/js_linters/client/.eslintrc +0 -48
  88. data/lib/generators/react_on_rails/templates/js_linters/client/.jscsrc +0 -18
  89. data/lib/generators/react_on_rails/templates/no_redux/base/client/app/bundles/HelloWorld/components/HelloWorldWidget.jsx +0 -39
  90. data/lib/generators/react_on_rails/templates/no_redux/base/client/app/bundles/HelloWorld/containers/HelloWorld.jsx +0 -33
  91. data/lib/generators/react_on_rails/templates/no_redux/base/client/app/bundles/HelloWorld/startup/HelloWorldAppClient.jsx.tt +0 -12
  92. data/lib/generators/react_on_rails/templates/no_redux/server_rendering/client/app/bundles/HelloWorld/startup/HelloWorldAppServer.jsx +0 -11
  93. data/lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/actions/helloWorldActionCreators.jsx +0 -8
  94. data/lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/components/HelloWorldWidget.jsx +0 -48
  95. data/lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/constants/helloWorldConstants.jsx +0 -8
  96. data/lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/containers/HelloWorld.jsx +0 -43
  97. data/lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/reducers/helloWorldReducer.jsx +0 -21
  98. data/lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/reducers/index.jsx +0 -14
  99. data/lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/startup/HelloWorldAppClient.jsx.tt +0 -21
  100. data/lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/store/helloWorldStore.jsx +0 -35
  101. data/lib/generators/react_on_rails/templates/redux/base/client/app/lib/middlewares/loggerMiddleware.js +0 -20
  102. data/lib/generators/react_on_rails/templates/redux/server_rendering/client/app/bundles/HelloWorld/startup/HelloWorldAppServer.jsx +0 -21
  103. data/lib/generators/react_on_rails/templates/ruby_linters/.rubocop.yml +0 -26
  104. data/lib/generators/react_on_rails/templates/ruby_linters/.scss-lint.yml +0 -205
  105. data/lib/generators/react_on_rails/templates/ruby_linters/lib/tasks/brakeman.rake +0 -17
  106. data/lib/generators/react_on_rails/templates/ruby_linters/lib/tasks/ci.rake +0 -33
  107. data/lib/generators/react_on_rails/templates/ruby_linters/ruby-lint.yml +0 -20
  108. data/lib/react_on_rails.rb +0 -6
  109. data/lib/react_on_rails/configuration.rb +0 -53
  110. data/lib/react_on_rails/engine.rb +0 -7
  111. data/lib/react_on_rails/prerender_error.rb +0 -31
  112. data/lib/react_on_rails/server_rendering_pool.rb +0 -111
  113. data/lib/react_on_rails/version.rb +0 -3
  114. data/rakelib/docker.rake +0 -33
  115. data/rakelib/dummy_apps.rake +0 -29
  116. data/rakelib/example_type.rb +0 -160
  117. data/rakelib/examples.rake +0 -103
  118. data/rakelib/examples_config.yml +0 -19
  119. data/rakelib/lint.rake +0 -37
  120. data/rakelib/run_rspec.rake +0 -65
  121. data/rakelib/task_helpers.rb +0 -44
  122. data/react_on_rails.gemspec +0 -31
  123. data/ruby-lint.yml +0 -24
@@ -1,41 +0,0 @@
1
- sudo: required
2
-
3
- language: ruby
4
-
5
- rvm:
6
- - 2.2.3
7
-
8
- services:
9
- - docker
10
-
11
- gemfile:
12
- - spec/dummy/Gemfile
13
-
14
- env:
15
- - export RAILS_ENV=test
16
-
17
- before_install:
18
- - sudo apt-get update
19
- - curl -L https://github.com/docker/compose/releases/download/1.4.0/docker-compose-`uname -s`-`uname -m` > docker-compose
20
- - chmod +x docker-compose
21
- - sudo mv docker-compose /usr/local/bin
22
- - sudo apt-get install -y xvfb
23
-
24
- install:
25
- - rm -rf ~/.nvm && git clone https://github.com/creationix/nvm.git ~/.nvm && (cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`) && source ~/.nvm/nvm.sh && nvm install 4.2.0
26
- - npm install -g npm
27
- - bundle install
28
- - rake dummy_apps
29
- - rake examples
30
- - docker-compose up lint
31
-
32
- before_script:
33
- - "export DISPLAY=:99"
34
- - Xvfb :99 -ac -screen scn 1600x1200x16 &
35
-
36
- script:
37
- - rake
38
-
39
- notifications:
40
- slack:
41
- secure: LfcUk4AJ4vAxWwRIyw4tFh8QNbYefMwfG/oLfsN3CdRMWMOtCOHR1GGsRhAOlfVVJ/FvHqVqWj5gK7z7CaO5Uvl7rD3/zJ8QzExKx/iH9yWj55iIPuKLzwFNnBwRpFW/cqyU2lFPPRxGD50BUn3c+qybkuSqtKZ6qtTowwqlxLa5iyM3N95aZp7MEIKCP7cPcnHfLbJyP8wBpotp/rtw62eXM2HIRJJwgjcp+n+My7VFR9DnBXNFf6R91aZHM4U4cHHDbu15HFtH8honVrzK1JQdyqMNHga+j04dFuaS7z9Q369/hsELMOBp/227+Pz7ZRfWZFK4UASguOvyeX7RmGTRpTuWLm1XJeUzfsPZVROecaSVQBve+U7F12yKqilt97QlvRXn2EGyBILqvxtFNNR4S9kgAf72/6EFgiM1TKq7i9zy6lVOnagU2+7amq7UeopX1uoFsUfNKMR7YbgV1WjF0IK95UP0b0/7ZOJlPYgi5zzkQi129qAFWSMmxGk+ZpsttHh/tjJtvAh0A3mHq/zb5w4ub/MbSyZqeDUNgGj72QArOWUFSAStQT1ybsVLeDoKPgOvVq7OV1D64rpcHjBXcqOCit8tDZ+TqkFhcYJo2cITSaqE4zJXn+4F5s7So5O8CyfKYQq+kFJCooYGmfgTUckJpGl7eIvKmL4TN9Q=
@@ -1,42 +0,0 @@
1
- # Change Log
2
- All notable changes to this project will be documented in this file. Items under `Unreleased` is upcoming features that will be out in next version.
3
-
4
- ## v1.2.2
5
- ### Fixed
6
- - Missing Lodash from generated package.json [#175](https://github.com/shakacode/react_on_rails/pull/175)
7
- - Rails 3.2 could not run generators [#182](https://github.com/shakacode/react_on_rails/pull/182)
8
- - Better placement of jquery_ujs dependency [#171](https://github.com/shakacode/react_on_rails/pull/171)
9
- - Add more detailed description when adding --help option to generator [#161](https://github.com/shakacode/react_on_rails/pull/161)
10
- - Lots of better docs.
11
-
12
- ## v1.2.0
13
- ### Added
14
- - Support `--skip-bootstrap` or `-b` option for generator.
15
- - Create examples tasks to test generated example apps.
16
-
17
- ### Fixed
18
- - Fix non-server rendering configuration issues.
19
- - Fix application.js incorrect overwritten issue.
20
- - Fix Gemfile dependencies.
21
- - Fix several generator issues.
22
-
23
- ### Removed
24
- - Remove templates/client folder.
25
-
26
- ## [1.1.1] - 2015-11-28
27
- ### Added
28
- - Support for React Router.
29
- - Error and redirect handling.
30
- - Turbolinks support.
31
-
32
- ### Fixed
33
- - Fix several generator related issues.
34
-
35
- ### Deprecated
36
- - Nothing.
37
-
38
- ### Removed
39
- - Nothing.
40
-
41
- [Unreleased]: https://github.com/shakacode/react_on_rails/compare/v1.0.0...HEAD
42
- [1.1.1]: https://github.com/shakacode/react_on_rails/compare/v1.0.0...v1.1.1
@@ -1,12 +0,0 @@
1
- FROM dylangrafmyre/docker-ci
2
-
3
- WORKDIR /app/
4
-
5
- COPY ["/lib/react_on_rails/version.rb", "/app/lib/react_on_rails/"]
6
- COPY ["Gemfile", "Gemfile.lock", "react_on_rails.gemspec", "rakelib/", "/app/"]
7
- COPY ["/spec/dummy/Gemfile", "/spec/dummy/Gemfile.lock", "/app/spec/dummy/"]
8
- RUN bundle install --gemfile=spec/dummy/Gemfile
9
-
10
- ENV DISPLAY :99
11
- ENTRYPOINT service xvfd start \
12
- && rake
data/Gemfile DELETED
@@ -1,38 +0,0 @@
1
- source "https://rubygems.org"
2
-
3
- # Specify your gem"s dependencies in react_on_rails.gemspec
4
- gemspec
5
-
6
- # The following gems are dependencies of the gem's dummy/example apps, not the gem itself.
7
- # They must be defined here because of the way Travis CI works, in that it will only
8
- # bundle install from a single Gemfile. Therefore, all gems that we will need for any dummy/example
9
- # app have to be manually added to this file.
10
- gem "awesome_print"
11
- gem "bootstrap-sass"
12
- gem "capybara"
13
- gem "capybara-screenshot"
14
- gem "chromedriver-helper"
15
- gem "coffee-rails", "~> 4.1.0"
16
- gem "jbuilder", "~> 2.0"
17
- gem "jquery-rails"
18
- gem "launchy"
19
- gem "pry"
20
- gem "pry-byebug"
21
- gem "pry-doc"
22
- gem "pry-rails"
23
- gem "pry-rescue"
24
- gem "pry-stack_explorer"
25
- gem "rails", "4.2.5"
26
- gem "rspec-rails"
27
- gem "rubocop", require: false
28
- gem "ruby-lint", require: false
29
- gem "sass-rails", "~> 5.0"
30
- gem "scss_lint", require: false
31
- gem "sdoc", "~> 0.4.0", group: :doc
32
- gem "selenium-webdriver"
33
- gem "spring"
34
- gem "sqlite3"
35
- gem "therubyracer"
36
- gem "turbolinks"
37
- gem "uglifier", ">= 2.7.2"
38
- gem "web-console", "~> 2.0"
data/README.md DELETED
@@ -1,363 +0,0 @@
1
- [![Build Status](https://travis-ci.org/shakacode/react_on_rails.svg?branch=master)](https://travis-ci.org/shakacode/react_on_rails) [![Coverage Status](https://coveralls.io/repos/shakacode/react_on_rails/badge.svg?branch=master&service=github)](https://coveralls.io/github/shakacode/react_on_rails?branch=master) [![Dependency Status](https://gemnasium.com/shakacode/react_on_rails.svg)](https://gemnasium.com/shakacode/react_on_rails) [![Gem Version](https://badge.fury.io/rb/react_on_rails.svg)](https://badge.fury.io/rb/react_on_rails)
2
-
3
- # NEWS
4
- 2.0 is about to ship! Please grab the latest and let us know if you see any issues!
5
-
6
- * https://rubygems.org/gems/react_on_rails
7
- * https://www.npmjs.com/package/react-on-rails
8
- * Branch: https://github.com/shakacode/react_on_rails/tree/npm-react-on-rails-js
9
- * PR: https://github.com/shakacode/react_on_rails/pull/148
10
-
11
- # React on Rails
12
- React on Rails integrates Facebook's [React](https://github.com/facebook/react) front-end framework with Rails. Currently, both React v0.14 and v0.13 are supported, with server rendering. [Redux](https://github.com/rackt/redux) and [React-Router](https://github.com/rackt/react-redux) are supported as well. See the Rails on Maui [blog post](http://www.railsonmaui.com/blog/2014/10/03/integrating-webpack-and-the-es6-transpiler-into-an-existing-rails-project/) that started it all!
13
-
14
- Be sure to see the [React Webpack Rails Tutorial Code](https://github.com/shakacode/react-webpack-rails-tutorial) along with the live example at [www.reactrails.com](http://www.reactrails.com).
15
-
16
- ## Including your React Component in your Rails Views
17
- Please see [Getting Started](#getting-started) for how to set up your Rails project for React on Rails to understand how `react_on_rails` can see your ReactComponents.
18
-
19
- + *Normal Mode (React component will be rendered on client):*
20
-
21
- ```erb
22
- <%= react_component("HelloWorldApp", @some_props) %>
23
- ```
24
- + *Server-Side Rendering (React component is first rendered into HTML on the server):*
25
-
26
- ```erb
27
- <%= react_component("HelloWorldApp", @some_props, prerender: true) %>
28
- ```
29
-
30
- + The `component_name` parameter is a string matching the name you used to globally expose your React component. So, in the above examples, if you had a React component named "HelloWorldApp," you would set `window.HelloWorldApp = HelloWorldApp` in your JavaScript. Exposing your component in this way is how React on Rails is able to reference your component from a Rails view. You can expose as many components as you like, as long as their names do not collide. See below for the details of how you expose your components via the react_on_rails webpack configuration.
31
- + `@some_props` can be either a hash or JSON string. This is an optional argument assuming you do not need to pass any options (if you want to pass options, such as `prerender: true`, but you do not want to pass any properties, simply pass an empty hash `{}`). This will make the data available in your component:
32
-
33
- ```ruby
34
- # Rails View
35
- <%= react_component("HelloWorldApp", { name: "Stranger" })
36
- ```
37
- ```javascript
38
- // inside your React component
39
- this.props.name // "Stranger"
40
- ```
41
-
42
- ## Documentation
43
-
44
- + [Features](#features)
45
- + [Why Webpack?](#why-webpack)
46
- + [Getting Started](#getting-started)
47
- + [How it Works](#how-it-works)
48
- - [Client-Side Rendering vs. Server-Side Rendering](#client-side-rendering-vs-server-side-rendering)
49
- - [Building the Bundles](#building-the-bundles)
50
- - [Globally Exposing Your React Components](#globally-exposing-your-react-components)
51
- - [Rails View Helpers In-Depth](#rails-view-helpers-in-depth)
52
- - [Redux](#redux)
53
- - [React-Router](#react-router)
54
- + [Generator](#generator)
55
- - [Understanding the Organization of the Generated Client Code](#understanding-the-organization-of-the-generated-client-code)
56
- - [Redux](#redux)
57
- - [Using Images and Fonts](#using-images-and-fonts)
58
- - [Bootstrap Integration](#bootstrap-integration)
59
- + [Bootstrap via Rails Server](#bootstrap-via-rails-server)
60
- + [Bootstrap via Webpack HMR Dev Server](#bootstrap-via-webpack-hmr-dev-server)
61
- + [Keeping Custom Bootstrap Configurations Synced](#keeping-custom-bootstrap-configurations-synced)
62
- + [Skip Bootstrap Integration](#skip-bootstrap-integration)
63
- - [Linters](#linters)
64
- + [JavaScript Linters](#javascript-linters)
65
- + [Ruby Linters](#ruby-linters)
66
- + [Running the Linters](#running-the-linters)
67
- + [Developing with the Webpack Dev Server](#developing-with-the-webpack-dev-server)
68
- + [Adding Additional Routes for the Dev Server](#adding-additional-routes-for-the-dev-server)
69
- + [Additional Reading](#additional-reading)
70
- + [Contributing](#contributing)
71
- + [License](#license)
72
- + [Authors](#authors)
73
- + [About ShakaCode](#about-shakacode)
74
-
75
- ---
76
-
77
- ## Features
78
- Like the [react-rails](https://github.com/reactjs/react-rails) gem, React on Rails is capable of server-side rendering with fragment caching and is compatible with [turbolinks](https://github.com/rails/turbolinks). Unlike react-rails, which depends heavily on sprockets and jquery-ujs, React on Rails uses [webpack](http://webpack.github.io/) and does not depend on jQuery. While the initial setup is slightly more involved, it allows for advanced functionality such as:
79
-
80
- + [Redux](https://github.com/rackt/redux)
81
- + [Webpack dev server](https://webpack.github.io/docs/webpack-dev-server.html) with [hot module replacement](https://webpack.github.io/docs/hot-module-replacement-with-webpack.html)
82
- + [Webpack optimization functionality](https://github.com/webpack/docs/wiki/optimization)
83
- + _*(Coming Soon)*_ [React Router](https://github.com/rackt/react-router)
84
- + *([Gem *Pull Request*](https://github.com/shakacode/react_on_rails/pull/68))*
85
- + *([Tutorial Pull Request](https://github.com/shakacode/react-webpack-rails-tutorial/pull/128))*
86
-
87
- See the [react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial) for an example of a live implementation and code.
88
-
89
- ## Why Webpack?
90
-
91
- Webpack is used for 2 purposes:
92
-
93
- 1. Generate several JavaScript "bundles" for inclusion in `application.js`.
94
- 2. Providing the Webpack Dev Server for quick prototyping of components without needing to refresh your browser to see updates.
95
-
96
- This usage of webpack fits neatly and simply into the existing Rails sprockets system and you can include React components on a Rails view with a simple helper.
97
-
98
- Compare this to some alternative approaches for SPAs (Single Page Apps) that utilize Webpack and Rails. They will use a separate node server to distribute web pages, JavaScript assets, CSS, etc., and will still use Rails as an API server. A good example of this is our ShakaCode team member Alex's article [
99
- Universal React with Rails: Part I](https://medium.com/@alexfedoseev/isomorphic-react-with-rails-part-i-440754e82a59).
100
-
101
- We're definitely not doing that. With react_on_rails, webpack is mainly generating a nice JavaScript file for inclusion into `application.js`. We're going to KISS. And that's all relative given how much there is to get right in an enterprise class web application.
102
-
103
- ## Getting Started
104
- 1. Add the following to your Gemfile and bundle install:
105
-
106
- ```ruby
107
- gem "react_on_rails"
108
- ```
109
-
110
- 2. Run the generator with a simple "Hello World" example:
111
-
112
- ```bash
113
- rails generate react_on_rails:install
114
- ```
115
-
116
- 3. NPM install. Make sure you are on a recent version of node, preferably using nvm.
117
-
118
- ```bash
119
- npm install
120
- ```
121
-
122
- 4. Start your Rails server:
123
-
124
- ```bash
125
- foreman start -f Procfile.dev
126
- ```
127
-
128
- 5. Visit [localhost:3000/hello_world](http://localhost:3000/hello_world)
129
-
130
- ## How it Works
131
- The generator installs your webpack files in the `client` folder. Foreman uses webpack to compile your code and output the bundled results to `app/assets/javascripts/generated`, which are then loaded by sprockets. These generated bundle files have been added to your `.gitignore` for your convenience.
132
-
133
- Inside your Rails views, you can now use the `react_component` helper method provided by React on Rails.
134
-
135
- ### Client-Side Rendering vs. Server-Side Rendering
136
- In most cases, you should use the `prerender: false` (default behavior) with the provided helper method to render the React component from your Rails views. In some cases, such as when SEO is vital or many users will not have JavaScript enabled, you can enable server-rendering by passing `prerender: true` to your helper, or you can simply change the default in `config/initializers/react_on_rails`.
137
-
138
- Now the server will interpret your JavaScript using [ExecJS](https://github.com/rails/execjs) and pass the resulting HTML to the client. We recommend using [therubyracer](https://github.com/cowboyd/therubyracer) as ExecJS's runtime. The generator will automatically add it to your Gemfile for you.
139
-
140
- Note that **server-rendering requires globally exposing your components by setting them to `global`, not `window`** (as is the case with client-rendering). If using the generator, you can pass the `--server-rendering` option to configure your application for server-side rendering.
141
-
142
- In the following screenshot you can see the 3 parts of react_on_rails rendering:
143
-
144
- 1. Inline JavaScript to "client-side" render the React component.
145
- 2. The wrapper div `<div id="HelloWorld-react-component-0">` enclosing the server-rendered HTML for the React component
146
- 3. Additional JavaScript to console log any messages, such as server rendering errors.
147
-
148
- **Note**: If server rendering is not used (prerender: false), then the major difference is that the HTML rendered contains *only* the outer div: `<div id="HelloWorld-react-component-0"/>`
149
-
150
- ![Comparison of a normal React Component with its server-rendered version](https://cloud.githubusercontent.com/assets/1118459/10157268/41435186-6624-11e5-9341-6fc4cf35ee90.png)
151
-
152
- ### Building the Bundles
153
- Each time you change your client code, you will need to re-generate the bundles (the webpack-created JavaScript files included in application.js). The included Foreman `Procfile.dev` will take care of this for you by watching your JavaScript code files for changes. Simply run `foreman start -f Procfile.dev`.
154
-
155
- On Heroku deploys, the `lib/assets.rake` file takes care of running webpack during deployment. If you have used the provided generator, these bundles will automatically be added to your `.gitignore` in order to prevent extraneous noise from re-generated code in your pull requests. You will want to do this manually if you do not use the provided generator.
156
-
157
- ### Globally Exposing Your React Components
158
- Place your JavaScript code inside of the provided `client/app` folder. Use modules just as you would when using webpack alone. The difference here is that instead of mounting React components directly to an element using `React.render`, you **expose your components globally and then mount them with helpers inside of your Rails views**.
159
-
160
- + *Normal Mode (JavaScript is Rendered on client):*
161
-
162
- If you are not server rendering, `clientGlobals.jsx` will have
163
-
164
- ```javascript
165
- window.HelloWorldApp = HelloWorldApp;
166
- ```
167
- + *Server-Side Rendering:*
168
-
169
- If you are server rendering, `globals.jsx` will have:
170
-
171
- ```javascript
172
- window.HelloWorldApp = HelloWorldAppClient;
173
- ```
174
-
175
- `serverGlobals.jsx` will have:
176
-
177
- ```javascript
178
- global.HelloWorldApp = HelloWorldAppServer;
179
- ```
180
-
181
- In general, you want different initialization for your server rendered components.
182
-
183
- ### Rails View Helpers In-Depth
184
- Once the bundled files have been generated in your `app/assets/javascripts/generated` folder and you have exposed your components globally, you will want to run your code in your Rails views using the included helper method.
185
-
186
- This is how you actually render the React components you exposed to `window` inside of `clientGlobals` (and `global` inside of `serverGlobals` if you are server rendering).
187
-
188
- #### react_component
189
- `react_component(component_name, props = {}, options = {})`
190
-
191
- + **react_component_name:** Can be a React component, created using a ES6 class, or `React.createClass`, or a generator function that returns a React component.
192
- + **props:** Ruby Hash which contains the properties to pass to the react object, or a JSON string. If you pass a string, we'll escape it for you.
193
- + **options:**
194
- + **generator_function:** default is false, set to true if you want to use a generator function rather than a React Component. Why would you do this? For example, you may want the ability to use the passed-in props to initialize a redux store or setup react-router. Or you may want to return different components depending on what's in the props.
195
- + **prerender:** enable server-side rendering of component. Set to false when debugging!
196
- + **router_redirect_callback:** Use this option if you want to provide a custom handler for redirects on server rendering. If you don't specify this, we'll simply change the rendered output to a script that sets window.location to the new route. Set this up exactly like a generator_function. Your function will will take one parameter, containing all the values that react-router gives on a redirect request, such as pathname, search, etc.
197
- + **trace:** set to true to print additional debugging information in the browser. Defaults to true for development, off otherwise.
198
- + **replay_console:** Default is true. False will disable echoing server-rendering logs to the browser. While this can make troubleshooting server rendering difficult, so long as you have the default configuration of logging_on_server set to true, you'll still see the errors on the server.
199
- + **raise_on_prerender_error:** Default is false. True will throw an error on the server side rendering. Your controller will have to handle the error.
200
- + Any other options are passed to the content tag, including the id
201
-
202
- #### server_render_js
203
- `server_render_js(js_expression, options = {})`
204
-
205
- + js_expression, like 2 + 3, and not a block of js code. If you have more than one line that needs to be executed, wrap it in an [IIFE](https://en.wikipedia.org/wiki/Immediately-invoked_function_expression). JS exceptions will be caught and console messages handled properly
206
- + Currently the only option you may pass is `replay_console` (boolean)
207
-
208
- This is a helper method that takes any JavaScript expression and returns the output from evaluating it. If you have more than one line that needs to be executed, wrap it in an IIFE. JS exceptions will be caught and console messages handled properly.
209
-
210
- ## Generator
211
- 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` means that `skip-bootstrap` is off.
212
-
213
- Run `rails generate react_on_rails:install --help` for descriptions of all available options:
214
-
215
- ```
216
- Usage:
217
- rails generate react_on_rails:install [options]
218
-
219
- Options:
220
- -R, [--redux], [--no-redux] # Install Redux gems and Redux version of Hello World Example
221
- -S, [--server-rendering], [--no-server-rendering] # Add necessary files and configurations for server-side rendering
222
- -j, [--skip-js-linters], [--no-skip-js-linters] # Skip installing JavaScript linting files
223
- -L, [--ruby-linters], [--no-ruby-linters] # Install ruby linting files, tasks, and configs
224
- -H, [--heroku-deployment], [--no-heroku-deployment] # Install files necessary for deploying to Heroku
225
- -b, [--skip-bootstrap], [--no-skip-bootstrap] # Skip installing files for bootstrap support
226
-
227
- Runtime options:
228
- -f, [--force] # Overwrite files that already exist
229
- -p, [--pretend], [--no-pretend] # Run but do not make any changes
230
- -q, [--quiet], [--no-quiet] # Suppress status output
231
- -s, [--skip], [--no-skip] # Skip files that already exist
232
-
233
- Description:
234
- Create react on rails files for install generator.
235
- ```
236
-
237
- 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.
238
-
239
- ### Understanding the Organization of the Generated Client Code
240
- 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.
241
-
242
- Inside of the generated "HelloWorld" domain you will find the following folders:
243
-
244
- + `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 `clientGlobals` file that exposes the aforementioned files (as well as a `serverGlobals` file if using server rendering). These globals files are what webpack is using as an entry point.
245
- + `containers`: "smart components" (components that have functionality and logic that is passed to child "dumb components").
246
- + `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.
247
-
248
- 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).
249
-
250
- ### Redux
251
- 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.
252
-
253
- 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`.
254
-
255
- ### Using Images and Fonts
256
- 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.
257
-
258
- 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.
259
-
260
- ### Bootstrap Integration
261
- React on Rails ships with Twitter Bootstrap already integrated into the build. Note that the generator removes `require_tree` in both the application.js and application.css.scss files. This is to ensure the correct load order for the bootstrap integration, and is usually a good idea in general. You will therefore need to explicitly require your files.
262
-
263
- How the Bootstrap library is loaded depends upon whether one is using the Rails server or the HMR development server.
264
-
265
- #### Bootstrap via Rails Server
266
- In the former case, the Rails server loads `bootstrap-sprockets`, provided by the `bootstrap-sass` ruby gem (added automatically to your Gemfile by the generator) via the `app/assets/stylesheets/_bootstrap-custom.scss` partial.
267
-
268
- This allows for using Bootstrap in your regular Rails stylesheets. If you wish to customize any of the Bootstrap variables, you can do so via the `client/assets/stylesheets/_pre-bootstrap.scss` partial.
269
-
270
- #### Bootstrap via Webpack Dev Server
271
- When using the webpack dev server, which does not go through Rails, bootstrap is loaded via the [bootstrap-sass-loader](https://github.com/shakacode/bootstrap-sass-loader) which uses the `client/bootstrap-sass-config.js` file.
272
-
273
- #### Keeping Custom Bootstrap Configurations Synced
274
- Because the webpack dev server and Rails each load Bootstrap via a different file (explained in the two sections immediately above), any changes to the way components are loaded in one file must also be made to the other file in order to keep styling consistent between the two. For example, if an import is excluded in `_bootstrap-custom.scss`, the same import should be excluded in `bootstrap-sass-config.js` so that styling in the Rails server and the webpack dev server will be the same.
275
-
276
- #### Skip Bootstrap Integration
277
- Bootstrap integration is enabled by default, but can be disabled by passing the `--skip-bootstrap` flag (alias `-b`). When you don't need Bootstrap in your existing project, just skip it as needed.
278
-
279
- ### Linters
280
- The React on Rails generator can add linters and their recommended accompanying configurations to your project. There are two classes of linters: ruby linters and JavaScript linters.
281
-
282
- ##### JavaScript Linters
283
- JavaScript linters are **enabled by default**, but can be disabled by passing the `--skip-js-linters` flag (alias `j`) , and those that run in Node have been add to `client/package.json` under `devDependencies`.
284
-
285
- ##### Ruby Linters
286
- Ruby linters are **disabled by default**, but can be enabled by passing the `--ruby-linters` flag when generating. These linters have been added to your Gemfile in addition to the the appropriate Rake tasks.
287
-
288
- We really love using all the linters! Give them a try.
289
-
290
- #### Running the Linters
291
- To run the linters (runs all linters you have installed, even if you installed both Ruby and Node):
292
-
293
- ```bash
294
- rake lint
295
- ```
296
-
297
- Run this command to see all the linters available
298
-
299
- ```bash
300
- rake -T lint
301
- ```
302
-
303
- **Here's the list:**
304
- ```bash
305
- rake lint # Runs all linters
306
- rake lint:eslint # eslint
307
- rake lint:js # JS Linting
308
- rake lint:jscs # jscs
309
- rake lint:rubocop[fix] # Run Rubocop lint in shell
310
- rake lint:ruby # Run ruby-lint as shell
311
- rake lint:scss # See docs for task 'scss_lint'
312
- ```
313
-
314
- ## Developing with the Webpack Dev Server
315
- 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.
316
-
317
- 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).
318
-
319
- ```bash
320
- foreman start -f Procfile.dev
321
- ```
322
-
323
- Open your browser to [localhost:4000](http://localhost:4000). 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.
324
-
325
- Note that **React-related error messages are typically significantly 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.
326
-
327
- ### Adding Additional Routes for the Dev Server
328
- 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/server.js).
329
-
330
- ## Additional Reading
331
- + [Generated Client Code](docs/additional_reading/generated_client_code.md)
332
- + [Heroku Deployment](docs/additional_reading/heroku_deployment.md)
333
- + [Manual Installation](docs/additional_reading/manual_installation.md)
334
- + [Node Dependencies and NPM](docs/additional_reading/node_dependencies_and_npm.md)
335
- + [Optional Configuration](docs/additional_reading/optional_configuration.md)
336
- + [React Router](docs/additional_reading/react_router.md)
337
- + [Server Rendering Tips](docs/additional_reading/server_rendering_tips.md)
338
- + [Tips](docs/additional_reading/tips.md)
339
- + [Webpack Configuration](docs/additional_reading/webpack.md)
340
- + [Webpack Cookbook](https://christianalfoni.github.io/react-webpack-cookbook/index.html)
341
-
342
- ## Contributing
343
- Bug reports and pull requests are welcome. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to our version of the [Contributor Covenant](contributor-covenant.org) code of conduct (see [CODE OF CONDUCT](docs/code_of_conduct.md)).
344
-
345
- See [Contributing](docs/contributing.md) to get started.
346
-
347
- ## License
348
- The gem is available as open source under the terms of the [MIT License](docs/LICENSE).
349
-
350
- ## Authors
351
- [The Shaka Code team!](http://www.shakacode.com/about/)
352
-
353
- The project started with [Justin Gordon](https://github.com/justin808/) pairing with [Samnang Chhun](https://github.com/samnang) to figure out how to do server rendering with Webpack plus Rails. [Alex Fedoseev](https://github.com/alexfedoseev) then joined in. [Rob Wise](https://github.com/robwise), [Aaron Van Bokhoven](https://github.com/aaronvb), and [Andy Wang](https://github.com/yorzi) did the bulk of the generators.
354
-
355
- We owe much gratitude to the work of the [react-rails gem](https://github.com/reactjs/react-rails). We've also been inspired by the [react_webpack_rails gem](https://github.com/netguru/react_webpack_rails).
356
-
357
- ## About [ShakaCode](http://www.shakacode.com/)
358
-
359
- Visit [our forums!](http://forum.shakacode.com). We've got a [category dedicated to react_on_rails](http://forum.shakacode.com/c/rails/reactonrails).
360
-
361
- If you're looking for consulting on a project using React and Rails, email us ([contact@shakacode.com](mailto: contact@shakacode.com))! You can also join our slack room for some free advice.
362
-
363
- We're looking for great developers that want to work with Rails + React with a distributed, worldwide team, for our own products, client work, and open source. [More info here](http://www.shakacode.com/about/index.html#work-with-us).