-
Notifications
You must be signed in to change notification settings - Fork 0
React on Rails Gem
https://www.fullstackreact.com/articles/how-to-get-create-react-app-to-work-with-your-rails-api/
After researching the different ways one can add React to an app I decided on using the React-on Rails Gem
So our app will be a React Ruby and Webpack on Rails app
This is a bit of history about the gem and why it was built.
fast, reliable, and secure dependency management
Yarn Installation
Yarn Usage
webpack is a module bundler for modern JavaScript applications. When webpack processes your application, it recursively builds a dependency graph that includes every module your application needs, then packages all of those modules into a small number of bundles - often only one - to be loaded by the browser.
Foreman can help manage multiple processes that your Rails app depends upon when running in development. It also provides an export command to move them into production.
http://railscasts.com/episodes/281-foreman
Downloading https://nodejs.org/dist/v8.1.3/node-v8.1.3-linux-x64.tar.xz...
######################################################################## 100.0%
Now using node v8.1.3 (npm v5.0.3)
Creating default alias: default -> node (-> v8.1.3)
nvm alias default node
v5.0.0
-> v8.1.3
system
default -> node (-> v8.1.3)
node -> stable (-> v8.1.3) (default)
stable -> 8.1 (-> v8.1.3) (default)
iojs -> N/A (default)
rvm rubies
ruby-2.1.4 [ x86_64 ]
ruby-2.2.1 [ x86_64 ]
ruby-2.2.2 [ x86_64 ]
* ruby-2.3.0 [ x86_64 ]
ruby-2.4.0 [ x86_64 ]
=> ruby-2.4.1 [ x86_64 ]
# => - current
# =* - current && default
# * - default
Gemfile
gem 'react_on_rails', '~> 8.0', '>= 8.0.3'
Did not find spec/rails_helper.rb or spec/spec_helper.rb to add
# Ensure that if we are running js tests, we are using latest webpack assets
# This will use the defaults of :js and :server_rendering meta tags
ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
What to do next:
- Include your webpack assets to your application layout.
<%= javascript_pack_tag 'main' %>
- Ensure your bundle and yarn installs of dependencies are up to date.
bundle && yarn
- Run the foreman command to start the rails server and run webpack in watch mode.
foreman start -f Procfile.dev
- Visit and see your React On Rails app running!
For my application I needed to change the IP in the Procfile to bind to a different IP address because I am using a Virtual Machine
web: rails s -p 3000 -b 33.33.33.33
https://bkamau.github.io/2016-04-01-Setting-up-vagrant-in-Ubuntu/
Venetya, when you run it take out the binding.
Change this:
Procfile
web: rails s -p 3000 -b 33.33.33.33
client: sh -c 'rm -rf public/webpack/development/* || true && cd client && bundle exec rake react_on_rails:locale && yarn run build:development'
To this:
Procfile
web: rails s -p 3000
client: sh -c 'rm -rf public/webpack/development/* || true && cd client && bundle exec rake react_on_rails:locale && yarn run build:development'
Mine:
http://33.33.33.33:3000/hello_world
Yours: http:/localhost:3000/hello_world
I skipped this part for now
heroku buildpacks:set heroku/ruby
heroku buildpacks:add --index 1 heroku/nodejs
app/views/hello_world/index.html.erb
<h1>Hello World</h1>
<%= react_component("HelloWorld", props: @hello_world_props, prerender: false) %>
Next, configure your app for Puma, per the instructions on Heroku
Procfile
web: bundle exec puma -C config/puma.rb
config/puma.rb
workers Integer(ENV['WEB_CONCURRENCY'] || 2)
threads_count = Integer(ENV['RAILS_MAX_THREADS'] || 5)
threads threads_count, threads_count
preload_app!
rackup DefaultRackup
port ENV['PORT'] || 3000
environment ENV['RACK_ENV'] || 'development'
on_worker_boot do
# Worker specific setup for Rails 4.1+
# See: https://devcenter.heroku.com/articles/deploying-rails-applications-with-the-puma-web-server#on-worker-boot
ActiveRecord::Base.establish_connection
end
route get 'hello_world', to: 'hello_world#index'
append .gitignore
exist client/app/bundles/HelloWorld/components
exist client/app/bundles/HelloWorld/containers
exist client/app/bundles/HelloWorld/startup
identical app/controllers/hello_world_controller.rb
identical config/webpacker_lite.yml
identical client/.babelrc
identical client/webpack.config.js
identical client/REACT_ON_RAILS_CLIENT_README.md
identical app/views/layouts/hello_world.html.erb
identical config/initializers/react_on_rails.rb
conflict Procfile.dev
.gitignore
# See https://help.github.com/articles/ignoring-files for more about ignoring files.
#
# If you find yourself ignoring temporary files generated by your text editor
# or operating system, you probably want to add a global ignore instead:
# git config --global core.excludesfile '~/.gitignore_global'
# Ignore bundler config.
/.bundle
# Ignore all logfiles and tempfiles.
/log/*
/tmp/*
!/log/.keep
!/tmp/.keep
*.swp
# Ignore Byebug command history file.
.byebug_history
+ # React-on-Rails
+ npm-debug.log*
+ node_modules
+ # Generated js bundles
+ /app/assets/webpack/*
# SimpleCov
coverage
app/assets/javascript/application.js
+ //= require webpack-bundle
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
config/initializers/react_on_rails.rb
config.webpack_generated_files = %w( webpack-bundle.js )
client/webpack.config.js
output: {
// Name comes from the entry section.
filename: '[name]-[hash].js',
// Leading slash is necessary
publicPath: `/${webpackPublicOutputDir}`,
path: webpackOutputPath,
},
output: {
filename: 'webpack-bundle.js',
path: '../app/assets/webpack',
}
config/intializers/assets.rb
Rails.application.config.assets.version = '1.0'
+ Rails.application.config.assets.paths << Rails.root.join("app", "assets", "webpack")
$ foreman start -f Procfile.dev
/home/vagrant/.rvm/rubies/ruby-2.3.0/lib/ruby/2.3.0/rubygems/specification.rb:2158:in `method_missing': undefined method `this' for #<Gem::Specification:0x114cfe8 foreman-0.84.0> (NoMethodError)
from /home/vagrant/.rvm/rubies/ruby-2.3.0/lib/ruby/2.3.0/rubygems/specification.rb:1057:in `find_active_stub_by_path'
from /home/vagrant/.rvm/rubies/ruby-2.3.0/lib/ruby/2.3.0/rubygems/core_ext/kernel_require.rb:64:in `require'
from /home/vagrant/.rvm/gems/ruby-2.3.0/gems/foreman-0.84.0/bin/foreman:5:in `<top (required)>'
from /home/vagrant/.rvm/gems/ruby-2.3.0/bin/foreman:23:in `load'
from /home/vagrant/.rvm/gems/ruby-2.3.0/bin/foreman:23:in `<main>'
from /home/vagrant/.rvm/gems/ruby-2.3.0/bin/ruby_executable_hooks:15:in `eval'
from /home/vagrant/.rvm/gems/ruby-2.3.0/bin/ruby_executable_hooks:15:in `<main>'
$ gem install foreman Successfully installed foreman-0.84.0 1 gem installed
I run it again and same error.
``