Hi! In this project I created a minimal setup for a react project with typescript.
- React 18
- Typescript 4
- Webpack 5
- Hot module replacement
- Clean webpack plugin 4
- clone the project:
git clone git@github.com:yuri-duque/react_ts_webpack.git - go to project root:
cd react_ts_webpack - install dependencies:
npm install - run project:
npm run start
Hi! In this document, I created a tutorial to show how to create a project with a minimal setup for a typescript react project with webpack.
Basically, here we will create a minimal react project with typescript, to start we need to initialize a npm in the directory.
npm init -y
after this we will create a gitignore, you can copy the following content:
file name: .gitignore
./node_modules
/.pnp
.pnp.js
/coverage
/build
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
/dist
In the end we will have these files:
Before we configure a react project we will initialize a typescript in our project, só to start we need to install the typescript with this command:
npm i -D typescript
After installation we need to create a tsconfig.json file that will have the compiler options from typescript.
file name: tsconfig.json
{
"compilerOptions": {
"sourceMap": _true_,
"noImplicitAny": _false_,
"module": "commonjs",
"target": "es5",
"lib": [
"esnext",
"dom",
"dom.iterable"
],
"removeComments": _true_,
"allowSyntheticDefaultImports": _true_,
"jsx": "react",
"allowJs": _true_,
"baseUrl": "./",
"esModuleInterop": _true_,
"resolveJsonModule": _true_,
"moduleResolution": "node",
"downlevelIteration": _true_,
"paths": {
"components/*": [
"src/components/*"
]
}
},
"include": [
"./src",
"./webpack.config.ts"
]
}
We will have some errors in this file, but it will be fixed in the next steps.
To configure the react, first we need to install the react and some dependencies that we need.
npm i react react-dom --save
npm i -D @types/react @types/react-dom
So now we can start to configure the react, lets create a project structure. So create a "src" and "public" folders.
Now we will create some files that is responsible to do the react work.
On the public folder, we need to create a "index.html" file with this content:
file name: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="root"></div>
</body>
</html>
On the src folder, we need create a main file from our project:
file name: index.tsx
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));
On the src folder, we need to create a simple react component:
file name: App.tsx
import React from "react";
const App = () => {
return (
<div>
Test App
</div>
);
};
export default App;
In the end we will have this files:
To start to configure webpack we need install many dependencies, so execute this command to install it:
npm i -D webpack webpack-cli webpack-dev-server @types/node @types/webpack @types/webpack-dev-server
To configure a webpack we need to have a file with all configurations, to inform to browser where is the packs with the js and html, and another things.
So create a webpack.config.ts file.
file name: webpack.config.ts
import webpack, {Configuration} from "webpack";
const webpackConfig = (env): Configuration => ({
});
export default webpackConfig;
The first step for webpack config, we need to set the entry point, what file the webpack will analyse to compile. In our case we will set the src/index.tsx.
file name: webpack.config.ts
...
const webpackConfig = (env): Configuration => ({
entry: path.resolve(__dirname, './src/index.tsx'),
});
...
On the webpack we need configure the a module section, that the webpack use loaders to build files by modules.
babel
On module that we will use is the babel, to configure, first we need install some dependencies:
npm i -D babel-loader @babel/plugin-proposal-class-properties @babel/preset-env @babel/preset-react @babel/preset-typescript
After install the dependencies we need to crete a .babelrc file, and set some configs
file name: .babelrc
{
"presets": [
"@babel/preset-env",
"@babel/preset-typescript",
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-proposal-class-properties"
]
}
And now we need configure the webpack to use the babel.
file name: webpack.config.ts
const webpackConfig = (env): Configuration => ({
...
module: {
rules: [
{
test: /\.(js|jsx|tsx|ts)$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
],
},
...
});
On the webpack we have a plugin section, in this example we will use some plugins:
html-webpack-plugin This plugin is responsable to simplify the criation for html files.
npm i -d html-webpack-plugin
file name: webpack.config.ts
const webpackConfig = (env): Configuration => ({
...
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, './public/index.html'),
}),
],
...
});
clean-webpack-plugin This plugin is responsable to remove and clean your build folder.
npm install -D clean-webpack-plugin
file name: webpack.config.js
const webpackConfig = (env): Configuration => ({
...
plugins: [
new CleanWebpackPlugin(),
],
...
});
HotModuleReplacementPlugin This plugin is responsable to enable the hot reload on the development mode, so when we save changes on the code, the browser will be update.
file name: webpack.config.js
const webpackConfig = (env): Configuration => ({
...
plugins: [
new webpack.HotModuleReplacementPlugin(),
],
...
});
So now we will have a webpack.config.json like this:
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require('webpack');
const path = require('path');
module.exports = {
entry: path.resolve(__dirname, './src/index.tsx'),
mode: "development",
devServer: {
port: 3000,
open: true,
headers: {
"Access-Control-Allow-Origin": "*",
},
},
resolve: {
extensions: [".ts", ".tsx", ".js"],
},
module: {
rules: [
{
test: /\.(js|jsx|tsx|ts)$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
],
},
plugins: [
new HtmlWebpackPlugin({ // Plugin que simplifica a criação de arquivos HTML para servir seus pacotes.
template: path.resolve(__dirname, './public/index.html'),
}),
new CleanWebpackPlugin(), // Um plugin webpack para remover / limpar sua (s) pasta (s) de construção.
new webpack.HotModuleReplacementPlugin(), // Atualiza o navegador quando houver alterações no código
],
}
On our packege.json file we need create a command to run the project with webpack.
file name: packege.json
{
...
"scripts": {
"start": "webpack serve"
},
...
}
Now we can run the project, so we only need run this command:
$ npm run start