Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
gaearon opened this issue Sep 19, 2016 · 85 comments
Closed

Comments

@gaearon
Copy link
Contributor

gaearon commented Sep 19, 2016

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
Copy link
Contributor

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

@sloanelybutsurely
Copy link

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
Copy link
Contributor Author

gaearon commented Sep 19, 2016

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
Copy link

leftdevel commented Sep 19, 2016

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
Copy link

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
Copy link
Contributor

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

@kirkaustin
Copy link

@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
Copy link
Contributor

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

@kirkaustin
Copy link

Great, thanks!

@dpoineau
Copy link

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
Copy link

dpoineau commented Sep 22, 2016

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
Copy link
Contributor Author

gaearon commented Sep 22, 2016

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
Copy link
Contributor

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?

gaearon added a commit that referenced this issue Sep 23, 2016
gaearon added a commit that referenced this issue Sep 23, 2016
* Don't hardcode react-scripts package name

Fixes issue described in #682 (comment).

* Update eject.js
@tonyxiao
Copy link

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

@gaearon
Copy link
Contributor Author

gaearon commented Sep 24, 2016

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
Copy link
Contributor

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
Copy link
Contributor Author

gaearon commented Sep 24, 2016

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

@kitze
Copy link

kitze commented Sep 25, 2016

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
Copy link

clessg commented Sep 26, 2016

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
Copy link
Contributor Author

gaearon commented Sep 26, 2016

@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
Copy link
Contributor

shubheksha commented Sep 26, 2016

I just tried to summarize everything on this topic here:

Tweaking Configuration for React Scripts in Create React App.

Hope this helps!

@kitze
Copy link

kitze commented Sep 26, 2016

Thanks @shubheksha !

I also just published an article on this topic.

Configure create-react-app without ejecting ⏏

@thien-do
Copy link
Contributor

thien-do commented Sep 27, 2016

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
Copy link

sunnyvempati commented May 16, 2017

@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
Copy link

urimlmd commented Jun 8, 2017

@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
Copy link

uqee commented Jul 10, 2017

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

@romaindso
Copy link

@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
Copy link
Contributor

Timer commented Jul 10, 2017

@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
Copy link

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

rrdelaney pushed a commit to rrdelaney/reason-scripts that referenced this issue May 23, 2018
* Don't hardcode react-scripts package name

Fixes issue described in facebook/create-react-app#682 (comment).

* Update eject.js
@cliff76
Copy link

cliff76 commented Sep 13, 2018

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
Copy link

jimthedev commented Sep 13, 2018

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
Copy link

cliff76 commented Sep 13, 2018

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
Copy link

cliff76 commented Sep 13, 2018

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

@jimthedev
Copy link

jimthedev commented Sep 13, 2018 via email

@cliff76
Copy link

cliff76 commented Sep 13, 2018

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

@cliff76
Copy link

cliff76 commented Sep 14, 2018

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

@cweekly
Copy link

cweekly commented Oct 25, 2018

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
Copy link

ubbcou commented Oct 27, 2018

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
Copy link

uqee commented Oct 27, 2018

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

@ubbcou
Copy link

ubbcou commented Oct 27, 2018

@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
Copy link

hisapy commented Nov 21, 2018

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
Copy link

hisapy commented Nov 25, 2018

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.

@lock lock bot locked and limited conversation to collaborators Jan 9, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests