How to set up ReactJS with TypeScript and Webpack 4 with webpack-dev-server (for hot reloading)

The tutorial for React and Webpack at typescriptlang.org is one of the better tutorials out there, although with the introduction of Webpack 4 and wanting the hot reload support, I sought to seek out a more modern tutorial. I found the tutorial at AppDividend but still wanted the familiar experience of the one at typescriptlang.org.

  1. https://www.typescriptlang.org/docs/handbook/react-&-webpack.html
  2. https://appdividend.com/2018/03/18/how-to-setup-typescript-with-webpack-4/

The credit of course goes to the authors of each respective article.

 

1. Install TypeScript & Webpack-cli:

npm install -g typescript
npm install -g webpack-cli

 

2. Create directory structure

mkdir react-typescript-webpack4
cd react-typescript-webpack4

mkdir src
cd src
mkdir components
cd ..

 

3. Initialise NPM

 

First initialise the project:

npm init -y

 

Next add the packages we’ll need:

npm install webpack webpack-cli webpack-dev-server --save-dev
npm install typescript ts-loader --save-dev
npm install react react-dom @types/react @types/react-dom --save-dev

 

4. Create tsconfig.json

{
	"compilerOptions":
	{
		"outDir": "./dist/",
		"sourceMap": true,
		"noImplicitAny": true,
		"module": "commonjs",
		"target": "es5",
		"jsx": "react"
	},
	"include": [
		"./src/**/*"
	]
}

 

5. Create webpack.config.js

const path = require('path');

module.exports =
{
	entry: path.join(__dirname, '/src/index.tsx'),
	output:
	{
		filename: 'bundle.js',
		path: __dirname + "/dist",
		publicPath: "/dist/"
	},
	module:
	{
		rules: [
			{
				test: /\.tsx?$/,
				loader: 'ts-loader',
				exclude: /node_modules/,
			},
		]
	},
	resolve:
	{
		extensions: [".tsx", ".ts", ".js"]
	},
	// When importing a module whose path matches one of the following, just
	// assume a corresponding global variable exists and use that instead.
	// This is important because it allows us to avoid bundling all of our
	// dependencies, which allows browsers to cache those libraries between builds.
	externals:
	{
		"react": "React",
		"react-dom": "ReactDOM"
	},
};

 

6. Create Components

 

Index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";

import { Hello } from "./components/Hello";

ReactDOM.render(
    <Hello compiler="TypeScript" framework="React" />,
    document.getElementById("example")
);

 

Hello.tsx

import * as React from "react";

export interface HelloProps { compiler: string; framework: string; }

// 'HelloProps' describes the shape of props.
// State is never set so we use the '{}' type.
export class Hello extends React.Component<HelloProps, {}> {
    render() {
        return <h1>Hello from {this.props.compiler} and {this.props.framework}!</h1>;
    }
}

 

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Hello React!</title>
    </head>
    <body>
        <div id="example"></div>

        <!-- Dependencies -->
        <script src="./node_modules/react/umd/react.development.js"></script>
        <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

        <!-- Main -->
        <script src="./dist/bundle.js"></script>
    </body>
</html>

 

Add the following “start” scrip to the scripts section in package.json to look as follows:

"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1",
	"start": "webpack-dev-server --mode development"
},

Leave a Reply

Your email address will not be published. Required fields are marked *