Setup React TypeScript project from scratch with Webpack5

  1. Getting Started
  2. Adding React and Typescript
  3. Adding Webpack
  4. Adding index.html
  5. Adding Components
  6. Adding npm scripts
  7. Run Application
  8. Next Steps

In this guide, we’ll walk through the process of setting up a React project with TypeScript from scratch using Webpack 5. This setup provides you with a clean, minimal configuration to get started with modern web development.

Getting Started

To begin with, create a folder for our new project:

1
2
mkdir react-boilerplate
cd react-boilerplate

Then initialise the project with:

1
npm init -y

This will generate a package.json file in the project root.

Adding React and Typescript

Run the following commands to install React and Typescript:

1
2
npm install react react-dom --save
npm install typescript @types/react @types/react-dom --save-dev

Add a new file called tsconfig.json in the folder with the following configuration:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "compilerOptions": {
    "jsx": "react",
    "module": "commonjs",
    "noImplicitAny": true,
    "outDir": "./dist/",
    "preserveConstEnums": true,
    "removeComments": true,
    "sourceMap": true,
    "target": "es5"
  },
  "include": [
    "./src/index.tsx"
  ]
}

Adding Webpack

Install webpack and related packages:

1
npm install webpack webpack-cli webpack-dev-server --save-dev

Next, add some commonly used loaders:

1
npm install ts-loader css-loader source-map-loader --save-dev

We need to add html-webpack-plugin as well in order to generate HTML files:

1
npm install html-webpack-plugin --save-dev

Now it’s time to configure webpack in our project. Create a file webpack.config.js in the root folder of our project:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: './src/index.tsx',
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  resolve: {
    extensions: [".js", ".jsx", ".json", ".ts", ".tsx"],
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        loader: "ts-loader",
      },
      {
        enforce: "pre",
        test: /\.js$/,
        loader: "source-map-loader",
      },
      {
        test: /\.css$/,
        loader: "css-loader",
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
    template: path.resolve(__dirname, "src", "index.html"),
    }),
  ],
}

Adding index.html

Create src folder in the root directory and then add index.html in it:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>React Boilerplate</title>
 </head>
 <body>
  <div id="root"></div>
 </body>
</html>

Adding Components

Create App.tsx in src folder:

1
2
3
4
5
6
7
import * as React from 'react';
const App = () => {
 return (
  <h3> Welcome to React Boilerplate </h3>
 )
}
export default App;

Create index.tsx in the same folder:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import * as React from 'react';
import { createRoot } from 'react-dom/client';

import App from './App';

const rootElement = document.getElementById('root') as HTMLElement;
const root = createRoot(rootElement);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Adding npm scripts

Add new scripts in the scripts section in package.json file:

1
2
3
4
"scripts": {
  "start": "webpack serve --port 3000 --mode development --open --hot",
  "build": "webpack --mode production"
}

Run Application

Now let’s run the script npm start, you will be able to visit your app at http://localhost:3000/.

Next Steps

Now that you have your React + TypeScript setup, you can start building your application! Consider adding state management, routing, and other features as you expand your project.

For more advanced Webpack configurations, check out the Webpack Documentation.