react_on_rails 12.0.0.pre.beta.2 → 12.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (49) hide show
  1. checksums.yaml +4 -4
  2. data/.rubocop.yml +1 -0
  3. data/.travis.yml +8 -4
  4. data/CHANGELOG.md +28 -19
  5. data/NEWS.md +5 -0
  6. data/README.md +79 -80
  7. data/SUMMARY.md +2 -2
  8. data/docs/additional-reading/converting-from-custom-webpack-config-to-rails-webpacker-config.md +10 -0
  9. data/docs/additional-reading/react-router.md +1 -1
  10. data/docs/additional-reading/recommended-project-structure.md +69 -0
  11. data/docs/additional-reading/server-rendering-tips.md +4 -1
  12. data/docs/api/javascript-api.md +3 -3
  13. data/docs/api/redux-store-api.md +2 -2
  14. data/docs/api/view-helpers-api.md +4 -4
  15. data/docs/basics/client-vs-server-rendering.md +2 -0
  16. data/docs/basics/configuration.md +21 -16
  17. data/docs/basics/deployment.md +2 -3
  18. data/docs/basics/heroku-deployment.md +24 -0
  19. data/docs/basics/hmr-and-hot-reloading-with-the-webpack-dev-server.md +62 -9
  20. data/docs/basics/i18n.md +3 -3
  21. data/docs/basics/installation-into-an-existing-rails-app.md +2 -7
  22. data/docs/basics/react-server-rendering.md +8 -5
  23. data/docs/basics/render-functions-and-railscontext.md +1 -1
  24. data/docs/basics/rspec-configuration.md +3 -4
  25. data/docs/basics/upgrading-react-on-rails.md +37 -18
  26. data/docs/basics/webpack-configuration.md +12 -22
  27. data/docs/misc/doctrine.md +1 -2
  28. data/docs/outdated/code-splitting.md +3 -3
  29. data/docs/outdated/how-react-on-rails-works.md +8 -4
  30. data/docs/outdated/manual-installation-overview.md +1 -1
  31. data/docs/outdated/rails-assets.md +0 -7
  32. data/docs/tutorial.md +6 -0
  33. data/lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb +2 -0
  34. data/lib/react_on_rails/configuration.rb +45 -6
  35. data/lib/react_on_rails/helper.rb +8 -8
  36. data/lib/react_on_rails/test_helper/webpack_assets_compiler.rb +17 -0
  37. data/lib/react_on_rails/utils.rb +5 -1
  38. data/lib/react_on_rails/version.rb +1 -1
  39. data/lib/react_on_rails/webpacker_utils.rb +10 -4
  40. data/lib/tasks/assets.rake +38 -14
  41. data/package.json +1 -1
  42. data/rakelib/examples.rake +1 -1
  43. data/rakelib/lint.rake +1 -1
  44. data/rakelib/release.rake +1 -3
  45. data/react_on_rails.gemspec +1 -0
  46. data/yarn.lock +260 -109
  47. metadata +21 -6
  48. data/docs/basics/recommended-project-structure.md +0 -94
  49. data/docs/outdated/heroku-deployment.md +0 -86
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: react_on_rails
3
3
  version: !ruby/object:Gem::Version
4
- version: 12.0.0.pre.beta.2
4
+ version: 12.0.2
5
5
  platform: ruby
6
6
  authors:
7
7
  - Justin Gordon
8
8
  autorequire:
9
9
  bindir: exe
10
10
  cert_chain: []
11
- date: 2020-06-25 00:00:00.000000000 Z
11
+ date: 2020-08-26 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: addressable
@@ -80,6 +80,20 @@ dependencies:
80
80
  - - "~>"
81
81
  - !ruby/object:Gem::Version
82
82
  version: '3.0'
83
+ - !ruby/object:Gem::Dependency
84
+ name: webpacker
85
+ requirement: !ruby/object:Gem::Requirement
86
+ requirements:
87
+ - - ">="
88
+ - !ruby/object:Gem::Version
89
+ version: '4.0'
90
+ type: :runtime
91
+ prerelease: false
92
+ version_requirements: !ruby/object:Gem::Requirement
93
+ requirements:
94
+ - - ">="
95
+ - !ruby/object:Gem::Version
96
+ version: '4.0'
83
97
  - !ruby/object:Gem::Dependency
84
98
  name: awesome_print
85
99
  requirement: !ruby/object:Gem::Requirement
@@ -332,6 +346,7 @@ files:
332
346
  - docs/additional-reading/asset-pipeline.md
333
347
  - docs/additional-reading/capistrano-deployment.md
334
348
  - docs/additional-reading/convert-rails-5-api-only-app.md
349
+ - docs/additional-reading/converting-from-custom-webpack-config-to-rails-webpacker-config.md
335
350
  - docs/additional-reading/credits.md
336
351
  - docs/additional-reading/elastic-beanstalk.md
337
352
  - docs/additional-reading/foreman-issues.md
@@ -342,6 +357,7 @@ files:
342
357
  - docs/additional-reading/react-and-redux.md
343
358
  - docs/additional-reading/react-helmet.md
344
359
  - docs/additional-reading/react-router.md
360
+ - docs/additional-reading/recommended-project-structure.md
345
361
  - docs/additional-reading/server-rendering-tips.md
346
362
  - docs/additional-reading/tips.md
347
363
  - docs/additional-reading/troubleshooting-when-using-webpacker.md
@@ -359,13 +375,13 @@ files:
359
375
  - docs/basics/configuration.md
360
376
  - docs/basics/deployment.md
361
377
  - docs/basics/generator-details.md
378
+ - docs/basics/heroku-deployment.md
362
379
  - docs/basics/hmr-and-hot-reloading-with-the-webpack-dev-server.md
363
380
  - docs/basics/i18n.md
364
381
  - docs/basics/installation-into-an-existing-rails-app.md
365
382
  - docs/basics/migrating-from-react-rails.md
366
383
  - docs/basics/minitest-configuration.md
367
384
  - docs/basics/react-server-rendering.md
368
- - docs/basics/recommended-project-structure.md
369
385
  - docs/basics/render-functions-and-railscontext.md
370
386
  - docs/basics/rspec-configuration.md
371
387
  - docs/basics/upgrading-react-on-rails.md
@@ -379,7 +395,6 @@ files:
379
395
  - docs/misc/code_of_conduct.md
380
396
  - docs/misc/doctrine.md
381
397
  - docs/outdated/code-splitting.md
382
- - docs/outdated/heroku-deployment.md
383
398
  - docs/outdated/how-react-on-rails-works.md
384
399
  - docs/outdated/manual-installation-overview.md
385
400
  - docs/outdated/rails-assets-relative-paths.md
@@ -489,9 +504,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
489
504
  version: 2.5.0
490
505
  required_rubygems_version: !ruby/object:Gem::Requirement
491
506
  requirements:
492
- - - ">"
507
+ - - ">="
493
508
  - !ruby/object:Gem::Version
494
- version: 1.3.1
509
+ version: '0'
495
510
  requirements: []
496
511
  rubygems_version: 3.0.8
497
512
  signing_key:
@@ -1,94 +0,0 @@
1
- # Recommended Project structure
2
-
3
- While React On Rails does not *enforce* a specific project structure, we do *recommend* a standard organization. The more we follow standards as a community, the easier it will be for all of us to move between various Rails projects that include React On Rails.
4
-
5
- The React on Rails generator uses the standard `rails/webpacker` convention of this structure:
6
-
7
- ```yml
8
- app/javascript:
9
- ├── bundles:
10
- │ # Logical groups of files that can be used for code splitting
11
- │ └── hello-world-bundle.js
12
- ├── packs:
13
- │ # only webpack entry files here
14
- │ └── hello-world-bundle.js
15
- ```
16
-
17
- The problems with this structure and using rails/webpacker to configure Webpack for you:
18
-
19
- 1. No support for different entry points for server rendering.
20
- 2. Webpacker adds an extra layer of abstraction over Webpack, which you probably don't want.
21
-
22
- This default rails/webpacker configuration is used for the generator because:
23
-
24
- 1. Minimizes the amount of generated code to get up and running with React on Rails.
25
- 2. Good enough for very simple projects.
26
- 3. Configuration of Webpack is not the goal of this library, React on Rails.
27
-
28
-
29
- Thus, the generator structure and using rails/webpacker for Webpack configuration **is not recommended** for any commercial projects, especially those that will use server rendering. Instead, the recommended structure is shown in this example app: [github.com/shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial) and described below.
30
-
31
- ## Steps to convert from the generator defaults to use the recommended `/client` directory structure.
32
-
33
- 1. Move the directory:
34
-
35
- ```
36
- mv app/javascript client
37
- ```
38
-
39
- 2. Edit your `/config/webpacker.yml` file. Change the `default/source_path`:
40
-
41
- ```yml
42
- source_path: client
43
- ```
44
-
45
- ## Moving node_modules from `/` to `/client` with a custom webpack setup.
46
-
47
- `rails/webpacker` probably doesn't support having your main node_modules directory under `/client`, so only follow these steps if you want to use your own webpack configuration (which is highly recommended!).
48
-
49
- 1. Move the `/package.json` to `/client/package.json`
50
- 2. Create a `/package.json` that delegates to `/client/package.json`. See the example in [spec/dummy/package.json](../../spec/dummy/package.json).
51
- 3. See the webpack configuration in [spec/dummy/client](../../spec/dummy/client) for a webpack configuration example.
52
-
53
-
54
- ## JavaScript Assets
55
- 1. `/client`: All client side JavaScript goes under the `/client` directory. Place all the major domains of the client side app under client.
56
- 1. `/client/app`: All application JavaScript. Note the adherence to the [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript#naming-conventions) where we name the files to correspond to exported Objects (PascalCase) or exported functions (camelCase). We don't use dashes or snake_case for JavaScript files, except for possibly some config files.
57
- 1. `/client/app/bundles`: Top level of different app domains. Use a name within this directory for you app domains. For example, if you had a domain called `widget-editing`, then you would have: `/client/app/bundles/widget-editing`
58
- 1. `/client/app/lib`: Common code for bundles
59
- 1. Within each bundle directory (or the lib directory), such as a domain named "comments"
60
- `/client/app/bundles/comments`, use following directory structure:
61
-
62
- * `/actions`: Redux actions.
63
- * `/components`: "dumb" components (no connections to Redux or Ajax). These get props and can render themselves and children.
64
- * `/constants`: Constants used by Redux actions and reducers.
65
- * `/containers`: "smart" components. These components are bound to Redux.
66
- * `/reducers`: Reducers for redux.
67
- * `/routes`: Routes for React Router.
68
- * `/store`: Store, which might be [configured differently for dev vs. production](https://github.com/reactjs/redux/tree/master/examples/real-world/store).
69
- * `/startup`: Component bindings to stores, with registration of components and stores.
70
- * `/schemas`: Schemas for AJAX JSON requests and responses, as used by the [Normalizr](https://github.com/gaearon/normalizr) package.
71
-
72
- ## CSS, Sass, Fonts, and Images
73
- Should you move your styling assets to Webpack? Or stick with the plain Rails asset pipeline. It depends! You have 2 basic choices:
74
-
75
- ### Simple Rails Way
76
- This isn't really any technique, as you keep handling all your styling assets using Rails standard tools, such as using the [sass-rails gem](https://rubygems.org/gems/sass-rails/versions/5.0.4). Basically, Webpack doesn't get involved with styling. Your Rails layouts just doing the styling the standard Rails way.
77
-
78
- #### Advantages
79
- 1. Much simpler! There's no changes really from your current processes.
80
-
81
- ### Using Webpack to Manage Styling Assets
82
- This technique involves customization of the webpack config files to generate CSS, image, and font assets. See [webpack.client.rails.build.config.js](https://github.com/shakacode/react_on_rails/blob/master/spec%2Fdummy%2Fclient%2Fwebpack.client.rails.build.config.js) for an example how to set the webpack part.
83
-
84
- #### Directory structure
85
- 1. `/client/app/assets`: Assets for CSS for client app.
86
- 1. `/client/app/assets/fonts` and `/client/app/assets/styles`: Globally shared assets for styling. Note, most Sass and image assets will be stored next to the JavaScript files.
87
-
88
- #### Advantages
89
- 1. You can use [CSS modules](https://github.com/css-modules/css-modules), which is super compelling once you seen the benefits.
90
- 1. You can do hot reloading of your assets. Thus, you do not have to refresh your web page to see asset change, including changing styles.
91
- 1. You can run your client code on a mocked out express server for super fast prototyping. In other words, your client application can somewhat more easily be move to a different application server.
92
-
93
- #### Updates 2017-03-04 Regarding CSS handled by Webpack
94
- * See article [Best practices for CSS and CSS Modules using Webpack](https://forum.shakacode.com/t/best-practices-for-css-and-css-modules-using-webpack/799).
@@ -1,86 +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
- + `'puma'` gem: recommended Heroku webserver
6
- + `config/puma.rb`: Puma webserver config file
7
-
8
- If you want to see an updated example deployed to Heroku, please visit the [github.com/shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial).
9
-
10
- ## More details on precompilation using webpack to create JavaScript assets
11
- This is how the `assets:precompile` rake task gets modified by `react_on_rails`. You should be able to call `clear_prerequisites` and setup your own custom precompile if needed.
12
- ```ruby
13
- # These tasks run as pre-requisites of assets:precompile.
14
- # Note, it's not possible to refer to ReactOnRails configuration values at this point.
15
- Rake::Task["assets:precompile"]
16
- .clear_prerequisites
17
- .enhance([:environment, "react_on_rails:assets:compile_environment"])
18
- ```
19
-
20
- For an example of how to do this, see the [dummy app](https://github.com/shakacode/react_on_rails/blob/master/spec/dummy/lib/tasks/assets.rake).
21
-
22
- ## Caching Node Modules
23
- By default Heroku will cache the root `node_modules` directory between deploys but since we're installing in `client/node_modules` you'll need to add the following line to the `package.json` in your root directory (otherwise you'll have to sit through a full `yarn` on each deploy):
24
-
25
- ```js
26
- "cacheDirectories": [
27
- "node_modules",
28
- "client/node_modules"
29
- ],
30
- ```
31
-
32
- ## How to Deploy
33
-
34
- 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.
35
-
36
- Assuming you have downloaded and installed the Heroku command-line utility and have initialized the app, you will need to tell Heroku to use both buildpacks via the command-line:
37
-
38
- ```
39
- heroku buildpacks:set heroku/ruby
40
- heroku buildpacks:add --index 1 heroku/nodejs
41
- ```
42
-
43
- For more information, see [Using Multiple Buildpacks for an App](https://devcenter.heroku.com/articles/using-multiple-buildpacks-for-an-app)
44
-
45
- ## Fresh Rails Install
46
-
47
- ### Swap out sqlite for postgres by doing the following:
48
-
49
- #### 1. Delete the line with `sqlite` and replace it with:
50
-
51
- ```ruby
52
- gem 'pg'
53
- ```
54
-
55
- #### 2. Replace your `database.yml` file with this (assuming your app name is "ror")
56
-
57
- ```yml
58
- default: &default
59
- adapter: postgresql
60
- username:
61
- password:
62
- host: localhost
63
-
64
- development:
65
- <<: *default
66
- database: ror_development
67
-
68
- # Warning: The database defined as "test" will be erased and
69
- # re-generated from your development database when you run "rake".
70
- # Do not set this db to the same as development or production.
71
- test:
72
- <<: *default
73
- database: ror_test
74
-
75
- production:
76
- <<: *default
77
- database: ror_production
78
- ```
79
-
80
- Run:
81
-
82
- ```
83
- bundle
84
- bin/rake db:setup
85
- bin/rake db:migrate
86
- ```