shakacode/react-webpack-rails-tutorial shakacode/react-webpack-rails-tutorial

  • Stars
    star
    1,717
  • Rank 27,181 (Top 0.6 %)
  • Language
    Ruby
  • License
    MIT License
  • Created about 10 years ago
  • Updated 5 months ago
Twitter logo Share LinkedIn logo Share Facebook logo Share
shakacode/react-webpack-rails-tutorial
github

shakacode

Reviews

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

Repository Details

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:

Code Climate Coverage Status

React, Redux, React-Bootstrap, ES7, Webpack, Ruby on Rails Demo

Control Plane Deployment Example

Control Plane offers a viable, cost-saving alternative to Heroku, especially when using the cpl gem to deploy to Control Plane.

ShakaCode recently migrated HiChee.com to Control Plane, resulting in a two-thirds reduction in server hosting costs!

See doc in ./.controlplane/readme.md for how to easily deploy this app to Control Plane.

The instructions leverage the cpl CLI, with source code and many more tips on how to migrate from Heroku to Control Plane in https://github.com/shakacode/heroku-to-control-plane.

React on Rails Pro and ShakaCode Pro Support

React on Rails Pro provides Node server rendering and other performance enhancements for React on Rails.

2018-09-11_10-31-11

For more information, see the React on Rails Pro Docs.

  • Optimizing your front end setup with Webpack v5+ and Shakapacker for React on Rails including code splitting with loadable-components.
  • Upgrading your app to use the current Webpack setup that skips the Sprockets asset pipeline.
  • Better performance client and server side.

ShakaCode can also help you with your custom software development needs. We specialize in marketplace and e-commerce applications that utilize both Rails and React. We can even leverage our code for HiChee.com for your app!

See the ShakaCode Client Engagement Model article to learn how we can work together.

Community

Testimonials

From Joel Hooks, Co-Founder, Chief Nerd at egghead.io, January 30, 2017:

2017-01-30_11-33-59

For more testimonials, see Live Projects and Kudos.

Videos

React On Rails Tutorial Series

  1. History and Motivation
  2. Basic Tutorial Walkthrough
  3. Code Walkthrough

NEWS

Check out our react-native client for this project!

This is a simple example application that illustrates the use of ReactJs to implement a commenting system. Front-end code leverages both ReactJs and Rails asset pipeline while the backend is 100% Rails. It shows off a little bit of the interactivity of a ReactJs application, allowing the commmenter to choose the form layout. react-bootstrap is used for the React components. A pure Rails UI generated from scaffolding is shown for comparison.

You can see this tutorial live here: http://reactrails.com/

Table of Contents

Demoed Functionality

  • Example of using the react_on_rails gem for easy react/webpack integration with Rails.
  • Example of React with CSS Modules inside of Rails using Webpack as described in Smarter CSS builds with Webpack.
  • Example of enabling hot reloading of both JS and CSS (modules) from your Rails app in development mode. Change your code. Save. Browser updates without a refresh!
  • Example of React/Redux with Rails Action Cable.
  • Example of Rails 7 with ReactJs/Redux/React-Router with Webpack and ES7.
  • Enabling development of a JS client independently from Rails using the Webpack Dev Server. You can see this by starting the app and visiting http://localhost:4000
  • Enabling the use of npm modules and Babel with a Rails application using Webpack.
  • Easily enable retrofitting such a JS framework into an existing Rails app. You don't need a brand new single page app!
  • Example setting up Ruby and JavaScript linting in a real project, with corresponding CI rake tasks.
  • Enabling the i18n functionality with react-intl.

Technologies involved

See package.json and Gemfile for versions

  1. react_on_rails gem
  2. React
  3. react-bootstrap
  4. bootstrap-loader
  5. Redux
  6. react-router
  7. react-router-redux
  8. Webpack with hot-reload (for local dev)
  9. Babel transpiler
  10. Ruby on Rails 7 for backend app and comparison with plain HTML
  11. Heroku for Rails 7 deployment
  12. Deployment to the ControlPlane
  13. Turbolinks 5

Basic Demo Setup

Prerequisites

  • Node v18.13.0 or above. Be sure that you have Node installed! We suggest using nvm and running nvm list to check the active Node version. See this article Updating and using nvm.
  • Ruby 3.1.2 or above
  • Postgres v9.2 or above
  • Redis. Check that you have Redis installed by running which redis-server. If missing and on MacOS, install with Homebrew (brew install redis)
  • Yarn.

Setup

  1. git clone [email protected]:shakacode/react-webpack-rails-tutorial.git
  2. cd react-webpack-rails-tutorial
  3. bundle install
  4. yarn
  5. rake db:setup
  6. rails start

Basic Command Line

  • Run all linters and tests: rake
  • See all npm commands: yarn run
  • To start all development processes: foreman start -f Procfile.dev
  • To start only all Rails development processes: foreman start -f Procfile.hot

Rails Integration

We're now using Webpack for all Sass and JavaScript assets so we can do CSS Modules within Rails!

  • Production Deployment: heroku-deployment.md.
    • Configure Buildpacks 
      heroku buildpacks:set heroku/ruby --app your-app
heroku buildpacks:add --index 1 heroku/nodejs --app your-app
heroku buildpacks:set --index 3 https://github.com/sreid/heroku-buildpack-sourceversion.git --app your-app

Testing

  • See Yak Shaving Failing Integration Tests with React and Rails

  • Be sure to see Integration Test Notes for advice on running your integration tests.

  • Testing Mode: When running tests, it is useful to run foreman start -f Procfile.spec in order to have webpack automatically recompile the static bundles. Rspec is configured to automatically check whether or not this process is running. If it is not, it will automatically rebuild the webpack bundle to ensure you are not running tests on stale client code. This is achieved via the ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config) line in the rails_helper.rb file. If you are using this project as an example and are not using RSpec, you may want to implement similar logic in your own project.

Webpack

Converted to use @rails/webpacker webpack configuration.

Additional Resources

Sass, CSS Modules, and Twitter Bootstrap Integration

We're using Webpack to handle Sass assets so that we can use CSS modules. The best way to understand how we're handling assets is to close follow this example. We'll be working on more docs soon. If you'd like to give us a hand, that's a great way to learn about this!

For example in client/app/bundles/comments/components/CommentBox/CommentBox.jsx, see how we use standard JavaScript import syntax to refer to class names that come from CSS modules:

import css from './CommentBox.module.scss';

export default class CommentBox extends React.Component {
  render() {
    const { actions, data } = this.props;
    const cssTransitionGroupClassNames = {
      enter: css.elementEnter,
      enterActive: css.elementEnterActive,
      leave: css.elementLeave,
      leaveActive: css.elementLeaveActive,
    };
  }
}

Fonts with SASS

The tutorial makes use of a custom font OpenSans-Light. We're doing this to show how to add assets for the CSS processing. The font files are located under client/app/assets/fonts and are loaded by both the Rails asset pipeline and the Webpack HMR server.

Process management during development

bundle exec foreman start -f <Procfile>
  1. Procfile.dev: Starts the Webpack Dev Server and Rails with Hot Reloading.
  2. Procfile.static: Starts the Rails server and generates static assets that are used for tests.

Contributors

The Shaka Code team!, led by Justin Gordon, along with with many others. See contributors.md

RubyMine and WebStorm

Special thanks to JetBrains for their great tools: RubyMine and WebStorm. Some developers of this project use RubyMine at the top level, mostly for Ruby work, and we use WebStorm opened up to the client directory to focus on JSX and Sass files.

Hiring

We're looking for great developers that want to work with Rails + React (and react-native!) with a remote-first, distributed, worldwide team, for our own products, client work, and open source. More info here.

Thank you from Justin Gordon and ShakaCode

Thank you for considering using React on Rails.

Aloha and best wishes from the ShakaCode team!

More Repositories

1

react_on_rails

Integration of React + Webpack + Rails + rails/webpacker including server-side rendering of React, enabling a better developer experience and faster client performance.
Ruby
5,085
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