JSでつくる開発環境のつづきです。
今回は、Reactをサーバサイドレンダリングできるようにします。主にExpressを利用して実現するのですが、そこらへんは以下の記事に書いたとおりです。
↑のとおり実装していきます。
パッケージインストール
今回新しく必要なパッケージは、expressです。サーバサイドのJavascriptフレームワークですね。
$ npm install express --save
server.js
サーバサイドレンダリングを行うためのJSを作成します。
Expressのローカルサーバを、ポート3000番で立ち上げます。localhost:3000にアクセスすると、サーバサイドレンダリングされた結果が表示されます。
Webpackコンフィグの修正
また、server.jsをコンパイルするために、webpack.config.jsを修正します。
このとおり。condigが内部的に、２つになった感じですね。json-loaderとtarget: 'node'の記述をお忘れなく。
json-loaderはexpressをimportしたファイルをコンパイルするのに必要なようです。
$ npm install json-loader --save-dev
package.jsonの修正
さて、webpack.configの修正にて、本番ビルドと開発ビルドでmodule.exportするconfigを振り分けるようにしました。両方ビルドするのは本番ビルドのみです。
（と、書いてて実は自信がありません。。サーバサイドレンダリングが必要なのは本番環境だけですよね。。なんで開発時には不要なはず。。）
ひとまず、本番ビルドのときにはnpm scriptsでNODE_ENV=productionを渡すようにします。
（一部抜粋）
.gitignore
そうえいば、gitignoreを作成していませんでした。
重たいファイルはignoreします。
というわけで、今回はExpressをつかって、サーバサイドレンダリングを実現しました。
HerokuなりどこかにUpするときに、またここらへんは修正するかもしれません。
次回はいよいよRelay, GraphQLを組み込んでいきます。
