• Stars
    star
    5,085
  • Rank 8,183 (Top 0.2 %)
  • Language
    Ruby
  • License
    MIT License
  • Created over 9 years ago
  • Updated 4 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Integration of React + Webpack + Rails + rails/webpacker including server-side rendering of React, enabling a better developer experience and faster client performance.

reactrails


LicenseGem Version npm version Code Climate Coverage Status

Build Main Build JS Tests Build Rspec Tests Linting

News

  • ShakaCode now maintains the official successor to rails/webpacker, shakapacker.
  • Project is updated to support Rails 7 and Shakapacker v6+!

These are the docs for React on Rails 13. To see the older docs: v12 and v11.

About

React on Rails integrates Rails with (server rendering of) Facebook's React front-end framework.

This project is maintained by the software consulting firm ShakaCode. We focus on Ruby on Rails applications with React front-ends, often using TypeScript or ReScript (ReasonML). We also build React Native apps and Gatsby sites. See our recent work for examples of what we do. ShakaCode.com (HiChee.com) is hiring developers that like working on open-source.

Are you interested in optimizing your webpack setup for React on Rails including code splitting with react-router and loadable-components 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. Several years later, Popmenu is serving millions of SSR requests per day with React on Rails.

Check out React on Rails Pro. For more information, feel free to contact Justin Gordon, [email protected], maintainer of React on Rails.

Documentation

See the documentation at shakacode.com/react-on-rails/docs.

Project Objective

To provide a high performance framework for integrating Ruby on Rails with React via the Webpacker gem, especially regarding React Server-Side Rendering for better SEO and improved performance.

Features and Why React on Rails?

Given that rails/webpacker gem already provides basic React integration, why would you use "React on Rails"?

  1. Automatic configuration of what bundles are added to the page based on what React components are on the page. This results in faster browser loading time via smaller bundle sizes.
  2. Keep up with the latest changes of different versions of React. React 18 is supported.
  3. Easy passing of props directly from your Rails view to your React components rather than having your Rails view load and then make a separate request to your API. Tight integration with shakapacker (or it's predecessor rails/webpacker).
  4. Server-Side Rendering (SSR), often used for SEO crawler indexing and UX performance.
  5. 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!”
  6. Redux and React Router integration with server-side-rendering.
  7. Internationalization (I18n) and (localization)
  8. A supportive community. This web search shows how live public sites are using React on Rails.
  9. ReScript Support.

See Rails/Webpacker React Integration Options for comparisons to other gems.

Online demo

ShakaCode Forum Premium Content

Requires creating a free account.

Prerequisites

Ruby on Rails >=5, rails/webpacker >= 4.2 or shakapacker > 6, Ruby >= 3.0.0

Support

Contributing

Bug reports and pull requests are welcome. See Contributing to get started, and the list of help wanted issues.

Work with Us

ShakaCode is hiring passionate software engineers to work on our projects, including HiChee!

License

The gem is available as open source under the terms of the MIT License.

Supporters

The following companies support our open source projects, and ShakaCode uses their products!



JetBrains ScoutAPM Control Plane
BrowserStack Rails Autoscale Honeybadger Reviewable

More Repositories

1

react-webpack-rails-tutorial

Example of integration of Rails, react, redux, using the react_on_rails gem, webpack, enabling the es7 and jsx transpilers, and node integration. And React Native! Live Demo:
Ruby
1,717
star
2

bootstrap-loader

Load Bootstrap styles and scripts in your Webpack bundle
JavaScript
1,025
star
3

sass-resources-loader

SASS resources (e.g. variables, mixins etc.) loader for Webpack. Also works with less, post-css, etc.
JavaScript
981
star
4

cypress-on-rails

Use cypress.io or playwright.dev with your rails application. This Ruby gem lets you use your regular Rails test setup and clean-up, such as FactoryBot.
HTML
414
star
5

shakapacker

Use Webpack to manage app-like JavaScript modules in Rails
Ruby
410
star
6

fat-code-refactoring-techniques

Code samples for RailsConf 2014 on Fat Code Refactoring
JavaScript
289
star
7

re-formality

Form validation tool for reason-react
Reason
244
star
8

bootstrap-sass-loader

Webpack Loader for the Sass version Twitter Bootstrap
JavaScript
118
star
9

rescript-dnd

Drag-n-drop for @rescript/react
ReScript
115
star
10

rescript-classnames

Reimplementation of classnames in ReScript
ReScript
110
star
11

rescript-logger

Logging implementation for ReScript
ReScript
107
star
12

react_on_rails_demo_ssr_hmr

react_on_rails tutorial demonstrating SSR, HMR fast refresh, and Typescript based on the rails/webpacker webpack setup
Ruby
88
star
13

steward

Task runner and process manager for Rust
Rust
49
star
14

font-awesome-loader

Webpack Loader for Font Awesome Using Sass
JavaScript
47
star
15

webpacker_lite

Slimmed down version of Webpacker with only the asset helpers optimized for, but not requiring, React on Rails
Ruby
46
star
16

rescript-debounce

Debounce for ReScript
ReScript
43
star
17

mirror-creator

One more way to create an object with values equal to its key names
JavaScript
43
star
18

control-plane-flow

The power of Kubernetes with the ease of Heroku! Our playbook for migrating from Heroku to Control Plane, controlplane.com, and CPL CLI source
Ruby
43
star
19

reactrails-react-native-client

This repository is for a react-native client to the https://www.reactrails.com/, source at https://github.com/shakacode/react-webpack-rails-tutorial/.
JavaScript
30
star
20

redux-tree

An alternative way to compose Redux reducers
JavaScript
23
star
21

messagebus

Message bus - enables async communication between different parts of application using messages
Rust
23
star
22

rust-rescript-demo

Rust
22
star
23

ssr-rs

Server-Side Rendering for Rust web servers using Node.js
Rust
20
star
24

redux-interactions

Composing UI as a set of interactions
20
star
25

bootstrap-sass-loader-example

Example of using the bootstrap-sass-loder to load the Sass version of Twitter Bootstrap using Webpack
JavaScript
16
star
26

style-guide-javascript

ShakaCode's JavaScript Style Guide (Also see our Ruby one: https://github.com/shakacode/style-guide-ruby)
JavaScript
15
star
27

jstreamer

Ruby
12
star
28

justerror

Extension to `thiserror` that helps reduce the amount of handwriting
Rust
12
star
29

react-validation-layer

An opinionated form validation tool for React apps
JavaScript
11
star
30

rescript-react-on-rails

BuckleScript bindings to react-on-rails
ReScript
8
star
31

todos-react-native-redux

Todos app with React Native and Redux
JavaScript
7
star
32

rescript-react-on-rails-example

Example of https://rescript-lang.org/ with React on Rails
Ruby
7
star
33

conform

Macro to transform struct string fields in place
Rust
7
star
34

package_json

Ruby
6
star
35

rescript-throttle

Throttle for ReScript
ReScript
6
star
36

rescript-first-class-modules-usage

CSS
6
star
37

webpacker-examples

Ruby
5
star
38

react_on_rails-with-webpacker

Prototype of webpacker integration
Ruby
4
star
39

use-ssr-computation.macro

A babel macro for reducing initial bundle-size of Apps with React SSR. Uses conditional compilation to make computations server-side and pass the results to the client.
TypeScript
4
star
40

react_on_rails-generator-results

Results of running different react_on_rails generators. See https://github.com/shakacode/react_on_rails
4
star
41

vosk-rs

Rust
3
star
42

react-starter-kit-with-bootstrap-loader

JavaScript
3
star
43

uber_task

Ruby
3
star
44

react_on_rails-generator-results-pre-0

Ruby
2
star
45

js-promises-testing

JavaScript
2
star
46

react-on-rails-demo

Example of using the generator for React on Rails
Ruby
2
star
47

node-webpack-async-example

Simple example of setting up node with webpack
JavaScript
2
star
48

egghead-add-redux-component-to-react-on-rails

Source for Egghead lesson: Add Redux State Management to a React on Rails Project
Ruby
1
star
49

reactrails-in-reagent

Test of converting reactrails example to reagent
1
star
50

.github

1
star
51

rails-tutorial-with-react-on-rails

Adding React on Rails to the Rails Tutorial
Ruby
1
star
52

react_on_rails-test-new-redux-generation

Testing out a different redux generation. See https://github.com/shakacode/react_on_rails/pull/584
Ruby
1
star
53

yardi

Yet Another Rust Dependency Injector
Rust
1
star
54

old-react-on-rails-examples

Various example apps for React on Rails, outdated
JavaScript
1
star
55

v8-demo

React on Rails v8 Usage of the basic generator and a "generator function example"
Ruby
1
star
56

docker-ci

docker container that runs all test and linting against app
Ruby
1
star
57

react-rails-webpacker-resources

1
star
58

sass-rel-paths-issue

JavaScript
1
star
59

reactrails-in-om-next-example

Test of converting reactrails example to om-next
1
star
60

homebrew-brew

Ruby
1
star
61

zone-helper

Swift
1
star
62

react_on_rails-update-webpack-v2

Updating the default React on Rails 6.6.0 redux installation to use Webpack v2 plus adding eslint.
Ruby
1
star
63

shakacode-website

Public website and blog
HTML
1
star
64

react-native-image-zoom-slider

JavaScript
1
star
65

derive-from-one

Automatically generates `From` impls so you don't have to
Rust
1
star
66

rescript-on-rails-example

A sample application using Rescript and React on Rails.
Ruby
1
star