TypeScript

Credits: @Zummer, @janjachacz

Installation

# Create new cra
yarn create react-app my-app --typescript
cd my-app

# Install new cra-universal
yarn add -D cra-universal

# Install peer dependency
yarn add @cra-express/core

Install required dep:

yarn add -D webpack-merge

Create crau.config.js in cra root folder

touch crau.config.js

In crau.config.js

const webpackMerge = require("webpack-merge");

const tsConfig = {
  resolve: {
    extensions: [".ts", ".tsx"]
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        loaders: "babel-loader",
        options: {
          babelrc: false,
          extends: "./node_modules/cra-universal/src/config/server/.babelrc"
        }
      }
    ]
  }
};

module.exports = {
  webpackPlugins: [],
  modifyWebpack: config => webpackMerge(config, tsConfig)
};

Update your render method on src/index.js

// before
ReactDOM.render(...)

// after
ReactDOM.hydrate(...)

Fix image hydratation waring in src/App.tsx's image, add suppressHydrationWarning

// before
...
<img src={logo} className="App-logo" alt="logo" />

// after
...
<img suppressHydrationWarning src={logo} className="App-logo" alt="logo" />

Prevent React from openning browser on server start

echo "BROWSER=none" >> .env.local

Run the servers

yarn cra-universal start --both

Open the browser

open http://localhost:3001
← Redux