Typescript + React + Redux + SSR 辺りの素振り

仕事で使うことになりそうなので素振り

要点を抑えながらシンプルめに書いてみた

インクリメントするだけのアプリ

セットアップ

基本的なの

$ yarn add react react-dom redux react-redux
$ yarn add --dev typescript ts-loader webpack webpack-cli

型情報も入れる

$ yarn add --dev @types/react @types/react-dom @types/react-redux

サーバー

$ yarn add fastify serve-static
$ yarn add --dev @types/serve-static

ディレクトリ構成

SSRするのでクライアントとサーバー側それぞれでエンドポイントを用意してる

├── app // 共通のコード
├── client
│   └── index.tsx
├── server
│   ├── Html.tsx
│   └── index.tsx
├── tsconfig.client.json
├── tsconfig.json
├── webpack.config.js
└── package.json

最終的なコード

github.com

yarn start するとサーバーが立ち上がって、初回のSSRだけされるようになってる

f:id:rskull:20180827014625g:plain

参考にした記事