DEV Community

Cover image for Setting up React + TypeScript + webpack app from scratch without create-react-app

Setting up React + TypeScript + webpack app from scratch without create-react-app

Aleksei Berezkin on June 14, 2021

Artwork: https://code-art.pictures/ Code on artwork: React JS Why bother if there is create-react-app? Good question! In fact, if you're...
Collapse
 
dantincu profile image
Daniel Tincu •

Great resource!

Just wanted to make a small addition regarding the build script:

"NODE_ENV=production webpack"
Enter fullscreen mode Exit fullscreen mode

On windows, this doesn't work. Replacing it with:

"SET NODE_ENV=production & webpack"
Enter fullscreen mode Exit fullscreen mode

will make it work on windows.

Cheers :)

Collapse
 
alekseiberezkin profile image
Aleksei Berezkin •

Thanks, added a different fragment for Windows

Collapse
 
staylor profile image
Simon Taylor •

@alekseiberezkin awesome article, thankyou!

Collapse
 
martindwyer profile image
Martin Dwyer •

Excellent resource! Thanks for keeping it up to date!

Collapse
 
yoet92 profile image
Yoel Duran •

Great job. congrats

Collapse
 
mrochev92 profile image
Miguel Roche •

@alekseiberezkin is there any chance of changing webpack for esbuild? thanks for the article

Collapse
 
alekseiberezkin profile image
Aleksei Berezkin •

Thx for the suggestion. You are right, esbuild is not more an “emerging” tool but a comprehensive alternative. Unfortunately I can't give any estimate when I'm able to look at it closely because right now I'm not working in frontend fulltime. However if I decide writing about something here, that'd be among the first topics to consider.

Collapse
 
alekseiberezkin profile image
Aleksei Berezkin •

Hi, I've added the chapter 6.1. about using esbuild-loader in the existing webpack setup. I believe it's the best compromise between esbuild speed and webpack maturity.

Collapse
 
awicone profile image
Vadim Ryabov •

12.1 - compilerOptions.ta*R*get 😉

Collapse
 
alekseiberezkin profile image
Aleksei Berezkin •

Thx, fixed

Collapse
 
jotatenerife profile image
JuanJo Yanes •

great.

Collapse
 
9812598 profile image
Aleksandr Kobelev • • Edited

Please add

meta name="viewport" content="width=device-width, initial-scale=1"
to index.html

I spent a lot of time trying to understand why 'min-width' doesn’t work for me.

Collapse
 
alekseiberezkin profile image
Aleksei Berezkin •

Thanks for the suggestion, added to section 8

Collapse
 
vishalraj82 profile image
Vishal Raj •

@alekseiberezkin Thank you for the article. Will definitely try this. Meanwhile, I have a similar article, that you might like - React from scratch

Collapse
 
alekseiberezkin profile image
Aleksei Berezkin •

Thanks for your link. Will keep it in mind if I need Babel.

Collapse
 
ivangsp profile image
Ivan gsp •

Thanks @alekseiberezkin for the tutorial, it was really helpful but I think you missed to add@types/react and @types/react-dom

Collapse
 
alekseiberezkin profile image
Aleksei Berezkin •

Thank you so much, updated the post