You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
- See other docs in [docs/contributor-info](./docs/contributor-info)
6
6
7
-
## To run tests:
7
+
## Prerequisites
8
8
9
9
-[Yalc](https://github.com/whitecolor/yalc) must be installed globally for most local development.
10
10
- After updating code via Git, to prepare all examples:
@@ -19,7 +19,7 @@ and [Running tests](#running-tests) for more details on running tests.
19
19
20
20
# IDE/IDE SETUP
21
21
22
-
It's critical to configure your IDE/editor to ignore certain directories. Otherwise your IDE might slow to a crawl!
22
+
It's critical to configure your IDE/editor to ignore certain directories. Otherwise, your IDE might slow to a crawl!
23
23
24
24
- /coverage
25
25
- /tmp
@@ -37,7 +37,7 @@ It's critical to configure your IDE/editor to ignore certain directories. Otherw
37
37
38
38
You can test the `react-on-rails` gem using your own external test app or the gem's internal `spec/dummy` app. The `spec/dummy` app is an example of the various setup techniques you can use with the gem.
Note that you will need to bundle install after making this change, but also that **you will need to restart your Rails application if you make any changes to the gem**.
57
57
58
-
## Testing the Node package for react-on-rails via Yalc
58
+
## Testing the Node package for React on Rails via Yalc
59
59
60
-
In addition to testing the Ruby parts out, you can also test the node package parts of the gem with an external application. First, be **sure** to build the NPM package:
60
+
In addition to testing the Ruby parts out, you can also test the Node package parts of the gem with an external application. First, be **sure** to build the NPM package:
61
61
62
62
```sh
63
63
cd react_on_rails/
@@ -116,9 +116,9 @@ After checking out the repo, making sure you have rvm and nvm setup (setup ruby
116
116
117
117
### Local Node Package
118
118
119
-
Note, the example and dummy apps will use your local node_package folder as the react-on-rails node package. This will also be done automatically for you via the `rake examples:gen_all` rake task.
119
+
Note, the example and dummy apps will use your local `node_packages` folder as the `react-on-rails` node package. This will also be done automatically for you via the `rake examples:gen_all` rake task.
120
120
121
-
_Side note: It's critical to use the alias section of the webpack config to avoid a double inclusion error. This has already been done for you in the example and dummy apps, but for reference:_
121
+
_Side note: It's critical to use the alias section of the Webpack config to avoid a double inclusion error. This has already been done for you in the example and dummy apps, but for reference:_
122
122
123
123
```js
124
124
resolve: {
@@ -137,8 +137,8 @@ yarn
137
137
yarn build
138
138
```
139
139
140
-
Or run this which builds the yarn package, then the webpack files for spec/dummy, and runs tests in
141
-
spec/dummy.
140
+
Or run this, which builds the Yarn package, then the Webpack files for `spec/dummy`, and runs tests in
141
+
`spec/dummy`.
142
142
143
143
```sh
144
144
# Optionally change default capybara driver
@@ -182,7 +182,7 @@ yarn run check
182
182
183
183
### Starting the Dummy App
184
184
185
-
To run the dummy app, it's **CRITICAL** to not just run `rails s`. You have to run `foreman start` with one of the Procfiles. If you don't do this, then `webpack` will not generate a new bundle, and you will be seriously confused when you change JavaScript and the app does not change. If you change the webpack configs, then you need to restart foreman. If you change the JS code for react-on-rails, you need to run `yarn run build`. Since the react-on-rails package should be sym linked, you don't have to `yarn react-on-rails` after every change.
185
+
To run the dummy app, it's **CRITICAL** to not just run `rails s`. You have to run `foreman start` with one of the Procfiles. If you don't do this, then `webpack` will not generate a new bundle, and you will be seriously confused when you change JavaScript and the app does not change. If you change the Webpack configs, then you need to restart foreman. If you change the JS code for react-on-rails, you need to run `yarn run build`. Since the react-on-rails package should be symlinked, you don't have to `yarn react-on-rails` after every change.
Copy file name to clipboardExpand all lines: NEWS.md
+4-4Lines changed: 4 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,7 +5,7 @@ _A history of the news. A few bullets at the top will also show on the [README.m
5
5
-**October 14, 2020**: [RUBY ROGUES
6
6
RR 474: React on Rails V12 – Don’t Shave That Yak! with Justin Gordon](https://devchat.tv/ruby-rogues/rr-474-react-on-rails-v12-dont-shave-that-yak-with-justin-gordon/).
7
7
8
-
-**October 1, 2020**: See the [spec/dummy](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy) example repo for a simple configuration of webpack via the rails/webpacker gem
8
+
-**October 1, 2020**: See the [spec/dummy](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy) example repo for a simple configuration of Webpack via the rails/webpacker gem
9
9
that supports SSR.
10
10
-**August 2, 2020**: See the example repo of [React on Rails Tutorial With SSR, HMR fast refresh, and TypeScript](https://github.com/shakacode/react_on_rails_demo_ssr_hmr) for a new way to setup the creation of your SSR bundle with `rails/webpacker`.
11
11
- July 8, 2020: Release **v12**.
@@ -23,7 +23,7 @@ _A history of the news. A few bullets at the top will also show on the [README.m
23
23
- 2017-03-06: Updated to Webpack v2!
24
24
- 2017-03-02: Demo of internationalization (i18n) is live at [reactrails.com](https://www.reactrails.com/). Docs [here](docs/guides/i18n.md).
25
25
- 2017-02-28: See [discussions here on Webpacker](https://github.com/rails/webpacker/issues/139) regarding how Webpacker will allow React on Rails to avoid using the asset pipeline in the near future.
26
-
- 2017-02-28: Upgrade to Webpack v2 or use the `--bail` option in your webpack script for test and production builds. See the discussion on [PR #730](https://github.com/shakacode/react_on_rails/pull/730).
26
+
- 2017-02-28: Upgrade to Webpack v2 or use the `--bail` option in your Webpack script for test and production builds. See the discussion on [PR #730](https://github.com/shakacode/react_on_rails/pull/730).
27
27
- 2016-11-03: Spoke at [LA Ruby: "React on Rails: Why, What, and How?"](http://www.meetup.com/laruby/events/234825187/). [Video and pictures in this article](https://blog.shakacode.com/my-react-on-rails-talk-at-the-la-ruby-rails-meetup-november-10-2016-eaaa83aff800#.ej6h4eglp).
28
28
- 2016-12-20: New Video on Egghead.io: [Creating a component with React on Rails](https://egghead.io/lessons/react-creating-a-component-with-react-on-rails)
29
29
- 2016-11-03: Spoke at [LA Ruby, 7pm, Thursday, November 10 in Venice, CA: "React on Rails: Why, What, and How?"](http://www.meetup.com/laruby/events/234825187/). [Video and pictures in this article](https://blog.shakacode.com/my-react-on-rails-talk-at-the-la-ruby-rails-meetup-november-10-2016-eaaa83aff800#.ej6h4eglp).
@@ -42,7 +42,7 @@ _A history of the news. A few bullets at the top will also show on the [README.m
42
42
- 2016-03-17: **4.0.2** Shipped! Includes using the new Heroku buildpack steps.
43
43
- Better support for hot reloading of assets from Rails with new helpers and updates to the sample testing app, [spec/dummy](spec/dummy).
44
44
- Better support for Turbolinks 5.
45
-
- Controller rendering of shared redux stores and ability to render store data at bottom of HTML page.
45
+
- Controller rendering of shared Redux stores and ability to render store data at bottom of HTML page.
46
46
- See [#311](https://github.com/shakacode/react_on_rails/pull/311/files).
47
47
- Some breaking changes! See [CHANGELOG.md](./CHANGELOG.md) for details.
48
48
- 2016-02-28: We added a [Projects page](PROJECTS.md). Please edit the page your project or [email us](mailto:[email protected]) and we'll add you. We also love stars as it helps us attract new users and contributors. [jbhatab](https://github.com/jbhatab) is leading an effort to ease the onboarding process for newbies with simpler project generators. See [#245](https://github.com/shakacode/react_on_rails/issues/245).
@@ -53,7 +53,7 @@ _A history of the news. A few bullets at the top will also show on the [README.m
53
53
1. Support for ensuring JavaScript is current when running tests.
54
54
2. Support for multiple React components with one Redux store. So you can have a header React component and different body React components talking to the same Redux store!
55
55
3. Support for Turbolinks 5!
56
-
- There was a fatal error when using the lastest version of Redux for server rendering. See [Redux #1335](https://github.com/reactjs/redux/issues/1335). See [diff 3.1.6...3.1.4](https://github.com/reactjs/redux/commit/e2e14d26f09ca729ae0555442f50fcfc45bfb423#diff-1fdf421c05c1140f6d71444ea2b27638). Workaround for server rendering: Use Redux 3.1.7 or upgrade to React On Rails v2.3.0. [this commit](https://github.com/shakacode/react_on_rails/commit/59f1e68d3d233775e6abc63bff180ea59ac2d79e) on [PR #244](https://github.com/shakacode/react_on_rails/pull/244/).
56
+
- There was a fatal error when using the latest version of Redux for server rendering. See [Redux #1335](https://github.com/reactjs/redux/issues/1335). See [diff 3.1.6...3.1.4](https://github.com/reactjs/redux/commit/e2e14d26f09ca729ae0555442f50fcfc45bfb423#diff-1fdf421c05c1140f6d71444ea2b27638). Workaround for server rendering: Use Redux 3.1.7 or upgrade to React On Rails v2.3.0. [this commit](https://github.com/shakacode/react_on_rails/commit/59f1e68d3d233775e6abc63bff180ea59ac2d79e) on [PR #244](https://github.com/shakacode/react_on_rails/pull/244/).
57
57
- 2.x Highlights:
58
58
1. Fixed a **critical** problem with TurboLinks. Be sure to see [turbolinks docs](docs/additional-reading/turbolinks.md) for more information on how to debug TurboLinks issues.
59
59
2. Provides a convenient helper to ensure that JavaScript assets are compiled before running tests.
Copy file name to clipboardExpand all lines: PROJECTS.md
+1-5Lines changed: 1 addition & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -29,7 +29,7 @@ _Please support the project by [emailing Justin Gordon](mailto:justin@shakacode.
29
29
-**[Deliveroo](https://deliveroo.co.uk/)**: The leading food delivery site in Europe has gone live with React on Rails, with multi-lingual JavaScript support!
-**[Airgoat](https://airgoat.com/)**: Marketplace for sneakers.
32
-
-**[Apprentus](https://www.apprentus.com/)**: A marketplace to find the best private teachers. Using react-on-rails from the homepage to infinity!
32
+
-**[Apprentus](https://www.apprentus.com/)**: A marketplace to find the best private teachers. Using React on Rails from the homepage to infinity!
33
33
-**[Confident Financial Solutions](https://www.mycfsapp.com/)**: Auto Repair Financing to help people get back on the road and back to life.
34
34
-**[Flyhomes](https://www.flyhomes.com/)**: Real estate brokerage service that awards frequent flyer miles.
35
35
-**[Undeveloped](https://undeveloped.com/)**: Buy and sell domain names. 
@@ -49,10 +49,6 @@ _Please support the project by [emailing Justin Gordon](mailto:justin@shakacode.
49
49
-[Relay Rails Blog](https://github.com/gauravtiwari/relay-rails-blog): Tutorial to learn Relay with Rails.
50
50
-[Hot Module Replacement with react_on_rails](https://medium.com/@hrishio/lesson-5-hot-module-replacement-for-react-in-rails-using-the-react-on-rails-gem-643c5b01f3d7#.ehevxok16) : Step-by-step tutorial for a quick basic set up of hot asset reloading with HMR in a Rails 5 app. [Code on Github](https://github.com/learnetto/calreact-hmr).....
Copy file name to clipboardExpand all lines: README.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -44,7 +44,7 @@ If you think ShakaCode can help your project, [click here](https://meetings.hubs
44
44
45
45
## React on Rails Pro
46
46
47
-
Are you interested in optimizing your webpack setup for React on Rails, including code splitting with [react-router](https://github.com/ReactTraining/react-router#readme) and [loadable-components](https://loadable-components.com/) with server-side rendering for SEO and hot-reloading for developers?
47
+
Are you interested in optimizing your Webpack setup for React on Rails, including code splitting with [react-router](https://github.com/ReactTraining/react-router#readme) and [loadable-components](https://loadable-components.com/) with server-side rendering for SEO and hot-reloading for developers?
48
48
We did this for Popmenu, [lowering Heroku costs 20-25% while getting a 73% decrease in average response times](https://www.shakacode.com/recent-work/popmenu/). Several years later, Popmenu serves tens of millions of SSR requests daily with React on Rails Pro.
49
49
50
50
If you're interested, read more about [React on Rails Pro](https://www.shakacode.com/react-on-rails-pro/) and [book a call](https://meetings.hubspot.com/justingordon/30-minute-consultation).
Copy file name to clipboardExpand all lines: docs/additional-details/generator-details.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -43,7 +43,7 @@ Another good option is to create a simple test app per the [Tutorial](https://ww
43
43
44
44
The generated client code follows our organization scheme. Each unique set of functionality is given its own folder inside of `app/javascript/app/bundles`. This encourages modularity of _domains_.
45
45
46
-
Inside of the generated "HelloWorld" domain you will find the following folders:
46
+
Inside the generated "HelloWorld" domain you will find the following folders:
47
47
48
48
-`startup`: contains the entry point files for webpack. It defaults to a single file that is used for both server and client compilation. But if these need to be different, then you can create two Webpack configurations with separate endpoints. Since RoR v14.2 this is strongly recommended because the client can import `react-on-rails/client` instead of `react-on-rails` for decreased bundle size.
49
49
-`containers`: contains "smart components" (components that have functionality and logic that is passed to child "dumb components").
Copy file name to clipboardExpand all lines: docs/additional-details/manual-installation-overview.md
+6-6Lines changed: 6 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,19 +10,19 @@ This directory has no references to Rails outside of the destination directory f
10
10
11
11
The only requirements within this directory for basic React on Rails integration are:
12
12
13
-
1. Your webpack configuration files:
13
+
1. Your Webpack configuration files:
14
14
1. Create outputs in a directory like `/public/webpack`, which is customizable in your `config/initializers/react_on_rails.rb`.
15
15
1. Provide server rendering if you wish to use that feature.
16
16
1. Your JavaScript code "registers" any components and stores per the ReactOnRails APIs of ReactOnRails.register(components) and ReactOnRails.registerStore(stores). See [our javascript API docs](https://www.shakacode.com/react-on-rails/docs/api/javascript-api/) and the [ReactOnRails.js source](https://github.com/shakacode/react_on_rails/tree/master/node_package/src/ReactOnRails.js).
17
17
1. Set your registration file as an "entry" point in your Webpack configs.
18
-
1.You create scripts in `client/package.json`per the example apps. These are used for building your Webpack assets. Also do this for your toplevel `package.json`.
18
+
1.Configure scripts in `client/package.json`as shown in the example apps. These are used for building your Webpack assets. Also do this for your top-level `package.json`.
19
19
20
-
## Rails Steps (outside of /client)
20
+
## Rails Steps (outside `/client`)
21
21
22
-
1. Add `gem "webpacker"` to the Gemfile, run bundle. The gem provides the `stylesheet_pack_tag` and `javascript_pack_tag` helpers which is used to load the bundled assets to your layouts.[Dummy Example](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/app/views/layouts/application.html.erb)
22
+
1. Add `gem "shakapacker"` to the Gemfile, run `bundle`. The gem provides the `stylesheet_pack_tag` and `javascript_pack_tag` helpers, which are used to load the bundled assets in your layouts.[Dummy Example](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/app/views/layouts/application.html.erb).
23
23
1. Configure the `config/initializers/react_on_rails.rb`. You can adjust some necessary settings and defaults. See file [https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/config/initializers/react_on_rails.rb](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/config/initializers/react_on_rails.rb) for a detailed example of configuration, including comments on the different values to configure.
24
24
1. Configure your Procfiles per the example apps. These are at the root of your Rails installation.
25
-
1. Configure your toplevel JavaScript files for inclusion in your layout. You'll want a version that you use for static assets, and you want a file for any files in your setup that are not part of your webpack build. The reason for this is for use with hot-reloading. If you are not using hot reloading, then you only need to configure your `application.js` file to include your Webpackgenerated files.
26
-
1. If you are deploying to Heroku, see [our heroku deployment documentation](https://www.shakacode.com/react-on-rails/docs/deployment/heroku-deployment/)
25
+
1. Configure your top-level JavaScript files for inclusion in your layout. Use one file for static assets, and a separate file for any files in your setup that are not part of your Webpack build. This separation is needed for hotreloading. If hot reloading is not needed, simply configure your `application.js` file to include the Webpack-generated files.
26
+
1. If you are deploying to Heroku, see [our Heroku deployment documentation](https://www.shakacode.com/react-on-rails/docs/deployment/heroku-deployment/).
27
27
28
28
If I missed anything, please submit a PR or file an issue.
0 commit comments