Very slow to create an app / Size of created directory is huge

[edi9999]

Can you reproduce the problem with latest npm?

Yes, with current npm version of 4.0.3

Description

It is very slow to create a new app, on a decent connection (~800kB/s). Approximately 5 minutes.

I am teaching a course about React in University, and wanted the students to use CRA for easily getting started, however, for 50% of the students, the install time was so slow (more than 30 minutes), that I told them to use codepen instead. I also tried by giving them a USB stick of the created base folder, but it took an enormous amount of time to unzip the folder on their windows machines (30minutes, for > 60000 files apparently).

$ docker run test/cra-app du -hs 'foobaz'
114M    foobaz

The size of the created folder is of 114M, this seems extremely big, couldn't we find a way to make this smaller ?

Expected behavior

The install to be faster / the directory size to be smaller

Actual behavior

The install is slow / the directory size is too big

Environment

Run these commands in the project folder and fill in their results:

1. npm ls react-scripts (if you haven’t ejected):

2. node -v: 4.7.0

3. npm -v: 4.0.3

4. Operating system: Docker argon inside linux

5. Browser and version: NA

Reproducible Demo

You can use this Dockerfile for reproducing :

FROM node:argon
# Create app directory
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
RUN npm install -g npm
# Install app dependencies
RUN npm install -g create-react-app
RUN create-react-app foobaz

If they is no way to reduce the time of download and size of an app for now, do you have an idea of how I could give my students a way to have their base directory when I'm in linux, and they are on windows, without internet connection ?

[gaearon]

Are all of your students using npm >= 3?
There is a known problem with abysmal install times on npm 2.

[gaearon]

The size of the created folder is of 114M

This is the size of the created folder but it is not the same as download size.
I just cleaned the npm cache, ran an install and measured the network usage.

It is about 19 MB for the latest version:

Having done it just once, bandwidth usage for creating a next project is 300 kB thanks to the cache:

So while it is frustrating, asking the students to do this before their first lesson would likely solve the issue.

I understand 19 MB is not tiny, but compare this to the size of Xcode (5 GB). iOS courses seem to get by despite this. It is also 3 times less than Google Chrome (which presumably students also might need for good DevTools).

In my opinion 19 MB is not too much for a whole compiler toolchain with a compiler, a linter, a development server, a test runner, and optimization tools. And you can indeed use CodePen if for one or another reason it is a limiting factor.

But we are aware of the problem and want to make it better: #1239, #1235, #1190, #1183. We’d appreciate feedback and help on the actionable issues here, and we know CRA is far from perfect in this regard.

I hope this helps and is not too disappointing!
I’ll close as the issue is very open-ended, and focusing on specific issues will be more valuable.

[gaearon]

You can also use services like https://c9.io/ which work with Create React App and have reasonable install speeds in my experience.

[edi9999]

Thanks for the quick and full response, I will tell students to use npm version 3 and do it before the next course. Indeed, the issues that you linked to are very revelant and it would be great to see them fixed.

[tirthaguha]

can this be re-opened? On node 8.11.3, npm 5.6.0, Win7, it took 2332s
Creating a new React app in [PATH]\react-marionette-angular.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...

[email protected] postinstall [PATH]\react-marionette-angular\node_modules\uglifyjs-webpack-plugin
node lib/post_install.js

• [email protected]
• [email protected]
• [email protected]
  added 1319 packages in 2332.344s

Success! Created react-marionette-angular at [PATH]\react-marionette-angular
Inside that directory, you can run several commands:

It was much faster in npm 3.x, node 6.11.x win7