DEV Community

Discussion on: Don't use create-react-app: How you can set up your own reactjs boilerplate.

Collapse
 
nikhilkumaran profile image
Nikhil Kumaran S

Yes - IMO. Look at this way. These are the advs of CRA

  • Only one build dependency react-scripts - Easy to upgrade
  • Because of point 1, fewer things to learn - Concentrate on React alone.
  • Get started with a single command.

Because of the first two points, we are sacrificing two things

  • Difficult to add custom build configs based on your requirement - You can eject but it takes out the first 2 advs.
  • Abstracts everything. - As a dev, I'd like to have control over what's happening in my app and configure app as per my need.

So we cannot incorporate the first two advs, so "The only advantage that we can take from CRA is Get started with a single command".

In the rest of the article, I wrote a step by step guide to add your own reactjs setup with webpack and babel. And finally implemented the "Single command" to bootstrap react app advantage using JS executable file and bin property.

If there is any other advantage of CRA, please share. Let's discuss how to implement them.

Collapse
 
c0dezer019 profile image
Brian Blankenship

The problem with react-scripts is that react-scripts uses an older, out of date webpack. If you want to use the newest version, the app would fail to render using react-scripts to run the project. React-scripts forces you to use 4.44.2, whereas the newest version of Webpack is 5.38.1. To me, that's enough of a jump to be considered a huge negative if you want to use webpack.

As always, you can install react-scripts on your own. The advantage I see to using this custom setup is that one, you don't have unused dependencies bloating your project. Using CRA, my boilerplate redux-typescript-mocha setup was 1.17 GB in size. without CRA's bloating, that size shrunk to 839. That's 331 MB less in size. react-scripts alone adds an additional 120~ mb.

So, I can get behind setting up my own projects instead of using CRA. if you need a template, you could always use CRA and then delete what you don't need afterwords.

Thread Thread
 
nikhilkumaran profile image
Nikhil Kumaran S

Awesome, Brian. I would love to checkout your redux-typescript-mocha setup. Can you share the link to the repo, if it's open source?

Thread Thread
 
c0dezer019 profile image
Brian Blankenship

Sure, github.com/c0dezer019/Stormcaster/... It's in the client folder.

Thread Thread
 
nikhilkumaran profile image
Nikhil Kumaran S

Cool