From 90220fb306d304a5fb44d800f05b076729d8024d Mon Sep 17 00:00:00 2001 From: Thien Do Date: Tue, 27 Sep 2016 18:05:19 +0700 Subject: [PATCH 1/6] Document forking react-scripts instead of ejecting --- packages/react-scripts/template/README.md | 45 +++++++++++++++++++++++ 1 file changed, 45 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index bafaaaf65b8..95cea52bf28 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -48,6 +48,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Modulus](#modulus) - [Now](#now) - [Surge](#surge) +- [Fork instead of eject](#fork-instead-of-eject) - [Something Missing?](#something-missing) ## Updating to New Releases @@ -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 + +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. +```js +// /packages/react-scripts/package.json +{ + "name": "my-react-scripts-fork", + "version": "0.0.1", + … +} +``` + +3: Make your changes inside `react-scripts` package. For example, add CSS Modules: +```js +// /packages/react-scripts/config/webpack.config.dev.js +… +{ + test: /\.css$/, + loader: 'style!css?modules=1!postcss' +}, +… +``` + +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 +``` + +5: Now you can use your customized setup with `create react app`: +```sh +$ create-react-app my-app --scripts-version my-react-scripts-fork +``` + +### 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. +- It is recommended to [keep your fork synced](https://help.github.com/articles/fork-a-repo/#keep-your-fork-synced) with the upstream updates. [Backstroke](https://github.com/1egoman/backstroke) is a bot to help you with this. + ## Something Missing? If you have ideas for more “How To” recipes that should be on this page, [let us know](https://github.com/facebookincubator/create-react-app/issues) or [contribute some!](https://github.com/facebookincubator/create-react-app/edit/master/packages/react-scripts/template/README.md) From 8bac1c53dc1bb31df94d0675331bb760e8bf08ad Mon Sep 17 00:00:00 2001 From: Thien Do Date: Thu, 29 Sep 2016 01:57:03 +0700 Subject: [PATCH 2/6] Use npm run publish instead of npm publish --- packages/react-scripts/template/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 95cea52bf28..5e44c3a20a2 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -966,11 +966,11 @@ If you want to customize the default configuration slightly (e.g. add CSS Module … ``` -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. +4: Publish your customized `react-scripts` package with `create-react-app`'s npm script `npm run publish`. ```sh -$ cd packages/react-scripts -$ npm publish +$ npm run publish ``` +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`: ```sh From aaa255dfeded8c56ec3577b38bc19cbc080c9dd1 Mon Sep 17 00:00:00 2001 From: Thien Do Date: Fri, 30 Sep 2016 19:49:41 +0700 Subject: [PATCH 3/6] Update Forking section in Readme --- packages/react-scripts/template/README.md | 29 +++++++++++++---------- 1 file changed, 16 insertions(+), 13 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 5e44c3a20a2..135e23235e9 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -48,7 +48,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Modulus](#modulus) - [Now](#now) - [Surge](#surge) -- [Fork instead of eject](#fork-instead-of-eject) +- [Forking as Alternative to Ejecting](#Forking as Alternative to Ejecting) - [Something Missing?](#something-missing) ## Updating to New Releases @@ -937,17 +937,21 @@ 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 +## Forking as Alternative to Ejecting +You can fork `react-scripts`, publish your fork, and then use it with Create React App. -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`. +Pros: +- You can customize your setup (eg: add CSS Modules, PostCSS plugins, decorators, etc…) +- You still have all Create React App features and updates -### Instruction +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. -1: Fork [create-react-app repo](https://github.com/facebookincubator/create-react-app). +1. Fork repository [`create-react-app`](https://github.com/facebookincubator/create-react-app) repository. -2: Change the name of `react-scripts` package to your new one, and also reset its version. +2. Change the name of `react-scripts` package to the name you chose for your fork, and also reset its version. +### /packages/react-scripts/package.json ```js -// /packages/react-scripts/package.json { "name": "my-react-scripts-fork", "version": "0.0.1", @@ -955,9 +959,9 @@ If you want to customize the default configuration slightly (e.g. add CSS Module } ``` -3: Make your changes inside `react-scripts` package. For example, add CSS Modules: +3. Make your changes inside `react-scripts` package. For example, add CSS Modules: +### /packages/react-scripts/config/webpack.config.dev.js ```js -// /packages/react-scripts/config/webpack.config.dev.js … { test: /\.css$/, @@ -966,20 +970,19 @@ If you want to customize the default configuration slightly (e.g. add CSS Module … ``` -4: Publish your customized `react-scripts` package with `create-react-app`'s npm script `npm run publish`. +4. Publish your fork by running `npm run publish` in the root of the forked repository. ```sh $ npm run publish ``` 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`: +5. Now you can use your customized setup with `create react app`: ```sh $ create-react-app my-app --scripts-version my-react-scripts-fork ``` ### 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. -- It is recommended to [keep your fork synced](https://help.github.com/articles/fork-a-repo/#keep-your-fork-synced) with the upstream updates. [Backstroke](https://github.com/1egoman/backstroke) is a bot to help you with this. +- [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 Create React App, with all configurations and scripts. You only need to change and publish this package, not the whole repo. ## Something Missing? From 83d092ffbcf7c6517a2241e18519efa3d2902ced Mon Sep 17 00:00:00 2001 From: Thien Do Date: Fri, 30 Sep 2016 22:03:33 +0700 Subject: [PATCH 4/6] Suggest to use scope package when fork --- packages/react-scripts/template/README.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 135e23235e9..038b8746233 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -947,19 +947,19 @@ Pros: 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. -1. Fork repository [`create-react-app`](https://github.com/facebookincubator/create-react-app) repository. +Fork repository [`create-react-app`](https://github.com/facebookincubator/create-react-app) repository. -2. Change the name of `react-scripts` package to the name you chose for your fork, and also reset its version. +Change the name of `react-scripts` package to the name you chose for your fork, and also reset its version. It is recommended to use [scoped package](https://docs.npmjs.com/misc/scope), ie: `@yourcompany/react-scripts`. ### /packages/react-scripts/package.json ```js { - "name": "my-react-scripts-fork", + "name": "@yourcompany/react-scripts", "version": "0.0.1", … } ``` -3. Make your changes inside `react-scripts` package. For example, add CSS Modules: +Make your changes inside `react-scripts` package. For example, add CSS Modules: ### /packages/react-scripts/config/webpack.config.dev.js ```js … @@ -970,15 +970,15 @@ Cons: … ``` -4. Publish your fork by running `npm run publish` in the root of the forked repository. +Publish your fork by running `npm run publish` in the root of the forked repository. ```sh $ npm run publish ``` 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 use your customized setup with `create react app`: ```sh -$ create-react-app my-app --scripts-version my-react-scripts-fork +$ create-react-app my-app --scripts-version @yourcompany/react-scripts ``` ### Note From 10ead31f0f27d1a1f9c6d708157373fb6dac2fff Mon Sep 17 00:00:00 2001 From: Thien Do Date: Fri, 30 Sep 2016 22:05:33 +0700 Subject: [PATCH 5/6] Enhance fork instruction --- packages/react-scripts/template/README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 038b8746233..2bb3dbc41b1 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -947,9 +947,9 @@ Pros: 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. -Fork repository [`create-react-app`](https://github.com/facebookincubator/create-react-app) repository. +First, fork repository [`create-react-app`](https://github.com/facebookincubator/create-react-app) repository. -Change the name of `react-scripts` package to the name you chose for your fork, and also reset its version. It is recommended to use [scoped package](https://docs.npmjs.com/misc/scope), ie: `@yourcompany/react-scripts`. +Next, change the name of `react-scripts` package to the name you chose for your fork, and also reset its version. It is recommended to use [scoped package](https://docs.npmjs.com/misc/scope), ie: `@yourcompany/react-scripts`. ### /packages/react-scripts/package.json ```js { @@ -959,7 +959,7 @@ Change the name of `react-scripts` package to the name you chose for your fork, } ``` -Make your changes inside `react-scripts` package. For example, add CSS Modules: +Now make your changes inside `react-scripts` package. For example, add CSS Modules: ### /packages/react-scripts/config/webpack.config.dev.js ```js … @@ -970,7 +970,7 @@ Make your changes inside `react-scripts` package. For example, add CSS Modules: … ``` -Publish your fork by running `npm run publish` in the root of the forked repository. +Then, publish your fork by running `npm run publish` in the root of the forked repository. ```sh $ npm run publish ``` From c27cd91881fab5d71c554c1789ad7b24573509cd Mon Sep 17 00:00:00 2001 From: Thien Do Date: Fri, 30 Sep 2016 22:06:35 +0700 Subject: [PATCH 6/6] Fix link in fork instruction --- packages/react-scripts/template/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 2bb3dbc41b1..9c2f778ca39 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -48,7 +48,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Modulus](#modulus) - [Now](#now) - [Surge](#surge) -- [Forking as Alternative to Ejecting](#Forking as Alternative to Ejecting) +- [Forking as Alternative to Ejecting](#forking-as-alternative-to-ejecting) - [Something Missing?](#something-missing) ## Updating to New Releases