如何在 Rails 4 后端上使用 Ruby 服务 React 应用程序
How to serve React app with Ruby on Rails 4 backend
我们有一个 Ruby on Rails 全栈应用程序,我们想把它变成一个 ReactJS 应用程序,同时保留后端代码,重做前端代码。
我们的 gemfile 如下所示:
ruby '2.2.1'
source 'https://rubygems.org' do
gem 'rails', '4.1.14'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.0.0'
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0', group: :doc
gem 'bootstrap-sass'
gem 'sass-rails', '>= 3.2'
gem 'autoprefixer-rails'
gem 'devise'
gem 'devise_invitable'
gem 'devise-token_authenticatable'
gem 'omniauth'
gem 'omniauth-facebook'
gem 'omniauth-google-oauth2'
gem 'figaro'
gem 'haml-rails'
gem 'mysql2', '~> 0.3.18'
gem 'pundit'
gem 'rolify'
gem 'simple_form'
gem 'wicked_pdf'
gem 'wkhtmltopdf-binary'
gem 'axlsx', '2.1.0.pre'
gem 'axlsx_rails'
gem 'axlsx_styler'
group :development do
gem 'better_errors'
gem 'binding_of_caller', :platforms => [:mri_21]
gem 'capistrano'
gem 'capistrano-bundler'
gem 'capistrano-rails'
gem 'capistrano-rails-console'
gem 'capistrano-rvm'
gem 'capistrano-pending', :require => false
gem 'capistrano-sidekiq'
gem 'html2haml'
gem 'quiet_assets'
gem 'rails_layout'
gem 'magic_encoding'
gem 'annotate'
end
group :development, :test do
gem 'factory_girl_rails'
gem 'rspec-rails'
gem 'letter_opener'
gem 'bullet'
gem 'timecop'
end
group :test do
gem 'capybara'
gem 'database_cleaner'
gem 'faker'
gem 'launchy'
gem 'selenium-webdriver'
gem 'simplecov'
gem 'codeclimate-test-reporter', '~> 1.0.0'
end
gem 'passenger'
gem 'passenger-rails'
gem 'execjs'
gem 'therubyracer', :platforms => :ruby
gem 'newrelic_rpm'
gem 'redis-rails'
gem 'redis-session-store'
gem 'redis-rack-cache'
gem 'rack-cache'
gem 'actionpack-page_caching'
gem 'lograge'
gem 'rocket_pants'
gem 'active_model_serializers', '~>0.8.1'
gem 'will_paginate'
gem 'delocalize'
gem 'phone'
gem 'paranoia', '~> 2.0'
gem 'bh', '~> 1.0'
gem 'sidekiq'
gem 'counter_culture'
gem 'rollbar'
gem 'oj', '~> 2.12.14'
gem 'sidetiq'
gem 'enum_help'
gem 'sinatra', '>= 1.3.0', :require => nil
gem 'awesome_print', require: 'ap'
gem 'ngannotate-rails'
end
source 'https://rails-assets.org' do
gem 'rails-assets-angular', '1.3.12'
gem 'rails-assets-leaflet'
gem 'rails-assets-angular-animate'
gem 'rails-assets-angular-cookies'
gem 'rails-assets-angular-resource'
gem 'rails-assets-angular-sanitize'
gem 'rails-assets-angular-touch'
gem 'rails-assets-angular-route'
gem 'rails-assets-angular-moment'
gem 'rails-assets-angular-ui-date'
gem 'rails-assets-angular-xeditable'
gem 'rails-assets-components-font-awesome', '4.2.0'
gem 'rails-assets-angular-loading-bar'
gem 'rails-assets-angular-confirm-click'
gem 'rails-assets-angular-strap'
gem 'rails-assets-angular-dialog-service'
gem 'rails-assets-angular-bootstrap'
gem 'rails-assets-angular-translate'
gem 'rails-assets-trNgGrid'
gem 'rails-assets-accounting.js'
gem 'rails-assets-angular-ui-notification'
end
这是一个现实的尝试吗?我不熟悉 Rails 上的 Ruby,我们团队中的任何人也不熟悉。似乎有很多幕后逻辑,我想知道其中的一些逻辑是否会阻止它 100% 工作。
您刚刚分享了Gem文件,但没有说明该应用程序是如何开发的,因此信息不足,无法给您准确的答复。但通常情况下,会遵循两种不同的方法。
第一种方法
两个单独的应用程序,当您的 ruby on rails 应用程序工作时,可以创建另一个 React 应用程序,并使用 Ruby on Rails 应用程序中存在的所有端点,如果你找不到一些需要的端点,你可以检查已经制作的端点并按照这种方式制作一些新的端点。希望这样做会更容易。
在 Rails
上使用 Ruby 的 Gem
在这种方法中,您必须拆分您的项目并删除项目中已经存在的所有 Angular Gem,然后从带有 ReactJS 的全新前端开始。在我看来,它需要更多 Ruby Rails 知识才能做到这一点,但最终,您只会得到一个项目。
您的项目
从 Gem 文件开始,它似乎大量使用了 Angular,所以您可能有 运行 它并检查它是否有大部分端点 Restful。如果是,那么我建议继续方法一并创建新的 ReactJS 应用程序,它将使用 rails 上 Ruby 中创建的所有端点,这将在 React 端应用程序上做更多工作,而在 [=38] 上工作更少=] 在 Rails 上。即使您发现某些端点不存在,您也可以遵循已创建的端点编码和操作,您将在其中完成详细信息。我知道会有两个不同的项目,但是在 Rails 上学习 Ruby 并将其与 React 集成的学习曲线不仅仅是两个不同的项目。
我们有一个 Ruby on Rails 全栈应用程序,我们想把它变成一个 ReactJS 应用程序,同时保留后端代码,重做前端代码。
我们的 gemfile 如下所示:
ruby '2.2.1'
source 'https://rubygems.org' do
gem 'rails', '4.1.14'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.0.0'
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0', group: :doc
gem 'bootstrap-sass'
gem 'sass-rails', '>= 3.2'
gem 'autoprefixer-rails'
gem 'devise'
gem 'devise_invitable'
gem 'devise-token_authenticatable'
gem 'omniauth'
gem 'omniauth-facebook'
gem 'omniauth-google-oauth2'
gem 'figaro'
gem 'haml-rails'
gem 'mysql2', '~> 0.3.18'
gem 'pundit'
gem 'rolify'
gem 'simple_form'
gem 'wicked_pdf'
gem 'wkhtmltopdf-binary'
gem 'axlsx', '2.1.0.pre'
gem 'axlsx_rails'
gem 'axlsx_styler'
group :development do
gem 'better_errors'
gem 'binding_of_caller', :platforms => [:mri_21]
gem 'capistrano'
gem 'capistrano-bundler'
gem 'capistrano-rails'
gem 'capistrano-rails-console'
gem 'capistrano-rvm'
gem 'capistrano-pending', :require => false
gem 'capistrano-sidekiq'
gem 'html2haml'
gem 'quiet_assets'
gem 'rails_layout'
gem 'magic_encoding'
gem 'annotate'
end
group :development, :test do
gem 'factory_girl_rails'
gem 'rspec-rails'
gem 'letter_opener'
gem 'bullet'
gem 'timecop'
end
group :test do
gem 'capybara'
gem 'database_cleaner'
gem 'faker'
gem 'launchy'
gem 'selenium-webdriver'
gem 'simplecov'
gem 'codeclimate-test-reporter', '~> 1.0.0'
end
gem 'passenger'
gem 'passenger-rails'
gem 'execjs'
gem 'therubyracer', :platforms => :ruby
gem 'newrelic_rpm'
gem 'redis-rails'
gem 'redis-session-store'
gem 'redis-rack-cache'
gem 'rack-cache'
gem 'actionpack-page_caching'
gem 'lograge'
gem 'rocket_pants'
gem 'active_model_serializers', '~>0.8.1'
gem 'will_paginate'
gem 'delocalize'
gem 'phone'
gem 'paranoia', '~> 2.0'
gem 'bh', '~> 1.0'
gem 'sidekiq'
gem 'counter_culture'
gem 'rollbar'
gem 'oj', '~> 2.12.14'
gem 'sidetiq'
gem 'enum_help'
gem 'sinatra', '>= 1.3.0', :require => nil
gem 'awesome_print', require: 'ap'
gem 'ngannotate-rails'
end
source 'https://rails-assets.org' do
gem 'rails-assets-angular', '1.3.12'
gem 'rails-assets-leaflet'
gem 'rails-assets-angular-animate'
gem 'rails-assets-angular-cookies'
gem 'rails-assets-angular-resource'
gem 'rails-assets-angular-sanitize'
gem 'rails-assets-angular-touch'
gem 'rails-assets-angular-route'
gem 'rails-assets-angular-moment'
gem 'rails-assets-angular-ui-date'
gem 'rails-assets-angular-xeditable'
gem 'rails-assets-components-font-awesome', '4.2.0'
gem 'rails-assets-angular-loading-bar'
gem 'rails-assets-angular-confirm-click'
gem 'rails-assets-angular-strap'
gem 'rails-assets-angular-dialog-service'
gem 'rails-assets-angular-bootstrap'
gem 'rails-assets-angular-translate'
gem 'rails-assets-trNgGrid'
gem 'rails-assets-accounting.js'
gem 'rails-assets-angular-ui-notification'
end
这是一个现实的尝试吗?我不熟悉 Rails 上的 Ruby,我们团队中的任何人也不熟悉。似乎有很多幕后逻辑,我想知道其中的一些逻辑是否会阻止它 100% 工作。
您刚刚分享了Gem文件,但没有说明该应用程序是如何开发的,因此信息不足,无法给您准确的答复。但通常情况下,会遵循两种不同的方法。
第一种方法
两个单独的应用程序,当您的 ruby on rails 应用程序工作时,可以创建另一个 React 应用程序,并使用 Ruby on Rails 应用程序中存在的所有端点,如果你找不到一些需要的端点,你可以检查已经制作的端点并按照这种方式制作一些新的端点。希望这样做会更容易。
在 Rails
上使用 Ruby 的 Gem在这种方法中,您必须拆分您的项目并删除项目中已经存在的所有 Angular Gem,然后从带有 ReactJS 的全新前端开始。在我看来,它需要更多 Ruby Rails 知识才能做到这一点,但最终,您只会得到一个项目。
您的项目
从 Gem 文件开始,它似乎大量使用了 Angular,所以您可能有 运行 它并检查它是否有大部分端点 Restful。如果是,那么我建议继续方法一并创建新的 ReactJS 应用程序,它将使用 rails 上 Ruby 中创建的所有端点,这将在 React 端应用程序上做更多工作,而在 [=38] 上工作更少=] 在 Rails 上。即使您发现某些端点不存在,您也可以遵循已创建的端点编码和操作,您将在其中完成详细信息。我知道会有两个不同的项目,但是在 Rails 上学习 Ruby 并将其与 React 集成的学习曲线不仅仅是两个不同的项目。