Keystone 4.0 Betaをinstallし、フロント周りをReact+React-Bootstrapに置き換えてみた[1]

はじめに

Todoアプリ以外にReactの良い勉強材料はないかと考えいたところ、KeystoneJSがBootstrapだったことを思い出し、generatorで作成した直後のテンプレートをReact-Bootstrapに置き換えてみることにしました。

今回はTOPのみ、レイアウト部分も省きます。

環境

Mac
Node.js v7.0.0
npm 3.10.8
generator-keystone@0.4.2
mongod --version 3.0.6 #brewでinstallしてます

前提

generator-keystoneを使ってkeystoneをinstallし起動済みである状態からはじめます。
またwebpackを利用します。

npm

npm install --save react react-dom react-tap-event-plugin react-bootstrap
npm install --save-dev babel-loader babel-preset-es2015 babel-preset-react bootstrap-sass css-loader file-loader node-sass sass-loader style-loader webpack

ディレクトリ追加と構造

publicをコピーしたsrcディレクトリを作成し、ここで開発したjsやsassをビルドすることにしました。

my-site/
├ models
├ node_modules
├ public (srcからビルドしたものを展開する）
├ routes
├ templates
├ updates
├ src(publicをコピーして新規作成)
│
└ （他各種設定ファイル)

webpack

module.exports = [{
  entry: {
    index: './src/js/index.js',
//    test: './src/js/test.js',
  },
  output: {
    path: 'public/js/',
    publicPath: '/js/',
    filename: '[name].js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react']
        }
      },
      {
         test: /\.woff2?$|\.ttf$|\.eot$|\.svg$/,
         loader: 'file'
       },
      {test: /\.scss$/i, loaders: ['style', 'css', 'sass']}
    ]
  },
}];

templates編集

templates/layouts/default.jade

以下はindex.js経由で読まれるのでコメントアウト
link(href="/styles/site.css", rel="stylesheet")
script(src='/js/jquery/jquery-1.11.3.min.js')
script(src='/js/bootstrap/bootstrap-3.3.5.min.js')

今回は若干サボってlayout部分はreact化せずに済ませてしまう。

templates/views/index.jade

ごっそり削除して以下だけにしました。

extends ../layouts/default

block content
        #root
        script(src='/js/index.js')

src/js/index.js

略の部分が一番大変なのですが、単純作業なので。。。

require('../styles/site.scss');
import React from 'react';
import { Button } from 'react-bootstrap';
import { render } from 'react-dom';

class App extends React.Component {
    render() {
        return <div>
          (略)
        </div>;
    }
}
render(<App />, document.querySelector('#root'));

課題・次回

次回はレイアウトやtop以外も作業してみようと思います。
フォントやsvgが　public/jsに出力されてしまうので、webpackの設定を見直したい。