tgzzl / fleet-manager

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

# webpack-rails-react-router of fleet-manager

This example app was built using [webpack-rails-react](github.com/cottonwoodcoding/webpack-rails-react) with the –router flag passed on generation. This is a simple Todo List App to demonstrate extracting your client to a [React](facebook.github.io/react/) application using react-router.

### Running Sample App

  1. git clone

  2. npm install && bundle install

  3. bundle exec rake db:create db:migrate

  4. foreman start

### Steps taken

  1. Create a new rails app

“‘ rails new todo_app –skip-turbolinks “`

  1. add webpack-rails-react to your Gemfile

“‘ gem ’webpack-rails-react’ “‘

  1. create and migrate the database

  2. generate the app with react-router

“‘ bundle exec rails g webpack_rails_react:install –router “`

  1. enter y to npm install

  2. enter y to bundle install

  3. generate a controller

“‘ rails g controller home index –no-helper –no-assets “`

  1. 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*

  1. Create a NoMatch component and add to your client side routes.

“‘ <Route path=“*” status={404} component={NoMatch}/> “`

  1. app/views/home/index.html.erb add “‘<div id=“app”></div>“`

  2. You will find the react app in webpack/

About


Languages

Language:Ruby 55.5%Language:JavaScript 39.0%Language:HTML 4.8%Language:CSS 0.7%