Home

Awesome

Code Climate Coverage Status

React, Redux, Tailwind CSS, 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.

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

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

Table of Contents

Demoed Functionality

Technologies involved

See package.json and Gemfile for versions

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

Basic Demo Setup

Prerequisites

Setup

  1. git clone git@github.com: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

Rails Integration

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

Testing

Webpack

Converted to use Shakapacker webpack configuration.

Additional Resources

Sass, CSS Modules, and Tailwind CSS Integration

This example project uses mainly Tailwind CSS for styling. Besides this, it also demonstrates Sass and CSS modules, particularly for some CSS transitions.

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,
      exit: css.elementLeave,
      exitActive: 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!