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 ar...
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
 
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
 
jotatenerife profile image
JuanJo Yanes

great.

Collapse
 
awicone profile image
Vadim Ryabov

12.1 - compilerOptions.ta*R*get 😉

Collapse
 
alekseiberezkin profile image
Aleksei Berezkin

Thx, fixed

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