React setup with Typescript, Webpack 5, SSR, Code Splitting, and HMR.

Deutsche Telekom Digital Labs
3 min readJun 7, 2021


Firstly, you need to set up a React application using npx create-react-app my-application . This will create a new react application with all the required dependencies.

Installing Typescript

Now, we need to set up typescript with react. Open the terminal and run the following snippet:

// If you are using npm
npm install typescript @types/react @types/react-dom
// If you are using yarn
yarn add typescript @types/react @types/react-dom

I will be using npm going forward, please feel free to use yarn if you want to.

If you have an existing repo and need to install react in it. Please run the following snippet step by step.

// If package.json not installed
npm init
npm install react react-dom typescript @types/react @types/react-dom

Installing Babel Dependencies

For this set up we will be using babel v7 so you’ll need to install a couple of babel plugins as dev dependencies.

npm install babel-loader @babel/plugin-proposal-class-properties @babel/preset-env @babel/preset-react @babel/preset-typescript --save-dev

Setting up Webpack, SSR, Code Splitting, and HMR

So now let’s move on to the final set of dependencies required for setting up Webpack and HMR(Hot Module Reload)

npm install webpack webpack-cli webpack-dev-server webpack-hot-middleware terser-webpack-plugin webpack-node-externals webpack-merge @types/webpack @types/webpack-dev-middleware @types/webpack-hot-middleware --save-dev

@types dependencies are used to install module typescript definition with React.

We are using @loadable-components for code splitting. Let’s install its dependencies:

npm install @loadable/component @loadable/servernpm install @loadable/babel-plugin @loadable/webpack-plugin @types/loadable__component @types/loadable__server --save-dev

Let’s first set up babel config. Create a .babelrc file at the root of your project and write the following code in it.

Now create two folders client and server in your src folder and add index.tsx in both client and server. index.tsx will be served as the starting point for your client as well as the server.

A good approach is to separate out development and production webpack configs to avoid mess.

Create a webpack folder in the root and add the following files:


Create a dev folder in the webpack folder and add two files: and

Create a prod folder in the webpack folder and add two files: and

Configuration of webpack.base.js

Let’s first set up development configurations

We are done with the setup for the development webpack configuration. Now let’s move on to the webpack configuration for production mode.
Webpack production configuration will be the same as the development configuration with a few changes. But it’s good to keep them separate to avoid any kind of a mess.

webpack.base.js will be the same for production build too.

Client and Server index files

We are done with the webpack configuration for both client and server.
Now let’s set up a basic index.tsx file for both with Code Splitting and HMR.



Creating a dev or prod build

Run the following snippet to add packages to run your code with a watch:

npm install npm-run-all nodemon --save-dev

Let’s proceed with the final step of adding scripts in your package.json in order to get your build-ready:

Yay, you’re done!!!! 🍰

You have all you need to get your React TypeScript project up and running. If you want to access all of the source code you can go to the following Github repo. If you want to suggest a change make a pull request!