はじめに
先日 generator-keystone-react というリポジトリを見つけたので試して見ることにしました。
先に結論を書くと１年近くリポジトリは更新されておらず、react化は先に管理画面で進んでいることもあり、ここは今後開発進まないのかなと思っています。webpackに移行したいという話もあり、継続されるとしては実装方法は全然別物になりそうです。
せっかくinstallしたので
主だった部分のコードを貼っておいたのご参考まで。
準備
既に
generator-keystone
でKeystoneを利用できている（環境が整っている）前提です
また今回試した環境は
node: v6.9.1
npm: 3.10.8
OS: MacOS
です。
install
README.mdの通り
npm install -g generator-keystone-react
yo keystone-react
を実行
Welcome to the Keystone React generator!
? What is the name of your project? My Site
? Would you like to create a new directory for your project? No
create package.json
create keystone.js
create .editorconfig
create .gitignore
create .jshintrc
create Procfile
create client/scripts/application.js
create models/User.js
create public/favicon.ico
create public/styles/site.less
create public/styles/site.min.css
create routes/index.js
create templates/views/index.jade
create updates/0.0.1-admins.js
Running npm install...
<以下略>
開発中のようで、非常にシンプルな構成ですね。選択肢も少ないです。
起動
せっかちなのですぐ実行
node keystone.js
HTMLソース
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My Site</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link href="/styles/site.min.css" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCBroD1_P_WPvdhf3uyBxRzPiRbKvLiLBk"></script>
<script src="/js/application.js"></script>
</body>
</html>
google mapが入ってしまっているのはリポジトリ上では削除されているようです。
jadeファイル
doctype html
html
//- HTML HEADER
head
meta(charset="utf-8")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
meta(http-equiv="X-UA-Compatible" content="IE=edge")
title My Site
link(rel="shortcut icon", href="/favicon.ico", type="image/x-icon")
//- Customise the stylesheet for your site by editing /public/styles/site.less
//- All .less files will be automatically compiled and minified in production.
link(href="/styles/site.min.css", rel="stylesheet")
//- HTML BODY
body
#app
script(src='https://maps.googleapis.com/maps/api/js?key=AIzaSyCBroD1_P_WPvdhf3uyBxRzPiRbKvLiLBk')
script(src='/js/application.js')
applicaton.js
var React = require('react');
var App = React.createClass({
render: function() {
return (
<div>Hello World</div>
);
}
});
React.render(
<App />,
document.getElementById('app')
);
jsの出力方法
app.use('/js', browserify('./client/scripts', {
transform: [babelify.configure({
plugins: ['object-assign']
})]
}));