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

gaearon · 2016-09-19T11:36:36Z

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!

The text was updated successfully, but these errors were encountered:

thangngoc89 · 2016-09-19T11:51:01Z

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

sloanelybutsurely · 2016-09-19T12:07:44Z

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 · 2016-09-19T12:15:05Z

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 · 2016-09-19T15:55:53Z

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 · 2016-09-19T16:07:27Z

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 · 2016-09-19T16:11:30Z

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

kirkaustin · 2016-09-19T16:19:53Z

@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 · 2016-09-19T16:30:40Z

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 · 2016-09-19T16:40:09Z

Great, thanks!

dpoineau · 2016-09-21T00:02:04Z

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 · 2016-09-22T00:31:31Z

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 😃

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

gaearon · 2016-09-22T13:40:48Z

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 · 2016-09-22T14:49:26Z

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?

Fixes issue described in #682 (comment).

* Don't hardcode react-scripts package name Fixes issue described in #682 (comment). * Update eject.js

tonyxiao · 2016-09-24T08:13:46Z

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

gaearon · 2016-09-24T10:02:26Z

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 · 2016-09-24T12:59:16Z

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 · 2016-09-24T13:30:31Z

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

kitze · 2016-09-25T08:04:03Z

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 · 2016-09-26T06:43:05Z

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 · 2016-09-26T13:48:48Z

@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 · 2016-09-26T13:55:01Z

I just tried to summarize everything on this topic here:

Tweaking Configuration for React Scripts in Create React App.

Hope this helps!

kitze · 2016-09-26T18:25:16Z

Thanks @shubheksha !

I also just published an article on this topic.

Configure create-react-app without ejecting ⏏

thien-do · 2016-09-27T08:50:16Z

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 · 2017-05-16T13:42:41Z

@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 · 2017-06-08T09:33:39Z

@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:

Do you think create-react-app will fit our requirements?
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?
Can you name some of the disadvantages of the methods stated in (2)?

Thanks.

uqee · 2017-07-10T08:38:21Z

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

romaindso · 2017-07-10T12:10:10Z

@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 · 2017-07-10T12:16:04Z

@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 · 2018-05-21T21:59:06Z

@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.

* Don't hardcode react-scripts package name Fixes issue described in facebook/create-react-app#682 (comment). * Update eject.js

cliff76 · 2018-09-13T23:17:19Z

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 · 2018-09-13T23:27:40Z

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 · 2018-09-13T23:39:27Z

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 · 2018-09-13T23:40:43Z

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

jimthedev · 2018-09-13T23:42:58Z

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 · 2018-09-13T23:44:48Z

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

cliff76 · 2018-09-14T21:49:01Z

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

cweekly · 2018-10-25T16:15:02Z

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.

2.0 Discussion timarney/react-app-rewired#162

ubbcou · 2018-10-27T07:10:33Z

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 · 2018-10-27T07:27:15Z

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

ubbcou · 2018-10-27T07:39:11Z

@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 · 2018-11-21T18:12:29Z

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 · 2018-11-25T21:44:28Z

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.

gaearon added the contributions: up for grabs! label Sep 19, 2016

gaearon added a commit that referenced this issue Sep 23, 2016

Don't hardcode react-scripts package name

1bb1f69

Fixes issue described in #682 (comment).

gaearon mentioned this issue Sep 23, 2016

Don't hardcode react-scripts package name #728

Merged

gaearon added a commit that referenced this issue Sep 23, 2016

Don't hardcode react-scripts package name (#728)

fda91eb

* Don't hardcode react-scripts package name Fixes issue described in #682 (comment). * Update eject.js

kitze mentioned this issue Sep 24, 2016

The published npm module breaks create-react-app's app generation kitze/custom-react-scripts#3

Closed

thien-do mentioned this issue Sep 27, 2016

Document forking react-scripts instead of ejecting #779

Closed

samit4me mentioned this issue Jun 1, 2017

Prepare for v3.5 release react-boilerplate/react-boilerplate#1776

Closed

jmcrthrs mentioned this issue Jun 24, 2017

Is there an appropriate approach to add custom configuration for webpack? #2608

Closed

Grsmto mentioned this issue Jul 25, 2017

Upgrade to CRA 1.0.10 Neverbland/neverbuild#49

Merged

mauriziocescon mentioned this issue Aug 23, 2017

Sass: Adding Bootstrap with a Custom Theme #2801

Closed

ianschmitz mentioned this issue Nov 6, 2017

Official TypeScript support #3415

Closed

gaearon mentioned this issue Jan 8, 2018

Link to an explanation for forking react-scripts #3710

Merged

gaearon closed this as completed in #3710 Jan 8, 2018

nileshgulia1 mentioned this issue Mar 6, 2018

create-react-app like functionality plone/volto#72

Closed

rrdelaney pushed a commit to rrdelaney/reason-scripts that referenced this issue May 23, 2018

Don't hardcode react-scripts package name (#728)

9521c95

* Don't hardcode react-scripts package name Fixes issue described in facebook/create-react-app#682 (comment). * Update eject.js

mrmckeb mentioned this issue Nov 1, 2018

Support custom react-scripts packages storybookjs/storybook#4681

Closed

lock bot locked and limited conversation to collaborators Jan 9, 2019

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

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

Comments

gaearon commented Sep 19, 2016

thangngoc89 commented Sep 19, 2016

sloanelybutsurely commented Sep 19, 2016

gaearon commented Sep 19, 2016

leftdevel commented Sep 19, 2016 • edited Loading

kirkaustin commented Sep 19, 2016

thangngoc89 commented Sep 19, 2016

kirkaustin commented Sep 19, 2016

thangngoc89 commented Sep 19, 2016

kirkaustin commented Sep 19, 2016

dpoineau commented Sep 21, 2016

dpoineau commented Sep 22, 2016 • edited Loading

gaearon commented Sep 22, 2016

ForbesLindesay commented Sep 22, 2016

tonyxiao commented Sep 24, 2016

gaearon commented Sep 24, 2016

kasperpeulen commented Sep 24, 2016

gaearon commented Sep 24, 2016

kitze commented Sep 25, 2016 • edited Loading

clessg commented Sep 26, 2016

gaearon commented Sep 26, 2016

shubheksha commented Sep 26, 2016 • edited by gaearon Loading

kitze commented Sep 26, 2016

thien-do commented Sep 27, 2016 • edited Loading

sunnyvempati commented May 16, 2017 • edited Loading

urimlmd commented Jun 8, 2017 • edited Loading

uqee commented Jul 10, 2017

romaindso commented Jul 10, 2017

Timer commented Jul 10, 2017 • edited Loading

jimthedev commented May 21, 2018

cliff76 commented Sep 13, 2018

jimthedev commented Sep 13, 2018 • edited Loading

cliff76 commented Sep 13, 2018

cliff76 commented Sep 13, 2018

jimthedev commented Sep 13, 2018 via email

cliff76 commented Sep 13, 2018

cliff76 commented Sep 14, 2018

cweekly commented Oct 25, 2018 • edited Loading

ubbcou commented Oct 27, 2018 • edited Loading

uqee commented Oct 27, 2018

ubbcou commented Oct 27, 2018 • edited Loading

hisapy commented Nov 21, 2018

hisapy commented Nov 25, 2018

leftdevel commented Sep 19, 2016 •

edited

Loading

dpoineau commented Sep 22, 2016 •

edited

Loading

kitze commented Sep 25, 2016 •

edited

Loading

shubheksha commented Sep 26, 2016 •

edited by gaearon

Loading

thien-do commented Sep 27, 2016 •

edited

Loading

sunnyvempati commented May 16, 2017 •

edited

Loading

urimlmd commented Jun 8, 2017 •

edited

Loading

Timer commented Jul 10, 2017 •

edited

Loading

jimthedev commented Sep 13, 2018 •

edited

Loading

cweekly commented Oct 25, 2018 •

edited

Loading

ubbcou commented Oct 27, 2018 •

edited

Loading

ubbcou commented Oct 27, 2018 •

edited

Loading