Document forking react-scripts instead of ejecting #779

thien-do · 2016-09-27T11:10:02Z

I follow @shubheksha instruction and rewrite it as a section in User Guide. I hope it can help.

Because I didn't see anyone claim to work on this yet, so I want to start a PR and we can discuss more. In case @zperrault or anyone have worked on this already, I am totally ok to close my PR.

To be honest, I know I don't have much experience writing docs but I am very active and have much time to update my PR to be better/more useful in case anyone have any suggestion.

Related issue: #682

UPDATE:
A summary of current things that need to do:

Fork CRA
Change react-scripts package name (in its package.json) (prefer scoped)
Mark other packages as private
Run npm run publish from root
Use it with CRA

facebook-github-bot · 2016-09-27T11:10:52Z

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla - and if you have received this in error or have any questions, please drop us a line at [email protected]. Thanks!

ghost · 2016-09-27T11:55:46Z

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

mattiloh · 2016-09-28T16:37:51Z

packages/react-scripts/template/README.md

+4: [Publish](https://docs.npmjs.com/getting-started/publishing-npm-packages) your customized `react-scripts` package to npm. Remember to cd into `/packages/react-scripts/` before you publish.
+```sh
+$ cd packages/react-scripts
+$ npm publish


I tried to follow your instructions, but this will not publish a working react-scripts package. The package needs to be published with create-react-app's npm script npm run publish, as this will do some cleanup tasks before publishing react-scripts to npm. Check this out for more info: https://github.com/facebookincubator/create-react-app/blob/master/CONTRIBUTING.md#cutting-a-release

oh thank you a lot. I didn't know that. I don't know why it works in my case.. I'll update the above step

oh @Mattii I think it is because I commented out those "remove-on-publish" block with this suggestion #682 (comment)..

I updated it! Thank you. However, I don't know should we say something about commenting those "remove-on-publish" block.. it won't affect the process, but it seems some people use npm link instead of publish the package.

I think maybe we should wait for this #765

Yes, commenting out these lines helped me to fix it in the first place :)
I didn't know about #765, but getting rid of this remove-on-publish hook seems to be the best idea, otherwise npm link only works with this commenting-hack.

Do you know is there any difference between running npm publish in react-scripts vs npm run publish in create-react-apps, except to remove remove-on-publish block?

I met an issue with npm run publish: when I pull new update from upstream, and there are some updates in other packages than react-scripts (babel-preset-react-app for example), it ask me to publish them too, so I cannot publish my react-scripts. Is there a way to run npm run publish but skip other packages?

Perhaps --scope could help? Something like npm run publish -- --scope react-scripts. I have no idea if that works though.

cc @hzoo who might say

To my knowledge --scope is only run run/exec.

There's https://github.com/lerna/lerna#--force-publish-packages --force-publish for a specific package I believe (which could be renamed to be scope as a future thing).

The normal lerna publish runs a git diff so if anything changes it will try to update any packages that have changed.

There's also https://github.com/lerna/lerna#--only-explicit-updates --no-explicit-updates to only make a new version for the actual packages that have changed (takes adv of ^) but wouldn't make sense for a major version bump.

Hopefully that helps.

gaearon

Great job. Left a few comments. We also need to figure out how to avoid publishing any other packages.

gaearon · 2016-09-30T11:59:23Z

packages/react-scripts/template/README.md

@@ -936,6 +937,50 @@ Install the Surge CLI if you haven't already by running `npm install -g surge`.

 Note that in order to support routers that use html5 `pushState` API, you may want to rename the `index.html` in your build folder to `200.html` before deploying to Surge. This [ensures that every URL falls back to that file](https://surge.sh/help/adding-a-200-page-for-client-side-routing).

+## Fork instead of eject


Let’s call this Forking as Alternative to Ejecting, with capitalized words.

gaearon · 2016-09-30T11:59:46Z

packages/react-scripts/template/README.md

@@ -936,6 +937,50 @@ Install the Surge CLI if you haven't already by running `npm install -g surge`.

 Note that in order to support routers that use html5 `pushState` API, you may want to rename the `index.html` in your build folder to `200.html` before deploying to Surge. This [ensures that every URL falls back to that file](https://surge.sh/help/adding-a-200-page-for-client-side-routing).

+## Fork instead of eject
+
+If you want to customize the default configuration slightly (e.g. add CSS Modules, SASS, decorators…), while still having all future updates and a one dependency, you can fork this repo and create your own configuration of `react-scripts` and use it with `create-react-app`.


We style it as "Create React App" throughout this guide instead of create-react-app.

It would be good to explain the tradeoffs here. What are the benefits and downsides of this approach?

gaearon · 2016-09-30T12:00:30Z

packages/react-scripts/template/README.md

+
+If you want to customize the default configuration slightly (e.g. add CSS Modules, SASS, decorators…), while still having all future updates and a one dependency, you can fork this repo and create your own configuration of `react-scripts` and use it with `create-react-app`.
+
+### Instruction


This subtitle can be removed

gaearon · 2016-09-30T12:00:54Z

packages/react-scripts/template/README.md

+
+### Instruction
+
+1: Fork [create-react-app repo](https://github.com/facebookincubator/create-react-app).


Let’s say "Fork the create-react-app repository"

Let’s use "1. " instead of "1: "

I'm sorry but I don't know how to make it works with code block in numbered list. The item after the code block is reset to 1:

Some text

some code

Another text

Can you suggest a solution? I use "1:" because I don't know how to use "1."

Let’s remove the numbers altogether then

Sure, I'll update in an hour

gaearon · 2016-09-30T12:02:14Z

packages/react-scripts/template/README.md

+
+1: Fork [create-react-app repo](https://github.com/facebookincubator/create-react-app).
+
+2: Change the name of `react-scripts` package to your new one, and also reset its version.


Let’s say "to the name you chose for your fork" instead of "to your new one".

gaearon · 2016-09-30T12:02:40Z

packages/react-scripts/template/README.md

+
+2: Change the name of `react-scripts` package to your new one, and also reset its version.
+```js
+// /packages/react-scripts/package.json


Let's replace this comment with a small header, just like in all examples above.

gaearon · 2016-09-30T12:02:51Z

packages/react-scripts/template/README.md

+
+3: Make your changes inside `react-scripts` package. For example, add CSS Modules:
+```js
+// /packages/react-scripts/config/webpack.config.dev.js


gaearon · 2016-09-30T12:03:43Z

packages/react-scripts/template/README.md

+…
+```
+
+4: Publish your customized `react-scripts` package with `create-react-app`'s npm script `npm run publish`.


Publish your fork by running npm run publish in the root of the forked repository.

gaearon · 2016-09-30T12:04:32Z

packages/react-scripts/template/README.md

+```
+It is a long process. At the end, you will be asked to update the version.
+
+5: Now you can use your customized setup with `create react app`:


Now you can create React apps using your fork of react-scripts:

gaearon · 2016-09-30T12:04:55Z

packages/react-scripts/template/README.md

+```
+
+### Note
+- [create-react-app](https://github.com/facebookincubator/create-react-app) is a [monorepo](https://github.com/babel/babel/blob/master/doc/design/monorepo.md) that contains `react-scripts` package. This is the heart of CRA, with all configurations and scripts. You only need to change and publish this package, not the whole repo.


Let's not use CRA acronym here.

thien-do · 2016-09-30T12:55:29Z

@gaearon thank you a lot. I updated the Readme as you suggested. However, there is 1 thing I can't, please see my comment (#779 (comment)) above

thien-do · 2016-09-30T15:17:18Z

Hi @gaearon , I have updated the README to not using numbered list at all.

So far, we have 2 issues:

We can't npm run publish from root because it will ask to publish other packages too
We suggested to use scope package. However, I'm not sure how to specify --access public (because it seems by default scope package will be published as private). Or we can run npm access public after publishing? @ForbesLindesay

eXtreme · 2016-10-03T11:46:21Z

@dvkndn
ad. 2 - I've tried scoped package with my fork, run npm publish --access public and then only npm publish and it works like a charm. It won't allow running npm publish without setting it as public if you don't have paid npm account.

hzoo · 2016-10-03T14:29:08Z

regarding 1. @dvkndn Did you see my comment? #779 (comment)

thien-do · 2016-10-03T16:04:44Z

@eXtreme I myself use that solution (you also comment out those remove-on-publish block, right?), and I think many people also do that. However, it is currently suggested that we use "npm run publish" script from root #779 (comment)..

Anyway, it seems we should note that it is suggested to run "npm publish --access public" first?

@hzoo yes thank you I saw your comment.

--only-explicit-updates doesn't help us in this case because we want to skip publish a package that actually changed. For example, babel-preset-react-app have some changes from mainstream because we pulled the whole repo, but it shouldn't be published.

I'm trying --force-publish-packages.. It takes pretty long so I will update the result here later..

thien-do · 2016-10-03T16:17:15Z

@hzoo it seems --force-publish doesn't work in our case too

...
+ ./node_modules/.bin/lerna publish --independent --force-publish=quoine-react-scripts
Lerna v2.0.0-beta.29
Independent Versioning Mode
Checking for updated packages...
? Select a new version for babel-preset-react-app (currently 0.2.1) (Use arrow keys)
❯ Patch (0.2.2)
  Minor (0.3.0)
  Major (1.0.0)
  Custom

…omment-253397673

msikma · 2016-12-23T13:04:29Z

packages/react-scripts/template/README.md

+- You still have all Create React App features and updates
+
+Cons:
+- You need to maintain your fork, [make sure it is synced](https://help.github.com/articles/fork-a-repo/#keep-your-fork-synced) with the upstream to have all updates. [Backstroke](https://github.com/1egoman/backstroke) is a bot that can help you with this.


It might be worth linking to this comment explaining that the "classic" webhook method should be used if one wants Backstroke to assist in keeping the fork synced.

As per backstrokeapp/server#52:
the "classic" web hook method should no longer be required.

I have backstroke setup using the standard method...
Will let you know how it goes when something is pushed to the upstream 📦

I have been successfully merging commits with @1egoman's backstroke bot for the last 4 or 5 commits. It has been working beautifully.

gaearon · 2017-02-11T23:17:06Z

Is there something that needs to be done to bring this up to date? Thanks!

thien-do · 2017-02-18T09:22:48Z

@ervoiox I'm sorry it's been a long time :( I don't remember the exact commands now. But I can sure that I don't need to have a paid account. I will do again and will update with detailed information

@gaearon yes there are works that need to be done to update this (actually, the update instruction will be simpler than the original one, and less issues to be mentioned)

However, I can't find time until 1 March. So if anyone have time and want to take this I'd be very glad to help. If not, I will update this in March

gaearon · 2017-02-24T17:43:07Z

Thanks, I think it's fine to land this in March. Advanced users can find it here as a work in progress anyway.

gaearon · 2017-03-06T19:45:23Z

Just a heads up we released 0.9.4 with a few improvements for people who fork react-scripts: https://github.com/facebookincubator/create-react-app/releases/tag/v0.9.4. In particular, scoped react-scripts packages should work now, and ejecting should still work even if you rename the binary. Big thanks to @tuchk4 for pushing these changes through, and to @Timer, @viankakrisna, and @n3tr for help with fixing CI to work on Windows.

We care about experience of forkers, and if there's more things we should fix, please file issues. The only gotcha right now is that we're releasing from 0.9.x branch since Webpack integration in master still has issues. So we recommend releasing based on 0.9.x as well.

thtliife · 2017-03-09T05:10:11Z

@gaearon

We care about experience of forkers, and if there's more things we should fix, please file issues. The only gotcha right now is that we're releasing from 0.9.x branch since Webpack integration in master still has issues. So we recommend releasing based on 0.9.x as well.

Is there a way forkers are able to easily tell which branch you are releasing from, so as to keep our forks as close to the upstream releases as possible?
For instance, if/when you begin releasing from the master branch again, we know to follow suit?

Timer · 2017-03-09T05:19:25Z

The easiest way would be to look at https://github.com/facebookincubator/create-react-app/releases, which specifies what branch it was cut from.

vs

Maybe we could change the default branch on the repo to 0.9.x for now, @gaearon?

In the future we might want to keep master for the current cut releases, doing any for-future releases on a next branch. This would yield the best ergonomics for forkers.

Also, when we cut 0.10 we will be releasing from master again.

thtliife · 2017-03-09T05:21:03Z

The easiest way would be to look at https://github.com/facebookincubator/create-react-app/releases, which specifies what branch it was cut from.

Doh!...
github needs a face palm emoji...
I really need to think before I post... :P

thien-do · 2017-04-03T05:40:48Z

Hi guys, I'm sorry but can someone take over this PR? I have no time recently nor in the near future to handle this :(

Timer · 2017-04-03T14:47:17Z

We'll get it taken care of. Thanks for letting us know!

boda-sh · 2017-11-27T18:25:09Z

how about using react-app-rewired? IMO it's a lot easier than forking react-scripts etc.

For example, I've been using react-app-rewired and one of its loaders react-app-rewire-css-modules to achieve CSS Modules in CRA without ejecting.

Timer · 2017-11-27T18:45:40Z

react-app-rewired can break at any time, so you shouldn't rely on it for a production application. Plus it sorta breaks the whole eject flow.

gaearon · 2018-01-08T14:17:15Z

In the end I went with #3710 instead, but thanks for your effort!

Document forking react-scripts instead of ejecting

90220fb

ghost added the CLA Signed label Sep 27, 2016

mattiloh suggested changes Sep 28, 2016

View reviewed changes

facebook-github-bot added the CLA Signed label Sep 28, 2016

Use npm run publish instead of npm publish

8bac1c5

gaearon mentioned this pull request Sep 30, 2016

Discussion: TypeScript support #509

Closed

gaearon suggested changes Sep 30, 2016

View reviewed changes

facebook-github-bot added the CLA Signed label Sep 30, 2016

Update Forking section in Readme

aaa255d

gaearon mentioned this pull request Sep 30, 2016

Relay support #662

Closed

facebook-github-bot added the CLA Signed label Sep 30, 2016

gaearon added the docs label Sep 30, 2016

facebook-github-bot added the CLA Signed label Sep 30, 2016

Thien Do added 3 commits September 30, 2016 22:03

Suggest to use scope package when fork

83d092f

Enhance fork instruction

10ead31

Fix link in fork instruction

c27cd91

facebook-github-bot added the CLA Signed label Sep 30, 2016

gaearon mentioned this pull request Oct 2, 2016

Generate build without hashed file names. #821

Closed

facebook-github-bot added the CLA Signed label Oct 3, 2016

cliedeman added a commit to stackworx/create-react-app that referenced this pull request Dec 4, 2016

https://github.com/facebookincubator/create-react-app/pull/779#issuec…

e436a29

…omment-253397673

gaearon mentioned this pull request Dec 10, 2016

Compability with Preact #1230

Closed

msikma reviewed Dec 23, 2016

View reviewed changes

Timer mentioned this pull request Feb 13, 2017

Please add backstroke-bot with read permission to the repo #1545

Closed

gaearon added tag: documentation and removed docs labels Mar 6, 2017

Timer added this to the 0.10.0 milestone Apr 3, 2017

Timer mentioned this pull request May 5, 2017

1.0.0 Roadmap #2089

Closed

32 tasks

gaearon modified the milestones: 0.10.1, 0.10.0, 1.0.1, 1.0.x May 16, 2017

gaearon closed this Jan 8, 2018

thien-do deleted the patch-1 branch January 11, 2018 08:51

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

		@@ -936,6 +937,50 @@ Install the Surge CLI if you haven't already by running `npm install -g surge`.

		Note that in order to support routers that use html5 `pushState` API, you may want to rename the `index.html` in your build folder to `200.html` before deploying to Surge. This [ensures that every URL falls back to that file](https://surge.sh/help/adding-a-200-page-for-client-side-routing).

		## Fork instead of eject


		If you want to customize the default configuration slightly (e.g. add CSS Modules, SASS, decorators…), while still having all future updates and a one dependency, you can fork this repo and create your own configuration of `react-scripts` and use it with `create-react-app`.

		### Instruction


		### Instruction

		1: Fork [create-react-app repo](https://github.com/facebookincubator/create-react-app).


		1: Fork [create-react-app repo](https://github.com/facebookincubator/create-react-app).

		2: Change the name of `react-scripts` package to your new one, and also reset its version.

Document forking react-scripts instead of ejecting #779

Document forking react-scripts instead of ejecting #779

Conversation

thien-do commented Sep 27, 2016 • edited Loading

facebook-github-bot commented Sep 27, 2016

ghost commented Sep 27, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

thien-do Sep 28, 2016 • edited Loading

Choose a reason for hiding this comment

thien-do Sep 28, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hzoo Sep 30, 2016 • edited Loading

Choose a reason for hiding this comment

gaearon left a comment

Choose a reason for hiding this comment

gaearon Sep 30, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

thien-do Sep 30, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

thien-do Sep 30, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

thien-do commented Sep 30, 2016

thien-do commented Sep 30, 2016

eXtreme commented Oct 3, 2016

hzoo commented Oct 3, 2016

thien-do commented Oct 3, 2016

thien-do commented Oct 3, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gaearon commented Feb 11, 2017

thien-do commented Feb 18, 2017

gaearon commented Feb 24, 2017

gaearon commented Mar 6, 2017

thtliife commented Mar 9, 2017

Timer commented Mar 9, 2017 • edited Loading

thtliife commented Mar 9, 2017 • edited Loading

thien-do commented Apr 3, 2017

Timer commented Apr 3, 2017

boda-sh commented Nov 27, 2017

Timer commented Nov 27, 2017

gaearon commented Jan 8, 2018

thien-do commented Sep 27, 2016 •

edited

Loading

thien-do Sep 28, 2016 •

edited

Loading

thien-do Sep 28, 2016 •

edited

Loading

hzoo Sep 30, 2016 •

edited

Loading

gaearon Sep 30, 2016 •

edited

Loading

thien-do Sep 30, 2016 •

edited

Loading

thien-do Sep 30, 2016 •

edited

Loading

Timer commented Mar 9, 2017 •

edited

Loading

thtliife commented Mar 9, 2017 •

edited

Loading