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://git@github.com/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?