React setup with Typescript, Webpack 5, SSR, Code Splitting, and HMR.
--
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 initnpm 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.
- babel-loader
- @babel/plugin-proposal-class-properties
- @babel/preset-env
- @babel/preset-react
- @babel/preset-typescript
npm install babel-loader @babel/plugin-proposal-class-properties @babel/preset-env @babel/preset-react @babel/preset-typescript --save-devSetting 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)
- webpack
- webpack-cli
- webpack-dev-server
- webpack-hot-middleware
- terser-webpack-plugin
- webpack-merge
- webpack-node-externals
- style-loader
- css-loader
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:
webpack.base.js
Create a dev folder in the webpack folder and add two files:
webpack.dev.client.js and webpack.dev.server.js
Create a prod folder in the webpack folder and add two files:
webpack.prod.client.js and webpack.prod.server.js
Configuration of webpack.base.js
Let’s first set up development configurations
webpack.dev.client.js
webpack.dev.server.js
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.
webpack.prod.client.js
webpack.prod.server.js
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.
client/index.tsx
server/index.tsx
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-devLet’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!
