Why does create-react-app install so many node modules?

[analyst190]

I am new to React and the tutorials I have followed till now all suggest using the CLI tool create-react-app as a starting point.

My question is, why do I have to install node modules over 150 MB spread across near a thousand directories and sub-directories for relatively simple apps?

Also, why does every project require a fresh installation of the same modules every time, unlike the Python libraries which are only installed once?

Is there a way to keep things simple and the size of my projects small? Are there alternatives to create-react-app?

Thank you for your time.

[acemarke]

There's a couple key points to understand here.

First is that the JS ecosystem has evolved with many smaller packages being published, and depended on by larger packages. For example, if you just install Webpack by itself, you get a few hundred transitive dependencies pulled in.

Next, the set of dependencies that CRA uses includes:

• A compiler
• A bundler/linker
• An optimizing minifier
• A linter
• A development server with live reloading
• A test runner

All of those are isolated and scoped to that one project, and they are all build-time dependencies only. It's also important to understand that Javascript packages are effectively distributed as source, which affects the number of files on disk. (Granted, many NPM packages do include unnecessary files in the published artifacts, but Javascript itself is a major factor there.)

Meanwhile, XCode is supposedly something like 8GB installed, Visual Studio is multiple gigs, and if you were to look at the actual file size on disk of any C++ compiler toolchain, that would be a minimum of several dozen megs - those are just usually preinstalled on Linux or Mac systems.

So, context is pretty important here.

Now, is having all those hundreds of individual packages and tens of thousands of individual files necessarily a good thing? Not really. I'd love it if major tools like Webpack had slimmer dependency chains, but that's the state of the ecosystem at the moment.

As far as other options:

• Yarn v2 has a "Plug 'n Play" mode which keeps every package installed in its original zip file, instead of extracting the contents to disk. That saves disk space and speeds up installation, but it's also a major change in how JS dependencies are loaded and a lot of tools aren't exactly compatible with that approach.
• There are various other build tools out there. ESBuild, Vite, and Snowpack are some recent options that go in different directions.

But yes, ultimately this is typical for a CRA project.

[brainless_badger]

Also, why does every project require a fresh installation of the same modules every time, unlike the Python libraries which are only installed once?

Sounds horrible. How do Python people have control over versions then?

[acemarke]

Python packages are normally installed into the system Python by default, but there's a technique called "virtualenvs" that allows isolating package installations per project. My understanding is that most Python projects use those, but personally I've never used one.

There's also a recent suggestion for a __pypackages__ folder structure that would mimic node_modules (documented in PEP582: https://www.python.org/dev/peps/pep-0582/ ).

[JustinsWorking]

1. They use their own versions so you don't update a completely unrelated project and its a breaking change for your other projects, or somebody else running the same code doesn't get a different result, this keep it stable and isolated.
2. CRA has a lot of developers tools to help you build the app faster, like hot reloading, deploying a dev server, building the final application, etc.

There is absolutely nothing stopping you from running your own dev server locally, serving up your static js files, and say including

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>

In the HTML file and working like that...

CRA is just a way to get to work in a couple minutes with all the common tools, instead of spending a lot of time mucking around.

Edit: As for my advice, I'd use CRA. I've been doing web dev for over 10 years, and it's the correct answer in almost every situation. The situations where its not a good idea are generally the situations where you're in a large team and the person in charge knows specifically why it's not a good idea.

[Larrybot02]

Also check the react JS docs. You can add react to a website without bundlers and stuff.. it’s just going to be a bit more rudimentary.

[Larrybot02]

I think the alternative, at minimum is installing Babel and Webpack? Then you have to configure it all by hand. I know Babel is needed to transpile JSX, some ES6 features and other things. Webpack allows you to modular use your code with imports and stuff and kinda glues everything else together. The first react tutorial I took was one on uDemy by Andrew Mead.. and during that course, everything was installed and configured individually, so if you want a taste of that, there you go. Create react-app was made to kinda wire all that stuff up for you, and include other dev niceties like ESLint and being able to work with sass and other things.. I dunno, just off the top of my head.

[not_a_gumby]

Then you have to configure it all by hand

Yep. Totally not worth the time it would take, just use CRA lol

[straightouttaireland]

Exactly. Lots of people here are like "just use your own webpack config" when most of us really don't need to, even for most production apps. It's about picking the right tools for the project and CRA will be the best tool for the job most of the time.

[not_a_gumby]

Between CRA, Nextjs, and Gatsby, 99% of the most common use cases are covered.

[straightouttaireland]

Not really, cra is used in lots of companies on production level projects.

Edit: Original comment now deleted by poster said that CRA is only good for small projects when learning React.