コンパイラかく語りき

import { Fun } from 'programming'

JS開発環境の構築(3) Expressを利用した、Reactのサーバサイドレンダリング

 JSでつくる開発環境のつづきです。

chuckwebtips.hatenablog.com

 

今回は、Reactをサーバサイドレンダリングできるようにします。主にExpressを利用して実現するのですが、そこらへんは以下の記事に書いたとおりです。

chuckwebtips.hatenablog.com

 

↑のとおり実装していきます。

 

パッケージインストール

今回新しく必要なパッケージは、expressです。サーバサイドのJavascriptフレームワークですね。

 

$ npm install express --save

 

server.js

サーバサイドレンダリングを行うためのJSを作成します。

 

gist.github.com

 

Expressのローカルサーバを、ポート3000番で立ち上げます。localhost:3000にアクセスすると、サーバサイドレンダリングされた結果が表示されます。

 

Webpackコンフィグの修正

また、server.jsをコンパイルするために、webpack.config.jsを修正します。

gist.github.com

 

このとおり。condigが内部的に、2つになった感じですね。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を渡すようにします。

 

gist.github.com

 

(一部抜粋)

 

.gitignore

そうえいば、gitignoreを作成していませんでした。

重たいファイルはignoreします。

gist.github.com

 

というわけで、今回はExpressをつかって、サーバサイドレンダリングを実現しました。

HerokuなりどこかにUpするときに、またここらへんは修正するかもしれません。

 

次回はいよいよRelay, GraphQLを組み込んでいきます。