In this blog post, we'll cover everything you need to know to set up a React app that's ready for deployment.
GitHub Repo: https://github.com/shivam-pawar/sample-react-app
Prerequisites
Before we begin, make sure you have Node.js and npm (or yarn) installed on your machine.
Initialize a new project
Use your Command Line and navigate to the root folder of your project and enter
npm init
This will ask you some basic information like package name, author name, description, and license. With this info it will create a file called package.json
Install React and TypeScript
- Install React and ReactDOM as dependencies:
npm install react react-dom
- Install TypeScript and its types as dev dependencies:
npm install --save-dev typescript @types/react @types/react-dom
Set up Webpack
Install the necessary Webpack dependencies:
npm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin webpack-merge ts-loader terser-webpack-plugin uglify-js
Your package.json will look like this:
-
Create a webpack folder at root/project level and inside that add these 3 config files.
- webpack.common.js
- webpack.config.js
- webpack.dev.js
- webpack.prod.js
-
Create a src folder at root/project level and inside that add these 2 files.
- index.tsx
- index.html
Copy paste below code in index.tsx
import React from "react";
import { createRoot } from "react-dom/client";
const App = () => {
return <div>Hello, React!</div>;
};
const rootElement = document.getElementById("root") as Element;
const root = createRoot(rootElement);
root.render(<App />);
- Copy paste below code in index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
Now lets update the webpack config files.
- webpack.common.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: path.resolve(__dirname, "..", "./src/index.tsx"),
output: {
path: path.resolve(__dirname, "..", "dist"),
filename: "bundle.js",
},
resolve: {
extensions: [".ts", ".tsx", ".js"],
},
module: {
rules: [
{
test: /\.(ts|js)x?$/,
use: "ts-loader",
exclude: /node_modules/,
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "..", "./src/index.html"),
}),
],
devServer: {
static: "./dist",
},
};
- webpack.config.js
const { merge } = require("webpack-merge");
const commonConfig = require("./webpack.common");
module.exports = (envVars) => {
const { env } = envVars;
const envConfig = require(`./webpack.${env}.js`);
const config = merge(commonConfig, envConfig);
return config;
};
- webpack.dev.js
const webpack = require("webpack");
module.exports = {
mode: "development",
devtool: "cheap-module-source-map",
devServer: {
hot: true,
open: true,
},
plugins: [
new webpack.DefinePlugin({
"process.env.name": JSON.stringify("development"),
}),
],
};
- webpack.prod.js
const webpack = require("webpack");
const TerserPlugin = require("terser-webpack-plugin");
module.exports = {
mode: "production",
devtool: false,
plugins: [
new webpack.DefinePlugin({
"process.env.name": JSON.stringify("production"),
}),
],
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
minify: TerserPlugin.uglifyJsMinify,
extractComments: true,
parallel: true,
test: /\.(ts|js)x?$/,
terserOptions: {
compress: {
drop_console: true,
},
output: {
comments: false,
},
},
}),
],
},
};
- Update/replace the scripts section in your package.json file:
"scripts": {
"start": "webpack serve --config webpack/webpack.config.js --env env=dev",
"build": "webpack --config webpack/webpack.config.js --env env=prod"
}
Setup TypeScript
At root/project level add tsconfig.json file and paste below config in it.
{
"compilerOptions": {
"target": "ES6",
"lib": [
"DOM",
"ESNext"
],
"jsx": "react-jsx",
"module": "ESNext",
"moduleResolution": "Node",
"types": ["react", "react-dom", "@types/react", "@types/react-dom"],
"resolveJsonModule": true,
"isolatedModules": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true
}
}
Now your project folder and file structure will look like this:
Run the development server
In terminal/command prompt run below command to run your development server:
npm start
Your React app should now be running at http://localhost:8080.
Set up ESLint and Prettier
- Install ESLint, Prettier, and the necessary plugins:
npm install --save-dev eslint eslint-config-prettier eslint-plugin-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-react
- Create an .eslintrc.json file in the root of your project with the following configuration:
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended",
"prettier"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": [
"react",
"@typescript-eslint",
"prettier"
],
"rules": {
"prettier/prettier": "error"
}
}
- Create a .prettierrc file in the root of your project with the following configuration:
{
"semi": true,
"trailingComma": "all",
"singleQuote": false,
"printWidth": 100,
"tabWidth": 2
}
- Update the scripts section in your package.json file:
"scripts": {
"start": "webpack serve --config webpack/webpack.config.js --env env=dev",
"build": "webpack --config webpack/webpack.config.js --env env=prod",
"lint": "eslint . --ext .ts,.tsx --fix"
}
- Run ESLint to check for any linting issues:
npm run lint
Your final package.json will look like this:
Your final folder structure will look like this:
Conclusion
By following this guide, you now have a production-ready React application setup with Webpack, TypeScript, ESLint and Prettier. This setup provides a solid foundation for building scalable and maintainable React applications with best practices in place.
Remember to keep your dependencies up-to-date and continue learning about these tools to optimize your development workflow further.
Happy coding!❤️
If you found this article useful, please share it with your friends and colleagues!
Read more articles on Dev.To ➡️ Shivam Pawar
Top comments (19)
That's a great step by step guide to get kick start project.
I would add little more details such as adding anchor links to the docs for terms like webpack, ESLint, and Prettier.
Furthermore, also write an additional notes if there is still a better way to achieve similar goal.
Finally, an effective article that helps to dive inn!
Thanks @tarunchakravarthy for the feedback!
Great sharing,But why not just choose a mature scheme like vite?
Thanks, webpack is highly configurable that’s why it is used in large enterprise applications
This is a great template for the newbies starting using react. Great job.
Antonio, CEO at Litlyx
Thanks @litlyx
webpack.prod.js is equal to webpack.dev.js. Wasn't production supposed to be more optimized?
Thanks @lucianodecezare for identifying my mistake. I accidentally pasted same config as dev. Updated webpack.prod.js with more configuration.
please fix tsconfig.js => tsconfig.json
Thanks @viet_ho_398865447b7b14af8 for pointing out this mistake. I updated it.
What advantages of this setup instead of Vite?
Webpack is mainly known / used for large applications bundling with highly configurable things. Vite is emerging to be a better tool but still don’t provide much flexibility. If you want minimum and quick configuration for your app then definitely Vite is a better choice.
same question. @shivampawar
Or:
npm create vite@latest my-react-app -- --template react-ts
Why is this approach better than using preexisting bundlers like vite?
@sunilkhadka001 If you need extensive customization and full control over the bundling process, Webpack's rich plugin ecosystem and configuration options may be more suitable.
For larger codebases with a very large number of files (500+), Webpack may be able to compile the bundle faster than Vite, especially when using newer features like lazy compilation.
thanks but why this when I can do it with vite
it doesn't explain anything on how this optimizes your react app, It just shows us how to install npm packages
Installing npm package is not a big deal.
If you read this article properly then you will see webpack configuration other than just npm installation commands, I used plugins to minify production bundle size. Also, by using eslint you make sure that developer will write quality code.
It takes time and efforts to write a detailed post. So please don’t just directly say that it’s just a npm package installation steps.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.