DEV Community

Cover image for Optimizing Your React App: A Guide to Production-Ready Setup with Webpack, TypeScript, ESLint, and Prettier - 2024

Optimizing Your React App: A Guide to Production-Ready Setup with Webpack, TypeScript, ESLint, and Prettier - 2024

Shivam Pawar on June 30, 2024

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/shiv...
Collapse
 
tarunchakravarthy profile image
Tarun Duggempudi

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!

Collapse
 
shivampawar profile image
Shivam Pawar

Thanks @tarunchakravarthy for the feedback!

Collapse
 
flyingcrp profile image
flyingCrp

Great sharing,But why not just choose a mature scheme like vite?

Collapse
 
shivampawar profile image
Shivam Pawar

Thanks, webpack is highly configurable that’s why it is used in large enterprise applications

Collapse
 
jarlef profile image
JarleF

So is vite. Vite has loads of options and builds on top of esbuild and rollup. Webpack is requires alot of configuration to do simple stuff.

Collapse
 
litlyx profile image
Antonio | CEO at Litlyx.com

This is a great template for the newbies starting using react. Great job.

Antonio, CEO at Litlyx

Collapse
 
shivampawar profile image
Shivam Pawar

Thanks @litlyx

Collapse
 
sandeep_kamra_db541a51c0f profile image
Sandeep Kamra

Your code may work well, but I do not know much about most of the packages, especially their configuration. However, you must describe the packages and their working in the end so interested users can read them.

Collapse
 
xoulrage profile image
Xoul Rage

thanks but why this when I can do it with vite

Collapse
 
shivampawar profile image
Shivam Pawar

@xoulrage 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.

Collapse
 
jarlef profile image
JarleF

That statement is just false. We converted large solutions from webpack to Vite. Vite is faster in both development mode (20x faster) and 2-3x for production build

Collapse
 
viet_ho_398865447b7b14af8 profile image
Viet Ho

please fix tsconfig.js => tsconfig.json

Collapse
 
shivampawar profile image
Shivam Pawar

Thanks @viet_ho_398865447b7b14af8 for pointing out this mistake. I updated it.

Collapse
 
lucianodecezare profile image
Luciano de Cezare

webpack.prod.js is equal to webpack.dev.js. Wasn't production supposed to be more optimized?

Collapse
 
shivampawar profile image
Shivam Pawar

Thanks @lucianodecezare for identifying my mistake. I accidentally pasted same config as dev. Updated webpack.prod.js with more configuration.

Collapse
 
brense profile image
Rense Bakker

Or: npm create vite@latest my-react-app -- --template react-ts

Collapse
 
6qat profile image
Guilherme Ceschiatti B. Moreira

What advantages of this setup instead of Vite?

Collapse
 
shivampawar profile image
Shivam Pawar

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.

Collapse
 
mikhacavin profile image
Mikha Cavin

same question. @shivampawar

Collapse
 
sunilkhadka001 profile image
Sunil khadka

Why is this approach better than using preexisting bundlers like vite?

Collapse
 
shivampawar profile image
Shivam Pawar

@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.

Collapse
 
brense profile image
Rense Bakker • Edited

I have not seen any such benchmark where vite performs worse than webpack, whats your source for this claim?

github.com/farm-fe/performance-com... this open source benchmark indicates a huge performance difference between vite and webpack and even the authors of webpack itself have indicated there is no future for webpack because it cannot do what modern bundlers can...

Vite also has a much better plugin ecosystem than webpack...

Thread Thread
 
shivampawar profile image
Shivam Pawar

This article is especially written for webpack config for react app.

Source from where I got info:
betterprogramming.pub/is-vite-real...

In this article you can see another benchmark also where they compared with large files also.

Thread Thread
 
shivampawar profile image
Shivam Pawar

Btw, I’m not against Vite. Keep this article specific to webpack only. This article is not for comparison between Vite and Webpack.

Collapse
 
noventiq_ec1f19591313ed61 profile image
Noventiq • Edited

Webpack React TypeScript Micro frontend project.
I am getting error when trying to run command: npm run lint

mcmp-supportportal-ui@1.0.0 lint
eslint --ext=.ts,.tsx --fix

Invalid option '--ext' - perhaps you meant '-c'?
You're using eslint.config.js, some command line flags are no longer available. Please see eslint.org/docs/latest/use/command... for details.

Collapse
 
kali_123 profile image
kali deb • Edited

it doesn't explain anything on how this optimizes your react app, It just shows us how to install npm packages

Collapse
 
shivampawar profile image
Shivam Pawar

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.