Riot.js Observable Rails 1 / 5 「環境構築」

はじめに

Riot.js Redux Railsシリーズで作ったTodoアプリのRedux部分をObservableを使って書いた。 (Observerパターンとか全然わかってない。ReduxをObservableで置き換える意味があるかもわからない。なんとなく似ていると思ったのでやってみた。)

Riot.js Redux Railsで作ったTodoアプリと全く同じものを作成するのでコードが大分重なっている(Redux部分をObservableにしたのと、それに伴う変更以外全く同じ)が、今回の一連の記事だけ読んでも出来るように省略はしない。

環境構築

• Riot.js Observable Rails 1 / 5 「環境構築」

Todo Appの作成

• Riot.js Observable Rails 2 / 5 「Todoリストを表示する」
• Riot.js Observable Rails 3 / 5 「新たなTodoを追加出来るようにする」
• Riot.js Observable Rails 4 / 5 「完了したTodoをチェック出来るようにする」
• Riot.js Observable Rails 5 / 5 「チェックしてあるタスクを削除出来るようにする」

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

参考

• webpackを使った Rails上でのReact開発
• Setting up Webpack and RiotJS

環境構築

Mac
Rails 5.0.0.1
ruby 2.3.1
riot 2.6.7

ターミナル

$ rails new riot_observable_rails
$ cd riot_observable_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

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

環境構築終わり。

次回からTodoアプリの作成。

Riot.js Observable Rails 2 / 5に続く