Learn プログ

-マナビメモ-

Riot.js Redux Rails 1 / 8「環境構築」

はじめに

フロントにRiot.jsとReduxを使いサーバーサイドにRailsを使い、初めに環境構築し、次にReduxの使い方の流れをみて、最終的に簡単なTodoAppを作成する。

環境構築

  • Riot.js Redux Rails 1 / 8 「環境構築」

簡単な例でReduxの流れをみる

Todo Appの作成

最終的に完成したTodo App
https://github.com/atfeo/Riot_Redux_Rails

参考

環境構築

Mac
Rails 5.0.0.1
ruby 2.3.1
riot 2.6.4

ターミナル

$ rails new riot_redux_rails
$ cd riot_redux_rails
$ mkdir client
$ cd client

clientディレクト

Package.json
$ npm init -y

これによりpackage.jsonが作成されるので

{
  "private": "true",
  "scripts": {
    "webpack-watch": "webpack -w"
  }
}

のように書き換える。 再びターミナルで

$ npm install --save-dev webpack tag-loader babel-core babel-loader babel-preset-es2015

同じく

$ npm install --save riot redux redux-thunk
webpackの設定

webpack.config.jsを作成し

// ./client/webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: {
    path: '../app/assets/javascripts/webpack',
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015'],
        },
      },
      {
        test: /\.tag$/,
        loader: 'tag',
        exclude: /node_modules/,
      },
    ],
  },
};

そして

$ cd ..

で、アプリケーションのルートに戻っておく

Gemfile

Gemfileに

# ./Gemfile
gem 'foreman'

を追加し

$ bundle install

Procfile

アプリケーションのルートディレクトリにProcfileを作成

rails: rails s
webpack: npm --prefix client run webpack-watch

これで下準備は終わり

動作確認

riotのtagファイルを作成

<!-- ./client/src/tags/sample-output.tag -->
<sample-output>
  <h1>Hello Riot.js Redux Rails</h1>
</sample-output>

sample-outputタグをマウントするトップページを作成

$ rails g controller Top index

routes.rbを書き換える

# ./config/routes.rb
Rails.application.routes.draw do
  root 'top#index'
end

次にindex.html.erbにタグを書く

<!-- ./app/views/top/index.html.erb -->
<sample-output></sample-output>

Riotタグをマウントする為のindex.js

// ./client/src/index.js
import riot from 'riot';
import './tags/sample-output.tag';

document.addEventListener('DOMContentLoaded', () => {
  riot.mount('sample-output');
});

マウントできているか確認

ターミナルで

$ foreman start

して、ブラウザでlocalhost:5000を確認
Hello Riot Redux Rails が表示されれば成功

環境構築は終わり。

次回から簡単な例で、Reduxの使い方の大まかな流れを見る。
Todoアプリの作成は、Riot.js Redux Rails 5 / 8から。

Riot.js Redux Rails 2 / 8に続く