Cloud9上でRails 5.1+React.jsの環境構築手順

  • 8
    Like
  • 0
    Comment

はじめに

Cloud9上でRails5.1 + React.js環境構築の手順です。
基本コピペで行けます。

細かいことは抜きにして、とりあえず環境作りたい方対象です。

前提条件

・Cloud9のアカウントあること
・Blankでworkspce作成済みであること

Ruby 2.3.1 インストール

rvm install 2.3.1

Rails5.1 インストール

gem install rails

Bundlerインストール

gem install bundler

Nodo.jsのインストール

nvm install v7.7.1

npmでnode.jsのアップグレード

npm update -g npm

Railsアプリケーション作成とディレクトリ移動

rails new webpacker-sample && cd webpacker-sample

Gemfile修正

webpacker-sample/Gemfile

gem 'webpacker', github: "rails/webpacker"

bundle install

bundle install

Yarnインストール

npm i -g yarn

Webpackerインストール

rake webpacker:install

コントローラ作成

rails g controller pages index

application.html.erbに追記

app/views/layouts/application.html.erb

<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

Reactのインストール

rake webpacker:install:react

application.jsに追記

app/javascript/packs/application.js

require('./hello_react.jsx')

ビルド

bin/webpack

サーバー起動

rails s

Webアクセス確認

Preview→Preview Running Applicationでブラウザ起動し、
以下ドメイン部を変更したパスでアクセス。

https://xxx.c9users.io/pages/index

Hello React!と表示されれば成功です!

最後に

以下のファイルをいじることでReactの実装ができます。
ファイル修正後、「bin/webpack」のビルドを都度実行する必要があります。
(ビルドが面倒くさい場合は、下記参考を参照ください。)

/webpacker-sample/app/javascript/packs/hello_react.jsx
/webpacker-sample/app/views/pages/index.html.erb

参考

以下を参考にしました。
http://qiita.com/yoshiokaCB/items/564ed0440f0428c0009a#%E8%BF%BD%E8%A8%98

おわり