Document maintaining a fork of react-scripts as an alternative to ejecting

[gaearon]

It is not common knowledge that you can fork react-scripts, publish your fork, and then do create-react-app my-app --scripts-version my-react-scripts-fork.

This can be useful for customized setups, especially if you want to merge upstream updates once in a while. And with something like https://github.com/1egoman/backstroke, it might not even be painful!

We should document this. Help welcome!

[thangngoc89]

I tried this before. (0.2 maybe). But the global cli doesn't install the custom script. Was it fix?

[sloanelybutsurely]

We are going to be forking react-scripts and attempting to move our build process over to it @trunkclub. I'll talk to the team but I think we could write documentation as we go through the process.

[gaearon]

But the global cli doesn't install the custom script. Was it fix?

There was a bug but should be fine with 0.4.3.

[leftdevel]

This is supper awesome (...if I understood correctly), Thank you! I'm loving create-react-app, but in the current state it felt like you either embrace it as it is (minimal), or move away. And "Eject" makes you feel like you're being ungrateful with the maintainers.

Now with this approach, and in my company, I can be the one maintaining the custom scripts while still keeping my teammates away from the struggle of battling configuration files.

For instance, I'd just add less-css support, and still benefit from the core create-react-app features and updates.

[kirkaustin]

I just run a short custom script after create-react-app does its thing so that I can support CSSModules. All it does is alter two lines in the webpack config scripts (css loader delacarations).

Seemed like overkill to fork and publish, but maybe that's the way to go?

[thangngoc89]

@kirkaustin you don't need to publish it. You can install it directly from github

[kirkaustin]

@thangngoc89 Not sure I understand. At my company we have an enterprise GitHub account. Are you suggesting that I can have my fork pulled from there?

[thangngoc89]

You're using npm to install dependencies right? You can do this npm install git+ssh://[email protected]/your-company/react-scripts-fork . You don't need to publish the scripts to npm and then install it.

[kirkaustin]

Great, thanks!

[dpoineau]

Just curious if anyone has gotten a forked version of react-scripts via direct-from-github npm install working with the most recent create-react-app repository code? @thangngoc89

With the switch by create-react-app to using lerna and as a result react-scripts moving into the packages/react-scripts subdirectory, it doesn't seem possible to install a forked react-scripts directly from github any longer (since npm cannot install from a github repo subdirectory), or am I missing something?

Previously forking the entire repo (and referencing via github url) worked because react-scripts was the package specified in the repo's root package.json, but that's no longer the case it seems.

So is publishing a custom npm package then the only way to take advantage of this approach?

[dpoineau]

So for now I went down the path of using a custom published npm package (like react-scripts-custom-whatever), but it still seems like there's at least one issue that prevents this from working which is that the react-scripts package name is hardcoded in at least one spot, which won't work if you're using a custom forked package: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/scripts/init.js#L17

The end result for me is that create-react-app fails at executing the init script. Has anyone been successful with this approach with the most recent version of react-scripts (0.4.3), and I'm just doing something wrong?

Edit: after looking at how e2e.sh runs its --scripts-version react-scripts-fork test successfully, it looks like the solution used in that fork was to just change the hardcoded package name in the line I referenced above in the fork to be the forked package name.

Last edit: Here are all the steps I used to get a custom fork working in case anyone else gets as stuck as I did 😃

1. Forked the create-react-app repo and cloned it locally
2. Changed the package name in packages/react-scripts/package.json to be a new custom name
3. Changed the 'react-scripts' reference in packages/react-scripts/scripts/init.js#L17 to match the new package name I chose
4. Then I did a cd packages/react-scripts followed by an npm publish which published successfully
5. Which then resulted in create-react-app test-app --scripts-version react-scripts-my-custom-package working as expected

[gaearon]

it still seems like there's at least one issue that prevents this from working which is that the react-scripts package name is hardcoded in at least one spot, which won't work if you're using a custom forked package: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/scripts/init.js#L17

PR to fix this would be welcome. 😉

[ForbesLindesay]

I'm actually in favour of (maybe) just telling people to fork the entire monorepo and publish create-whatever-app and whatever-scripts. It would be good if you didn't have to change react-scripts and create-react-app strings in 100 places as your first change though. I would suggest putting both of these strings in some kind of names.js package in each project. That way there would be just two places it would need changing.

I wonder if we should suggest people use code to generate their fork, rather than forking by hand. e.g. they could write code like overwrite webpack.config.js with this file. That way updating the fork would just mean re-running the code to generate the fork against the latest version of create-react-app.

Alternatively, should we just encourage people to hard-fork once create-react-app is sufficiently stable?

[tonyxiao]

@kirkaustin exactly what I need as well. Will give that option a try.

[gaearon]

The end result for me is that create-react-app fails at executing the init script.

This was fixed in 0.5.1, I removed hardcoded project name.

[kasperpeulen]

I want to make a fork for react chrome extensions.

@gaearon You say that you can fork react-scripts. But react-scripts is not a git repo. Is the idea that I just copy the code of react-scripts in a new git repo and publish that to github?

[gaearon]

You can fork the whole repo but publish and change that single package.

[kitze]

Anyone has an idea why this forked version doesn't work?

I'm getting the same error as @dpoineau. When I'm changing the npm script in the package.json from "start": "custom-react-scripts start", to "start": "react-scripts start" then it works.

Probably it's a silly 1 line fix that I'm missing somewhere.

EDIT: i fixed this by renaming ./bin/react-scripts to ./bin/custom-react-scripts and also changed it in package.json

"bin": {
    "custom-react-scripts": "./bin/custom-react-scripts.js"
}

🎉

[clessg]

Tip to anybody using npm link in development to make changes to their react-scripts fork take effect immediately: comment out these lines. Otherwise, changes in your app won't be seen.

[gaearon]

@clessg Ideally we wouldn’t have to do this. Do you have an alternative solution? We could completely get rid of remove-on-publish and only leave remove-on-eject. Let me file an issue.

[shubheksha]

I just tried to summarize everything on this topic here:

Tweaking Configuration for React Scripts in Create React App.

Hope this helps!

[kitze]

Thanks @shubheksha !

I also just published an article on this topic.

Configure create-react-app without ejecting ⏏

[thien-do]

thank you all, I successfully created a fork of react-scripts and everything works! After all, now, it turns out to be very easy than I thought. Are anyone working to add this to document? @zperrault

[sunnyvempati]

@zperrault quick follow up to your comment here: #682 (comment)

Is the solution to run npm publish within the react-scripts folder? Or is there a different way you went about accomplishing the publish?

[urimlmd]

@gaearon
I want to create a common infrastructure for several live products of the same company. This infrastructure is supposed to be opinionated and contain common APIs, configurations and UI components based on our style guide.
Currently each one of the products has it's own different frontend infrastructure, and the company would like to create a standard for new products in the first stage, and in the next stage, replace existing components with the component pool from the new infrastructure.

After reading a lot of resources regarding CRA, I understand that if there is a good way to achieve it with React, it is probably forking the repository and keep merging it with the stable branch
as described in https://auth0.com/blog/how-to-configure-create-react-app/

In general, I want to enjoy the goodies that CRA has to offer and get updates for free, but in addition, I would like to impose usage of some additional "flavors" that all teams will use.

One method I thought about is to fork the repository as described, run create-react-app, and then add some common components and utilities of our company.
Each new product will be basically a clone of this repository and additional changes will be added for it's own requirements. We will frequently update the core (and the existing products) as react-scripts gets updated.

Looking at above I still cannot answer a number of questions:

1. Do you think create-react-app will fit our requirements?
2. If the answer is positive, is it a good idea to create such a common infrastructure in the first place? Wouldn't it be better if we will create a new project each time with create-react-app, and just add common modules using npm install?
3. Can you name some of the disadvantages of the methods stated in (2)?

Thanks.

[uqee]

Have a look at my relevant article on Medium. Hope it helps as a starting point.

[romaindso]

@Timer @viankakrisna

yes after 0.10 we'll probably merge breaking changes into next, and leave master as current working-tree for released versions

Can we have an update on this ? It seems that master still receive day to day udpdates.
The question behind is which source branch have to be used for maintaining a react-scripts fork ? (for now i'm still on the 0.9.x branch)

[Timer]

@romaindso we no longer will perform major react-scripts breakages on master, but this doesn't mean we won't update things daily on master. It should be safe to use again.

tl;dr maintain your fork off master.

[jimthedev]

@g3r4n did you every get it working? I am getting this error:

Error: Cannot find module 'react-dev-utils/browserHelper'

when trying to use the alpha for 2.0.0.

[cliff76]

Is this still a viable solution/alternative to eject? How would I add a fork of react-scripts to an existing project created with CRA? The command line doesn't seem to update/overwrite configs in an existing project. Also, when starting anew I'm also getting Error: Cannot find module 'react-dev-utils/browsersHelper

[jimthedev]

I got it working. I had to publish forks of each package and had to update all internal references to point at my packages. It’s a pain but I’m just maintaining it until 2.0 drops officially. Unfortunately it has enough custom parts I cannot publish publicly but could contribute to your fork if you have a place you want to work out of.

[cliff76]

Ouch! I see. Is there any way to update an existing project with a fork? We just started a project a couple of weeks ago via CRA and I need to make the smallest tweak to the webpack configs. I feel like I'm firing up a 747 just to visit my next door neighbor with this approach but I'm doing what I can to make things run.

[cliff76]

Also, does each fork need to have its package name updated to be different from the official repo?

[jimthedev]

What about https://github.com/timarney/react-app-rewired?

…

On September 13, 2018 at 6:40:12 PM, Clifton ***@***.***) wrote: Ouch! I see. Is there any way to update an existing project with a fork? We just started a project a couple of weeks ago via CRA and I need to make the smallest tweak to the webpack configs. I feel like I'm firing up a 747 just to visit my next door neighbor with this approach but I'm doing what I can to make things run. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#682 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAGpirawJ9ArTtGkjtVzGbH8_zZ3aEBWks5uauzcgaJpZM4KAY6J> .

[cliff76]

I saw this earlier and lost the link! Does it actually work? I'll have to give it a shot. Thanks!

[cliff76]

By the way, that works like a charm, thanks!

[cweekly]

What about https://github.com/timarney/react-app-rewired?

I agree react-app-rewired was a great solution before CRA2. But CRA2 uses webpack 4, which breaks most plugins. Also its maintainer is apparently retiring[1], so this remains a thorny problem.

1. 2.0 Discussion timarney/react-app-rewired#162

[ubbcou]

It seems that I have some trouble.
I forked thie repo and now its address is https://github.com/ubbcou/create-react-app。The directory of react-scripts is /packages/react-scripts。
I want to use customized react-scripts (without publish in npm), but how can I install /packages/react-scripts ?
I only know that npm can install a repository like this: npm install --save https://github.com/ubbcou/create-react-app, and it can't do like this npm install --save https://github.com/ubbcou/create-react-app/packages/react-scripts.
what should I do???

[uqee]

@ubbcou publish it as a scoped package, like @ubbcou/react-scripts

[ubbcou]

@ubbcou 将它作为一个范围包发布，就像@ubbcou/react-scripts

@uqee
Thank you :)
So.... if I have two or more different configurations, I should publish multiple @ubbcou/react-scripts-whatever ?

[hisapy]

I tried to use a fork of react-scripts with yarn link but yarn build outputs to node_modules/create-react-app/build instead of MY_CURRENT_PROJECT/build. Are there any known problems that prevent using react-scripts from yarn link?

[hisapy]

Well, after diving into the code, I noticed that there paths.js module that exports different path values based on some assumptions, one of them being published, for which it tries to evaluate if the app's node_modules contains the react-scripts package, but apparently this doesn't work with symlinks created with yarn link.

So what I've done to avoid publishing to npm each time I wanted to try something in my app, was to install my custom react-scripts from my file system with the following command:

yarn add file:/Users/hisa/workspace/create-react-app/packages/react-scripts/

This works, but the downside is that you have to run the command each time you make a modification of the your custom react-scripts. It would be awesome if we could use yarn link instead.