More than 5 years have passed since last update.

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

Posted at 2017-05-30

#はじめに

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でブラウザ起動し、
以下ドメイン部を変更したパスでアクセス。

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

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

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

おわり