Cloud9でRails5とReact.jsを使える環境を構築する
Rails5とReact.jsを併用する環境の構築方法について、あまり記事が少なかったので書くことにします。
始める前に前提として、cloud9で新しいworkspaceを作ってください。
この際、「Choose a template」で "Blank" を選びます。
よし、ではやっていこう！
Rails5の環境構築
Ruby 2.4.0 インストール
rvm install 2.4.0
rvmはRubyのパッケージマネージャーというやつです。
バージョン管理を楽にするとか。
Rails5.1 インストール
gem install rails
これでRailsの最新版がインストールされます。
Bundlerインストール
gem install bundler
Railsのライブラリ管理ツールである、Bundlerをインストール。
ここまでで、とりあえずRails5の環境構築は完了です。
React.jsの環境構築 ①
Reactをインストールするためには、npmというnode.jsのパッケージマネージャーを使います。
そのため、まず第一段階としてnode.jsをインストールします。
Node.jsのインストール
nvm install v7.7.1
npmでnpmのアップグレード
npm update -g npm
"-g" はglobally、つまりどのプロジェクトでも使えるようにするオプションです。
Rails5側の準備
Railsアプリケーション作成とディレクトリ移動
rails new sample
いつも通りrails newでrailsアプリを作ります。
この時、"sample" の箇所がアプリ名となるので、任意の文字列に変更してください。
ディレクトリの移動
cd sample
"sample" の箇所がアプリ名となるので、任意の文字列に変更してください。
これから色々インストールしていくにあたり、アプリのディレクトリに移動する必要があります。
Gemfile修正
gem 'webpacker', github: "rails/webpacker"
gemファイルに、webpackerについて入力します。完了したら、bundle install
bundle install
Yarnインストール
npm i -g yarn
yarn install
Webpackerインストール
rake webpacker:install
コントローラ作成
rails g controller pages index
この段階で、ページが開けるか確認してみましょう。
「Yay! You're on Rails!」と、仲良さげな子供たちの絵が表示されるはずなのですが...
あれ、ページが開けない、、、となったので、yarnを再インストール
npm i -g yarn
yarn install
application.html.erbに追記
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
上記を下記に書き換えて下さい。
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
Reactのインストール、そしてビルドへ
Reactのインストール
rake webpacker:install:react
application.jsに追記
require('./hello_react.jsx')
このままビルドしようとするとエラーが出るため、それに従い
bundle binstubs bundler --force
ビルド
bin/webpack
サーバー起動
rails s
Material-uiのinstall
npm install material-ui
fetch-apiを入れる
npm install whatwg-fetch --save
これを使いたい箇所に、import 'whatwg-fetch'を書き込む
config/environments/development.rb
の、config.webpacker.check_yarn_integrity = trueをfalseに
標準フォント Robotoを入れる
Cloud9の設定を変更
まず、Runのmanageのとこより設定を開く。
Runの設定を、Ruby on Rails(default)にし、cwdをアプリのdirectoryにして、set as default
および、experimentalからauto-saveをオンに