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:


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
├── env.js
├── jest
│   ├── cssTransform.js
│   ├── fileTransform.js
│   └── typescriptTransform.js
├── paths.js
├── polyfills.js
└── webpackDevServer.config.js

Update webpack version to 4

Change order for calling InterpolateHtmlPlugin:

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

Install extract-text-webpack-plugin

yarn add extract-text-webpack-plugin@next

Install react-dev-utils-for-webpack4

yarn add react-dev-utils-for-webpack4

Remove [contenthash]

Changed [contenthash] to [hash].

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!!