を含むが、Railsのエンジンに（反応レール）と反応

Question

EDIT：ので、私は私のRailsのエンジンにReactJSを含めるにはどうすればよい質問

を簡素化するために、このレトロ積極的に編集し、以下に詳細に自分の質問に答えましたか？

私が直接react-rails宝石を追加した場合、私はこのトピックに関するドキュメントやブログ記事の欠如が痛いです

React::ServerRendering::PrerenderError in Blorgh::Dashboards#show 
Encountered error "#<ExecJS::ProgramError: TypeError: undefined is not an object (evaluating 'this.ReactRailsUJS.serverRender')>" when prerendering SomeComponent 

Answer 1

エラーが発生します。私はそれがより一般的な要求であると想像していたでしょう。

苦労している人のために、私はいくつかの髪を引っ張って、以下の設定を行うことができました！

免責事項：私はこの解決策が「正しい」ものであるかどうか、またそれが推奨されるかどうかはわかりません。私はレールエンジンとアセットパイプラインについてもっと知っている人が必要に応じて編集するのが好きです。

development/productionとprerender: true/prerender: falseの4つの組み合わせのすべてでこれをテストしました。あなたのエンジンの名前（公式Railsのドキュメントから持ち上げ） -

定義

以下の例は、以下の定義

• blorghを使用する（私はRAILS_ENVを設定することで、私のローカルマシン上productionをテストしました）
• SomeComponent/some_component.jsx - 含める反応成分の名称
• RAILS_ROOT - のルートパスENGINE_ROOT
あなたのエンジンのテストやスペックフォルダ内 ダミーホストアプリケーションから react-railsドキュメントを1として、あなたのRailsエンジン

セットアップ

のルートパス、その意志あなたのENGINE_ROOTからジェネレータを実行しますいくつかのファイルを作成します。

エンジンの構成

rails generate react:install 

- 資産フォルダ

フォルダ構造があるべき -

- app/ 
    - assets/ 
    - config/ 
     - blorgh_manifest.js 
    - javascripts/ 
     - blorgh/ 
     - components/ 
      - some_component.jsx 
     - application.js 
     - components.js 
     - server_rendering.js 

両方components.jsとserver_rendering.js、本質的に、あなたのために反応し、その後、components/フォルダの下に、あなたのコンポーネントを必要としています。server_rendering.jsが、私は非常によく理解していないあなたはプリレンダリングされているサーバ側

にマニフェスト自体を呼び出し、それの名前が示唆するように、すべてあなたのエンジンのCSSのマニフェストであるように思われているのに対し、しかしcomponents.jsはapplication.jsを通じて含まれており、 JS資産

マニフェスト（これはすでにただ明確にするためなど、存在している必要があります）

# app/assets/config/blorg_manifest.js 
//= link_directory ../javascripts/blorgh .js 
//= link_directory ../stylesheets/blorgh .css 

アプリケーション

# app/assets/javascripts/blorgh/application.js 
//= require react 
//= require react_ujs 
//= require ./components 
//= require_tree . 

の

コンポーネント

# app/assets/javascripts/blorgh/components.js 
//= require_tree ./components 

サーバー

# app/assets/javascripts/blorgh/server_rendering.js 
//= require react-server 
//= require react_ujs 
//= require ./components 

いくつかのコンポーネント（でテストするだけのサンプル）

var SomeComponent = React.createClass({ 
    propTypes:{ 
    }, 

    getInitialState: function() { 
    return {}; 
    }, 

    render: function() { 
    return (
     <div> 
     THIS IS IN REACT WOOHOO 
     </div> 
    ); 
    } 
}); 

エンジンの構成レンダリング - アプリケーション

エンジンの初期化子 - の必要性を資産prcompiの名前空間ファイルlation

# config/initializers/react_server_rendering.rb 
Rails.application.config.assets.precompile += ["blorgh/server_rendering.js"] 

エンジン - 必要と反応し、

require "react-rails" 

module Blorgh 
    class Engine < ::Rails::Engine 
    isolate_namespace Blorgh 

    # .... 
    initializer("blorgh.react-rails") do |app| 
     app.config.react.variant = Rails.env.to_s 

     # Make sure the file is explicitly referenced for server side rendering 
     app.config.react.server_renderer_options = { 
     files: ["blorgh/server_rendering.js"] 
     } 
    end 
    end 
end 

HTMLビューにそれを設定する - あなたのホストアプリケーションは、あなたのエンジンの資産を含めるべきであるコンポーネント

<%= react_component("SomeComponent", {}, { prerender: false }) %> 
# or 
<%= react_component("SomeComponent", {}, { prerender: true }) %> 

ホストアプリケーション構成

をレンダリング。今、あなたは上記のrails serverを実行したとき、あなたはエンジンのユーザーが開発

で実行して

#{RAILS_ROOT}/app/assets/javascripts/application.js 
// Make sure it appears above `require_tree .` 
//= require blorgh_manifest.js 

そのアプリケーションファイルに以下を追加するように指示する必要があることを行うには、あなたのコンポーネント

をロードする必要がありますテスト「生産」ローカル

あなたはすべてを確実にしたい場合は

あなたはローカルプロダクションモード

でアプリを実行することをお勧めします、生産上の[OK]を実行します

cd RAILS_ROOT 
rake assets:precompile 
cd ENGINE_ROOT 
RAILS_SERVE_STATIC_FILES=true SECRET_KEY_BASE=(...) rails s -e production