Rails + React + Material UI + Webpack / babel + foremanで動かすアプリケーション

Material UIをRailsに導入する方法を書きます。
使用する技術は、Rails + React + Material UI + Webpack / babel + foremanです。

モジュールシステムはbrowserifyでも可能ですが、今回は相当量のJSを使用していたため、コード分割などができるWebpackを採用しました。

環境構築

npmを使用するので、node.jsが入っている必要があります。
macであればhomebrewでインストール可能です。

RailsとReact + webpack導入

Railsアプリケーションを作成

gemfileに、react_webpack_railsを追加。

そして、bundle install後、こちらのコマンドでインストール


package.jsonの設定

プロジェクト管理や, 環境のセットアップを行うpackage.json(1階層目にある)を編集し、material-uiや一部のコンポーネントで必要なreact-tap-event-pluginなどを追加します。

設定を元にインストールします。

Material-UIを使ってみる

app/react/components内に、Main.jsを作成して、サンプルコンポーネントを作ってみます。

app/react/index.jsとapp/views/react_examples/component.html.erbを以下に変更しましょう。

Foremanで同時に動かす

webpack-dev-serverとrails serverを同時に動かす必要があるため、複数のプロセスを管理できるツールであるForemanを使用します。

インストール

Procfile を配置&コマンドを入力

起動

その後、
http://localhost:3000/react_examples/component

で、Material-UIコンポーネントのサンプルが表示されれば、完了です!