Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions .github/workflows/main.yml
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ jobs:
run: cd spec/dummy && rm -rf public/webpack/test && yarn run build:rescript && RAILS_ENV="test" NODE_ENV="test" bin/${{ matrix.versions == 'oldest' && 'web' || 'shaka' }}packer
- id: get-sha
run: echo "sha=\"$(git rev-parse HEAD)\"" >> "$GITHUB_OUTPUT"
- name: Save test webpack bundles to cache (for build number checksum used by rspec job)
- name: Save test Webpack bundles to cache (for build number checksum used by RSpec job)
uses: actions/cache/save@v4
with:
path: spec/dummy/public/webpack
Expand Down Expand Up @@ -139,7 +139,7 @@ jobs:
key: dummy-app-node-modules-cache-${{ hashFiles('spec/dummy/package.json') }}-${{ matrix.versions }}
- id: get-sha
run: echo "sha=\"$(git rev-parse HEAD)\"" >> "$GITHUB_OUTPUT"
- name: Save test webpack bundles to cache (for build number checksum used by rspec job)
- name: Save test Webpack bundles to cache (for build number checksum used by RSpec job)
uses: actions/cache@v4
with:
path: spec/dummy/public/webpack
Expand Down
46 changes: 23 additions & 23 deletions CHANGELOG.md

Large diffs are not rendered by default.

22 changes: 11 additions & 11 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
- [docs/contributor-info/pull-requests](./docs/contributor-info/pull-requests.md)
- See other docs in [docs/contributor-info](./docs/contributor-info)

## To run tests:
## Prerequisites

- [Yalc](https://github.com/whitecolor/yalc) must be installed globally for most local development.
- After updating code via Git, to prepare all examples:
Expand All @@ -19,7 +19,7 @@ and [Running tests](#running-tests) for more details on running tests.

# IDE/IDE SETUP

It's critical to configure your IDE/editor to ignore certain directories. Otherwise your IDE might slow to a crawl!
It's critical to configure your IDE/editor to ignore certain directories. Otherwise, your IDE might slow to a crawl!

- /coverage
- /tmp
Expand All @@ -37,7 +37,7 @@ It's critical to configure your IDE/editor to ignore certain directories. Otherw

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.

```
```text
├── test_app
| └── client
└── react_on_rails
Expand All @@ -55,9 +55,9 @@ gem "react_on_rails", path: "../path-to-react-on-rails"

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**.

## Testing the Node package for react-on-rails via Yalc
## Testing the Node package for React on Rails via Yalc

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:
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:

```sh
cd react_on_rails/
Expand Down Expand Up @@ -112,13 +112,13 @@ Don't forget you may need to run yarn after adding packages with yalc to install

### Prereqs

After checking out the repo, making sure you have rvm and nvm setup (setup ruby and node), cd to `spec/dummy` and run `bin/setup` to install ruby dependencies. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
After checking out the repo, making sure you have Ruby and Node version managers set up (such as rvm and nvm, or rbenv and nodenv, etc.), cd to `spec/dummy` and run `bin/setup` to install ruby dependencies. You can also run `bin/console` for an interactive prompt that will allow you to experiment.

### Local Node Package

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.
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.

_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:_
_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:_

```js
resolve: {
Expand All @@ -137,8 +137,8 @@ yarn
yarn build
```

Or run this which builds the yarn package, then the webpack files for spec/dummy, and runs tests in
spec/dummy.
Or run this, which builds the Yarn package, then the Webpack files for `spec/dummy`, and runs tests in
`spec/dummy`.

```sh
# Optionally change default capybara driver
Expand Down Expand Up @@ -182,7 +182,7 @@ yarn run check

### Starting the Dummy App

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.
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` in the project root.

### RSpec Testing

Expand Down
10 changes: 5 additions & 5 deletions NEWS.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ _A history of the news. A few bullets at the top will also show on the [README.m
- **October 14, 2020**: [RUBY ROGUES
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/).

- **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
- **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
that supports SSR.
- **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`.
- **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 set up the creation of your SSR bundle with `rails/webpacker`.
- July 8, 2020: Release **v12**.
1. **React Hooks Support** for top level components
2. **Typescript bindings**
Expand All @@ -23,7 +23,7 @@ _A history of the news. A few bullets at the top will also show on the [README.m
- 2017-03-06: Updated to Webpack v2!
- 2017-03-02: Demo of internationalization (i18n) is live at [reactrails.com](https://www.reactrails.com/). Docs [here](docs/guides/i18n.md).
- 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.
- 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).
- 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).
- 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).
- 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)
- 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).
Expand All @@ -42,7 +42,7 @@ _A history of the news. A few bullets at the top will also show on the [README.m
- 2016-03-17: **4.0.2** Shipped! Includes using the new Heroku buildpack steps.
- Better support for hot reloading of assets from Rails with new helpers and updates to the sample testing app, [spec/dummy](spec/dummy).
- Better support for Turbolinks 5.
- Controller rendering of shared redux stores and ability to render store data at bottom of HTML page.
- Controller rendering of shared Redux stores and ability to render store data at bottom of HTML page.
- See [#311](https://github.com/shakacode/react_on_rails/pull/311/files).
- Some breaking changes! See [CHANGELOG.md](./CHANGELOG.md) for details.
- 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).
Expand All @@ -53,7 +53,7 @@ _A history of the news. A few bullets at the top will also show on the [README.m
1. Support for ensuring JavaScript is current when running tests.
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!
3. Support for Turbolinks 5!
- 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/).
- 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/).
- 2.x Highlights:
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.
2. Provides a convenient helper to ensure that JavaScript assets are compiled before running tests.
Expand Down
12 changes: 7 additions & 5 deletions PROJECTS.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ _Please support the project by [emailing Justin Gordon](mailto:justin@shakacode.
- **[Deliveroo](https://deliveroo.co.uk/)**: The leading food delivery site in Europe has gone live with React on Rails, with multi-lingual JavaScript support!
![2016-05-03_19-18-34](https://cloud.githubusercontent.com/assets/1118459/15027253/91fd151a-11de-11e6-93e3-720518995fe0.png)
- **[Airgoat](https://airgoat.com/)**: Marketplace for sneakers.
- **[Apprentus](https://www.apprentus.com/)**: A marketplace to find the best private teachers. Using react-on-rails from the homepage to infinity!
- **[Apprentus](https://www.apprentus.com/)**: A marketplace to find the best private teachers. Using React on Rails from the homepage to infinity!
- **[Confident Financial Solutions](https://www.mycfsapp.com/)**: Auto Repair Financing to help people get back on the road and back to life.
- **[Flyhomes](https://www.flyhomes.com/)**: Real estate brokerage service that awards frequent flyer miles.
- **[Undeveloped](https://undeveloped.com/)**: Buy and sell domain names. ![image](https://cloud.githubusercontent.com/assets/1118459/19623703/7c6d63d0-9870-11e6-83f2-8b83ca49daa9.png)
Expand All @@ -49,13 +49,15 @@ _Please support the project by [emailing Justin Gordon](mailto:justin@shakacode.
- [Relay Rails Blog](https://github.com/gauravtiwari/relay-rails-blog): Tutorial to learn Relay with Rails.
- [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).....

## Per Github.

---
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can add both of them as examples to projects based on ROR at GitHub and rubygems

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Included in ee95017.


## Projects Based on React on Rails

- [github.com/Limenius/symfony-react-sandbox](https://github.com/Limenius/symfony-react-sandbox)
- [github.com/tswayne/react-helper](https://github.com/tswayne/react-helper)
- [github.com/KissKissBankBank/kitten](https://github.com/KissKissBankBank/kitten)
- [github.com/sharetribe/sharetribe](https://github.com/sharetribe/sharetribe): Open source marketplace platform.
- [GitHub search for repos using `react_on_rails`](https://github.com/search?q=gem+react_on_rails&ref=advsearch&type=repositories&utf8=%E2%9C%93) (may include some false positives)

## Reverse dependencies

- [Gems depending on `react_on_rails`](https://rubygems.org/gems/react_on_rails/reverse_dependencies)
- [NPM packages depending on `react-on-rails`](https://www.npmjs.com/browse/depended/react-on-rails)
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ If you think ShakaCode can help your project, [click here](https://meetings.hubs

## React on Rails Pro

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?
Are you interested in optimizing your Webpack setup for React on Rails, including code splitting with [React Router](https://reactrouter.com/) and [loadable-components](https://loadable-components.com/) with server-side rendering for SEO and hot-reloading for developers?
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.

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).
Expand All @@ -67,7 +67,7 @@ Given that `shakacode/shakapacker` gem already provides basic React integration,
Tight integration with [shakapacker](https://github.com/shakacode/shakapacker) (or its predecessor [rails/webpacker](https://github.com/rails/webpacker)).
1. Server-Side Rendering (SSR), often used for SEO crawler indexing and UX performance.
1. [Automated optimized entry-point creation and bundle inclusion when placing a component on a page. With this feature, you no longer need to configure `javascript_pack_tags` and `stylesheet_pack_tags` on your layouts based on what’s shown. “It just works!”](https://www.shakacode.com/react-on-rails/docs/guides/file-system-based-automated-bundle-generation/)
1. [Redux](https://github.com/reactjs/redux) and [React Router](https://github.com/ReactTraining/react-router#readme) integration with server-side-rendering.
1. [Redux](https://redux.js.org/) and [React Router](https://reactrouter.com/) integration with server-side-rendering.
1. [Internationalization (I18n) and (localization)](https://www.shakacode.com/react-on-rails/docs/guides/i18n)
1. A supportive community. This [web search shows how live public sites are using React on Rails](https://publicwww.com/websites/%22react-on-rails%22++-undeveloped.com+depth%3Aall/).
1. [ReScript Support](https://github.com/shakacode/rescript-react-on-rails-example).
Expand Down
2 changes: 1 addition & 1 deletion SUMMARY.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ Here is the new link:

## **Additional Details**

- [Migration from react-rails](./docs/guides/migrating-from-react-rails.md)
- [Migration from `react-rails`](./docs/guides/migrating-from-react-rails.md)
- [Generator Details](docs/guides/generator-details.md)
- [Updating Dependencies](./docs/additional-reading/updating-dependencies.md)
- [Manual Installation Overview](docs/outdated/manual-installation-overview.md)
Expand Down
2 changes: 1 addition & 1 deletion docs/additional-details/generator-details.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ Another good option is to create a simple test app per the [Tutorial](https://ww

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_.

Inside of the generated "HelloWorld" domain you will find the following folders:
Inside the generated "HelloWorld" domain you will find the following folders:

- `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.
- `containers`: contains "smart components" (components that have functionality and logic that is passed to child "dumb components").
Expand Down
Loading
Loading