Reactify exists to make starting a new Rails app with React and Redux easy. It provides a series of Rails generators that will first set up your project to be able to use modern JavaScript, and then add React/Redux boilerplate when you run Rails scaffold generators.
Inevitably it takes an opinitionated approach, with the following attitudes:
- Javascript should be a first class citizen in your app. Rather than running
it through Ruby first via Sprockets, Reactify sets up
Webpack so that everything
happens via npm. This completely bypasses Sprockets and allows the
Webpack code
to peacefully coexist with whatever Sprockets stuff you might already have. All
of the JavaScript will live in
/webpack
in order to keep it totally separate from the rest of the app. - Modern JavaScript is worth learning and using. Webpack allows us to easily use Babel to transpile ES6/7, so this is set up from the Start. We also have instant access to everything that npm has to offer.
- Live reloading of JS and CSS is a huge time saver. This is also set up out of the box using react-hot-loader V3
- The best approach to using React and Rails is ultimately to have a single page
app (SPA) talking to a Rails API. However, this is a pain to set up initially, so the
approach Reactify takes is as follows
- Rails is set up to respond to all HTML requests that have no template in
app/views
with a default template inapp/views/reactify/spa_html.erb
. This renders a single page React/Redux app, which incorporates all the@variables
that would normally be sent to the view template, so that the Redux store can access them - The SPA will pre-render the app based on the url params, so there is no flicker
whilst the end user waits for JavaScript to load, and no problem with SEO. This
also incorporates the
@variables
so the approach is truly universal - Each controller action will respnd to JSON requests by automatically sending
the
@variables
as JSON, allowing the SPA to function properly
- Rails is set up to respond to all HTML requests that have no template in
- When the time comes, it should be very easy to separate the SPA into its own
node app. This is easily done as the
/webpack
folder is entirely self contained (TODO: instructions below).
Run rails new
with your favourite settings, then cd
into the directory and
continue as below.
Reactify-Rails is intended to work alongside your existing sprockets javascipt.
You can safely install it over the top of an existing Rails app and everything
else should continue to work perfectly. Be sure sure to commit your work to
source control before running the generator though, and run git diff
(or whatever)
to make sure you know what it's done!
Add this line to your application's Gemfile:
gem 'reactify-rails'
And then execute:
$ bundle install
Or install it yourself as:
$ gem install reactify-rails
Then, run the install generator (commit your files to source control first!)
$ bundle exec rails g reactify:install
This will add a bunch of stuff to your Rails project, most of which is in
/webpack
.
$ cd myproject
$ foreman start
Now you can find the app at http:://localhost:3000
As we are not using Sprockets, you will need to tell yoir deployment tool to
build the assets on each deploy. On Heroku, this happens automatically as it
reads package.json
and sees the postinstall
task, but otherwise, run this
command: npm run postinstall
as part of your deploy process.
The generator specs run the generator against a dummy app in /spec/dummy_template
,
which is copies to /spec/dummy
at the start of each test run, has the generator
applied to it, then gets removed at the end. If you want to keep it around so you
can run rails s
and view the output in the browser, set the PRESERVE_DUMMY
to true
whilst running the specs.
Contributions are very much welcomed, but please follow the procedure below:
- File an issue on Github outlining what you are intending. Some new features may not be a good fit for the gem and may be better off in their own gem (I'm trying to keep this one as lightweight as possible). Similarly, what appears to be bug may occasionally turn out to be deliberate in order to cover non-obvious edge cases. Better to check first before you spend valuable time writing code! Assuming the response to your issue is positive:
- Fork the repo on Github
- Create a new branch against master
- Write tests (first!)
- Write code until the tests pass
- Push your code and file a pull request
The gem is available as open source under the terms of the MIT License.