This example app was built using webpack-rails-react with the --router --redux flags passed on generation. This is a simple Todo List App to demonstrate extracting your client to a React application using react-router.
- git clone
- npm install && bundle install
- bundle exec rake db:create db:migrate
- foreman start
- Create a new rails app
rails new todo_app --skip-turbolinks
- add webpack-rails-react to your Gemfile
gem 'webpack-rails-react'
- create and migrate the database
- generate the app with react-router
bundle exec rails g webpack_rails_react:install --router --redux
- enter y to npm install
- enter y to bundle install
- generate a controller
rails g controller home index --no-helper --no-assets
- change your routes file to root to your new controller and hand off all routes to react-router
root 'home#index'
get '*unmatched_route', to: 'home#index'
*unmatched _route must be the last line of the routes file 9. Create a NoMatch component and add to your client side routes.
<Route path="*" status={404} component={NoMatch}/>
- app/views/home/index.html.erb add
<div id="app"></div>
- You will find the react app in webpack/