Newbie questions about create-react-app

I’ve just started playing with building react apps outside of CodePen using webpack, npm, babel, etc. Havn’t had much luck creating from scratch, so turned to create-react-app. I got this working, but have a few questions:

  1. The dependency tree in the node_modules directory created by create-react-app is huge. Is there some way to minimize this? create-react-tiny-app?

  2. After building the default app, I right-clicked on the index.html in the build directory and loaded it with Chrome. Didn’t work (blank page). All links to other assets in index.html are all absolute (start with C:). Shouldn’t these links all be relative to index.html? If I deploy this app on github, it will be in a subdirectory off the root, not sure where.

I fixed(?) this by adding

homepage: ‘.’

to package.json. I know the contents of the build directory are meant to be used with a web-server tool included by create-react-app, but I don’t want absolute links in the build. Or do I?

Thanks

Create-react-app isn’t a react app itself, it’s basically a development server with everything pre-configured for you. You need to ‘npm start’ it once you’ve made it. All of those node modules are to make this happen, they won’t end up in your app when you make a production build (with ‘npm run build’).

The instructions for making it work on github pages are… somewhere :slight_smile: I know they are but I can’t find them right now. I know that you need to set: ‘“homepage” : “http://myname.github.io/myapp”’. I made my own notes here if they’re any help: https://www.didaxy.com/let-s-learn-react-part-1

You should be able to visit your app once you deploy it. To visit the app in the build directory locally, you have to install the serve package, then run it on the build directory. https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment

The dependency tree in the node_modules directory created by create-react-app is huge.

That really is the main problem i have with create-react-app , and why I never use it, too many dependencies that I have no clue of what they are doing, it does have options for customization but I have never messed with it.
However, I understand why create-react-app is very popular, it allows users from having to specify which dependencies they need and pre-packages an entire project , but really, to start a small react project you really don’t need that many dependencies. I personally prefer to add the dependencies in my package.json file on a need by need basis as the project matures. And webpack configuration stays pretty much static once you find your sweet spot.
But, to each his own, just thought I would drop my 2c.

2 Likes

The fact it comes with the kitchen sink is an issue, but this is standard for Node. The convention is lots of tiny modules that each do one single thing. So React itself, for example, has 87 dependencies. Each of those also has dependencies. If you use Yarn, it will flatten the dependency trees pretty effectively (NPM is getting there, but still can’t do this as well as Yarn can).

It can cause issues due to the amount of magic, but if you just install React + dependencies yourself, the tree will expand pretty quickly.

Hi @DanCouper , what about the size though ? I just installed a generic empty app with create-react-app and the node_modules folder is 144MB, I look at all the full stack projects that I did here (which all use react but without create-react-app) and while they have significantly more dependencies than the generic app, the node_modules folders are between 50-70 MB (only one is 70 MB actually the rest are ~50).
I am just not sure what more added benefit I get for 3X more size, but again I don’t really know what all it (create-react-app) installs so there maybe some critical stuff in there that I am missing.
I have never tried yarn to reduce the size, I’ll test that later, but presumably that will reduce the size on a regular project setup too right?

Yeah, but you don’t get all the bells and whistles you get with create-react-app with those installs; backend packages are normall smaller, they need to do less, then you’re installing the minimum stuff needed for frontend. This means CRA is bloated, there is a lot of magic, and there is the issue that is something goes wrong, it can be difficult to debug. But it is widely used, something doesn’t go wrong that often, so fair exchange until there’s something better for frontend I guess /shrug. It seems pretty solid.

  • Webpack development server with watch & hot module reloading, optimised for React (ie allows CSS/Image/Font imports directly into components etc).
  • Server allows for proxying, so you can run it against an API on the same network (avoids CORS issues).
  • Always builds a progressive web app (ie builds the config for a service worker from the assets).
  • Test framework (Jest) + complete React integration working out of the box.
  • Already set up for Flow integration.
  • Full in-browser error overlay to aid in debugging.
  • All necessary Babel setup + transpiling of additional syntax changes at proposal stage that are relevant to React (object spread syntax + class property initializers + dynamic imports)
  • Githooks support built in
  • Builds fully production-ready aplications, all optimizations are included

You can install all of the things you need yourself and do it manually, but by using CRA you get everything you’re theoretically likely to need to quickly build an app. Note everything is a dev dependency, so the size is pretty much irrelevant to the end result.

re Yarn, it won’t necessarily reduce the size, it’s just generally much faster and can attempt to flatten/deduplicate packages (eg you have a dependency, then you have another package as a dependency which also has the first package as a dependency, or you have two of the same packages with slightly different version numbers).

1 Like

I once tried to delete one of my failed attempts to make a react project build from scratch, and yeah, it was over 150MB (without using CRA). Even if Yarn can reduce this by 50%, it would still be 75MB. That’s nuts.

I noticed each of the modules has its own read_me and license and some other text files. Getting rid of these alone would probably save a lot of space. This should be an option (install only what is needed to build). If a developer needs these extra files, they can always get them from github or the module developer.

1 Like

The size of the node_modules folder doesn’t matter though. What really matters is the size of the bundle.js (or it’s equivalent) that is travelling down the wire in the browser.

One of my heftier create-react-app projects has a final compressed js file size of 166.89 KB - that’s with a node_modules folder of 119MB!

Yeah, @DanCouper also alluded to that. It still bothers me that I have to download a bunch of stuff that I don’t need when I develop locally, but I can see where those extra files may come in handy for a big full-blown project.

I think the biggest offender in the c-r-a is the whole service worker set up…most apps probably don’t need service workers, so having on in the box is a bit silly.

That said, the build scripts perform tree shaking, so it doesn’t get included, I think…

I did mention it above but I think it’s important to realise that ‘create-react-app’ isn’t a React app, it’s a development environment for making them. The Node modules include everything you need to make Webpack and the live-reloading server work - as @JacksonBates said, the emitted bundle is what matters and it it’s no bigger than it would be if you made the same React app ‘by hand’, except for the service worker stuff, if you leave that in. If you follow the tutorial in the React docs, the first thing they show you is how to delete everything in the ‘src’ folder and start from scratch.

Bit of a derail, but regarding the size of node_modules, this is not ready (yet), but it should be dropping very soon, have a read of the article introducing it because it looks very good: https://medium.com/@ericsimons/introducing-turbo-5x-faster-than-yarn-npm-and-runs-natively-in-browser-cc2c39715403.

If you have a play around with the online version of VSCode Turbo was built for you can see how ridiculously quickly it installs dependencies, due to it only getting the specific files that are needed.