Create-react-app: Offline mode

[gaearon]

npm wizards, we need your help!

Per @pselle’s suggestion, we should try to find a way to make create-react-app work offline.

I’m not well versed in npm flags and likely won’t have time for this, so this is a perfect opportunity for you to contribute and significantly improve the user experience of Create React App.

Here is the behavior we’re looking for:

• Existing requirement: create-react-app my-app should use the most recent version of react-scripts if you are online. We are not changing this: we always want the users to get the most recent one.
• New requirement: create-react-app my-app should not crash offline if you ran it at least once before. It should be able to use locally cached react-scripts in this case, if it exists.
• Bonus: create-react-app my-app should use cached react-scripts if it knows the latest npm version _is_ cached locally. In other words, even if you _are_ online, we shouldn’t just refetch the whole thing if we have it locally and we know it _is_ the latest version. This is not required but would make a big difference for most people.
• Acceptable tradeoff: we are fine with _not_ installing the latest transitive dependencies. In other words it’s fine if react-scripts depends on [email protected], then [email protected] comes out, but we keep using the cached [email protected].

How to achieve this? I have no idea.

Maybe this would be helpful: https://addyosmani.com/blog/using-npm-offline/.

We already use bundledDependencies (which is a bit unusual) as part of our build process so in reality react-scripts is being downloaded as a single tarball rather than through the usual npm process. Perhaps this can give us the leverage to make this better (e.g. by caching that tarball somehow).

[apaleslimghost]

I'm not sure how this fits with bundledDependencies but in npm >= 3.9 --cache-min=999999999 is pretty much exactly what you're looking for https://github.com/npm/npm/releases/tag/v3.9.0

[gaearon]

I’m concerned about issues like this: https://github.com/npm/npm/issues/8581. If the solution involves --cache-min, and --cache-min causes weird crashes in some conditions, we must:

1. Understand why this happens and whether our users will be affected by this
2. Be resistant to such failures (e.g. by retrying npm install without that flag if it fails)

If you know how to handle these points, I’m happy to review a PR explaining your thought process.

[apaleslimghost]

I believe that issue is exactly what 3.9 fixes. You could detect npm version and avoid the flag if running older than 3.9? I'd be happy to do a pr, is this the right call to modify?

[gaearon]

Yes, this is the right call. What you suggest seems reasonable, please go for it!

It would also help if you could help me understand how to reproduce exactly that issue in < 3.9 so we can verify 3.9 indeed fixes it in our case.

[apaleslimghost]

To reproduce you need a package a that depends on b@^1.1.0, where a is _not_ in the cache, and [email protected] _is_ in the cache but [email protected] _is not_. Then try to install a with ---cache-min=99999999. Instead of downloading the new version of b, npm will only try versions from the cache, and fail because there is no compatible version.

(Hope that helps, it's not a trivial issue...)

[gaearon]

Yeah, I meant this in the context of react-scripts.

If you submitted a PR, I’d appreciate step-by-step instructions to reproduce this exact issue with react-scripts just so I can verify that it was broken before 3.9 but fixed in it.

[apaleslimghost]

Oh, right, sorry. The user would have to have an old version of one of the dependencies of react-scripts in cache but not react-scripts itself. So if they had e.g. [email protected] in cache and tried to run npm install --cache-min=Infinity react-scripts (which depends on [email protected]) it would hit the issue.

[gaearon]

Thanks for explanation! I’ll try reproing that if you submit a PR. 😉

[apaleslimghost]

Just double checking I'm editing global-cli/index.js? That's a pretty scary warning 😉

[gaearon]

Yea, it’s meant to prevent accidental breaking changes since people almost never have to update the CLI, and since old CLIs must always work with new react-scripts even after breaking changes in react-scripts. Your change is safe tho.

[gafemoyano]

Did anyone get to this issue? Does create-react-app work properly offline?

[gaearon]

No but if you pick up https://github.com/facebookincubator/create-react-app/pull/375 and make it pass Travis, it could be in next version :-)

[gafemoyano]

I could give it a try, seems like the other guy has been busy. Is it a matter of making travis tests pass? Does this commit meet all the functional requirements?

[gaearon]

I don’t think it meets https://github.com/facebookincubator/create-react-app/pull/375#issuecomment-237909277.

[lukyth]

Are you doing this, @gafemoyano? If not, I'd like to try to resolve this as well.

[gaearon]

We might have another solution to this soon.

[gafemoyano]

Sorry I haven't been able to figure it out cause... well I don't have reliable internet access. For now I've just been keeping a clean project generated with the latest version and copy/pastying it when I need to start a new app. I know it's not really a solution to this, but it's good enough considering that upgrading between CRA versions hasn't been difficult at all.

[gaearon]

Okay, check it out.
We should integrate with Yarn if it exists in the system:

https://github.com/yarnpkg/yarn
https://yarnpkg.com/
https://code.facebook.com/posts/1840075619545360

It supports offline mode.

[gafemoyano]

Oh wow this came out literally 45 minutes ago, congrats!!
So will yarn be bundled with CRA? What happens if Yarn isn't in the system, should we still try to use npm's cache?

[gaearon]

Yarn won't be bundled with CRA. We should change the CLI to detect if Yarn is present. If it is, we should install with Yarn, and offline mode will "just work". If not, we'll fall back to npm with current behavior.

[gafemoyano]

Cool, I'll read up about Yarn and report back if I can handle the integration, unless @lukyth wants to get started right away.

[lukyth]

@gafemoyano It's fine. I just thought if you didn't want to do this anymore, I'd love to give it a try as well. 😄

[gaearon]

Please comment in https://github.com/facebookincubator/create-react-app/issues/896 if you work on this.

[chiptus]

yarn supports offline mode only when the flag --offline is added, so we need to check if yarn failed and if it did, install with the flag. Probably should check the error to see exactly what failed.

[chiptus]

Not sure what the status on this or on #896,i would love to work on this if possible

[Timer]

@chiptus since that issue is closed, I believe any discussion can be held here. Just please post a comment in #896 that you want to work on this and link back to this issue. We love contributions!

I would make sure that https://github.com/facebookincubator/create-react-app/pull/1423 isn't already doing what this goes to accomplish; you can try to coordinate with @voxsim.

[chiptus]

@Timer it seems like #1423 is exactly this. I guess I will look for another issue to contribute to :)

[gaearon]

Yea, https://github.com/facebookincubator/create-react-app/pull/1423 just fixed this!
Will be out in the next version which we plan to publish today.