create-react-app with TypeScript [JavaScript]


TypeScript-React-Starter is a starter template for TypeScript and React App.

I would like to share how to start create-react-app with TypeScript.

😼 Installation

# Install create-react-app
yarn global add create-react-app

# Create new project
create-react-app new-project --scripts-version=react-scripts-ts

🍄 Configuration

It is good to change the follows in package.json:

"scripts": {
  "test": "react-scripts-ts test --env=jsdom --coverage"
}

🐠 Appendix

Use environment variable

create-react-app accepts only a variable with prefix REACT_APP_.
you can put .env file in your project like this:

REACT_APP_XXX=http://localhost:6001/graphql

After putting the file, you execute a process

Eject webpack 3 configuration

If you want to configure webpack configuration, you can execute the follows:

yarn eject

After then, there are some configuration files in your project:

$ tree config
config
├── env.js
├── jest
│   ├── cssTransform.js
│   ├── fileTransform.js
│   └── typescriptTransform.js
├── paths.js
├── polyfills.js
├── webpack.config.dev.js
├── webpack.config.prod.js
└── webpackDevServer.config.js

Update webpack version to 4

Change order for calling InterpolateHtmlPlugin:

module.exports = {
  //...
  plugins: [
    new HtmlWebpackPlugin({
      // ...
    }),
    new InterpolateHtmlPlugin(env.raw),
    //..
  ]
}

https://github.com/jantimon/html-webpack-plugin/issues/875

Install extract-text-webpack-plugin

yarn add extract-text-webpack-plugin@next
`

https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/701

Install react-dev-utils-for-webpack4

yarn add react-dev-utils-for-webpack4

Remove [contenthash]

Changed [contenthash] to [hash].

https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/763

Add mode configuration

Add mode property to webpack configuration:

module.exports = {
  mode: 'production'
};

🍣 Reference

🖥 Recommended VPS Service

VULTR provides high performance cloud compute environment for you. Vultr has 15 data-centers strategically placed around the globe, you can use a VPS with 512 MB memory for just $ 2.5 / month ($ 0.004 / hour). In addition, Vultr is up to 4 times faster than the competition, so please check it => Check Benchmark Results!!