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

Support for staging builds #790

Open
ehtb opened this issue Sep 28, 2016 · 66 comments
Open

Support for staging builds #790

ehtb opened this issue Sep 28, 2016 · 66 comments

Comments

@ehtb
Copy link

@ehtb ehtb commented Sep 28, 2016

Hi, I thought about adding support for staging builds. I am not sure if this requires ejecting though, or could be a feature of CRA.

Our use case is that we create staging builds to deploy to our staging servers. This allows us to debug the app in a production like environment, but with the benefit of non-minimised code including proper sourcemap support and still includes the development warnings and notifications, as well as devtools support.

It can look very similar to webpack.config.prod.js, but with changes to L52-L54 and removal of webpack.optimize.UglifyJsPlugin.

@gaearon
Copy link
Member

@gaearon gaearon commented Sep 28, 2016

This is something worth considering for the future although I think we won’t add this near term.

still includes the development warnings

What is your use case for development warnings in staging builds?

@ehtb
Copy link
Author

@ehtb ehtb commented Sep 28, 2016

What is your use case for development warnings in staging builds?

Invariant warnings for instance, but also propType checks.

@gaearon
Copy link
Member

@gaearon gaearon commented Sep 28, 2016

Invariant warnings for instance

Which ones are you referring to? “Invariants” are not warnings, those are hard errors and exist both in production and development builds.

@ehtb
Copy link
Author

@ehtb ehtb commented Sep 28, 2016

Sorry, I meant more descriptive errors in the case of invariants. It serves the same purpose though, by making errors / bugs more transparent.

ehtb pushed a commit to ehtb/create-react-app that referenced this issue Oct 4, 2016
Adding a staging environment to create webpack staging builds.
@ehtb
Copy link
Author

@ehtb ehtb commented Oct 4, 2016

I just pushed a first idea of how it could work. It uses the production Webpack config as a base and adds the relevant changes on top of it. Other than that it's mostly adding the proper scripts and small modifications. If you consider supporting it, let me know so I can create a pull request.

An alternative option could be to add a minify flag (react-scripts build --minify=false). We would forego on React's warning etc., which are removed in the production build, but it would make errors more transparent / easier to debug in a staging environment.

@msmfsd
Copy link

@msmfsd msmfsd commented Nov 29, 2016

Bump - a staging build script would be good, or possibly the ability to override the NODE_ENV?

@shin-monkey
Copy link

@shin-monkey shin-monkey commented Dec 19, 2016

YES @msmfsd ! We need this. Maybe make passible to set NODE_ENV as you like on the build.

Something like:
"NODE_ENV=WHATEVERYOUWANT npm run build"

@firaskrichi
Copy link

@firaskrichi firaskrichi commented Jan 18, 2017

What's the alternative right now when deploying? I mean how is it possible to set 'NODE_ENV=staging'

@eshinkawa
Copy link

@eshinkawa eshinkawa commented Jan 18, 2017

@firaskrichi create a .env file in the root folder of your application, with the variable you want. For eg.: REACT_APP_ENV=whatever

console.log(process.env.REACT_APP_ENV) // will return "whatever".

@firaskrichi
Copy link

@firaskrichi firaskrichi commented Jan 18, 2017

I meant when deploying. Seems that NODE_ENV is set to production when deploying.

@eshinkawa
Copy link

@eshinkawa eshinkawa commented Jan 18, 2017

@firaskrichi indeed.

The only way I could find to control my environments was through custom vars. Since I use Jenkins, I created scripts to build the .env file according to my environment needs.

Right know NODE_ENV is 'development' before building, and 'production' after. You can't edit it.

@firaskrichi
Copy link

@firaskrichi firaskrichi commented Jan 18, 2017

I just set custom vars on Heroku and it works. Thanks @angusyoung84

@mderazon
Copy link
Contributor

@mderazon mderazon commented Feb 23, 2017

I can confirm that during build time (yarn run build) NODE_ENV is hard coded to 'production'. It doesn't help if you set NODE_ENV to something else via shell / .env file.

@gaearon wouldn't it make more sense if NODE_ENV found in shell / .env will have precedence and fallback to 'production' during build time ?

@gaearon
Copy link
Member

@gaearon gaearon commented Feb 23, 2017

No, this is a dangerous footgun and will result in people unknowingly deploying development builds to production. Unfortunately I've seen this enough times to know it has to be hardcoded, and if we want to expose a separate build mode, it needs a separate command that you wouldn't confuse with a regular build.

@gaearon
Copy link
Member

@gaearon gaearon commented Feb 23, 2017

Somewhat related: #1070.

But to address your first points:

but with the benefit of non-minimised code including proper sourcemap support

We already include sourcemaps in production builds now.

as well as devtools support.

React DevTools have always been working with production builds.

@mderazon
Copy link
Contributor

@mderazon mderazon commented Feb 23, 2017

I understand your reasoning.

I ended up interpolating index.html on the server, like the docs suggest. I tried to avoid this thing and be 100% client side logic, but it's not that bad.

However, I do think that this hard coded production when building behavior is not "standard" in Node. I expected NODE_ENV to be taken from an env variable and I was a little surprised that it was set to 'production' no matter what I did. Maybe the docs should mention this just to be sure. Maybe here: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build

By the way, I think the docs are really great! cover every common use case and explains everything really well. Thanks 👍

@gaearon
Copy link
Member

@gaearon gaearon commented Feb 23, 2017

Happy to take a PR for docs.

gaearon added a commit that referenced this issue Feb 24, 2017
…tep (#1625)

* add a comment about NODE_ENV value set to 'production' during build step

#790 (comment)

* Move words around
Timer added a commit that referenced this issue Feb 24, 2017
…tep (#1625)

* add a comment about NODE_ENV value set to 'production' during build step

#790 (comment)

* Move words around
kst404 pushed a commit to kst404/e8e-react-scripts that referenced this issue Mar 2, 2017
…tep (facebook#1625)

* add a comment about NODE_ENV value set to 'production' during build step

facebook#790 (comment)

* Move words around
SpaceK33z added a commit to CodeYellowBV/create-react-cy-app that referenced this issue Mar 7, 2017
…tep (facebook#1625)

* add a comment about NODE_ENV value set to 'production' during build step

facebook#790 (comment)

* Move words around
randycoulman added a commit to CodingZeal/create-react-app that referenced this issue May 8, 2017
…tep (facebook#1625)

* add a comment about NODE_ENV value set to 'production' during build step

facebook#790 (comment)

* Move words around
@mbifulco
Copy link

@mbifulco mbifulco commented May 11, 2017

Jumping into the fray on this one - @ehtb, have you had any luck putting together a staging PR? It looks like your fork has a fair bit of work done to it. My use case is pretty much the same as yours - I'd like my staging environment to mirror production, but to have traceable code (and use a staging data warehouse, which I'd switch to from the NODE_ENV setting).

iamlacroix added a commit to trunkclub/tcweb-build that referenced this issue May 16, 2017
* Heroku Deployment: Adds a note on how to resolve "File/Module Not Found Errors"  (facebook#1260)

* Adds note on how to resolve file or directory not found errors for heroku deployments

* Style tweaks

* Remove interactive shell check when opening browser on start (facebook#1264)

Browser launch can still be suppressed using BROWSER=none

* Only gitignore dirs in root, not deep (facebook#1267)

* facebookgh-1269: Enabling nested folder paths for project name (facebook#1270)

* facebookgh-1269: Enabling nested folder paths for project name

* facebookgh-1269: Added "fs-extra" and removed "path-exists"

* facebookgh-1269: Added e2e test cases to verify nested folder names

* Remove path-exists from dependencies and replace it with fs.existsSync (facebook#1289)

* Downgrading to compatible version of SockJS-Client (facebook#1274)

* Updated react-scripts babel-jest && jest packages to 18.0.0 (facebook#1311)

* Fixes duplicate "is" typo (facebook#1306)

* fix readme: remove double 'we' (facebook#1312)

* Use npm script hooks to avoid && in deploy script (facebook#1324)

* Bump babel-loader version (facebook#1009) (facebook#1309)

* Use yarnpkg alias to run Yarn (facebook#1365)

There’s a common tool included in Hadoop that also has a `yarn` command,
which created issues for users who had Hadoop installed:
* facebook#1257
* facebook#1363

Yarn also installs the command under `yarnpkg` alias (added in
yarnpkg/yarn@cefa9a3)
so we can use `yarnpkg` instead of `yarn` to make it more reliable.

This has no effect on users who don't have Hadoop installed, but those
who have won't see errors from falsely detecting Hadoop Yarn as Yarn
the package manager, and they can now also install Yarn to make use of
our Yarn support without the Hadoop Yarn interfering.

* Use yarnpkg alias to run Yarn (facebook#1365)

There’s a common tool included in Hadoop that also has a `yarn` command,
which created issues for users who had Hadoop installed:
* facebook#1257
* facebook#1363

Yarn also installs the command under `yarnpkg` alias (added in
yarnpkg/yarn@cefa9a3)
so we can use `yarnpkg` instead of `yarn` to make it more reliable.

This has no effect on users who don't have Hadoop installed, but those
who have won't see errors from falsely detecting Hadoop Yarn as Yarn
the package manager, and they can now also install Yarn to make use of
our Yarn support without the Hadoop Yarn interfering.

* Update changelog for 0.8.5

* Publish

 - create-react-app@1.0.3
 - react-scripts@0.8.5

* Add missing import in react-dev-utils README.md (facebook#1369)

* Change console.log for errors and warnings (facebook#1375)

Array.forEach is passed the following parameters:

currentValue
    The current element being processed in the array.
index
    The index of the current element being processed in the array.
array
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

console.log takes multiple arguments. We only want to print the first one, the actually message.

* webpack-dev-server patch for 'still-ok' success status (facebook#1377)

* Document Flow support (facebook#1384)

* Document Flow support

Projects created by Create React App use the `babel-preset-react` which includes
Flow babel plugins which introduces new syntax. This is important for users to know
as it causes what used to be syntax errors to be silently suppressed because they're
valid type annotations in Flow. For example if a user accidentally has `[foo: 'bar']`,
Babel will silently convert it to `[foo]`.

* Make it a bit clearer

* Use a more sophisticated template for end-to-end testing. (facebook#1187)

* Use a more sophisticated template for end-to-end testing.

* Not publish integration tests to npm

* Use "commander" for  cli argv handling

* Handle different scripts version forms and exits without a name given

* Prepare the commands for testing with a template

* Fix dev "template" path

* Add various features to test

* Test various features separately

* Test language features

* Comment unused e2e.sh lines

* Add "development" tests

* Test environment variables

* Test webpack plugins

* Replace kitchensink README

* Switch integration tests from jest to mocha

* Use `fs-extra`

* Use the correct folders

* Do some cleanup

* Print a better message for `--template`

* Test `npm start` with and without https

* Separate fast e2e testing from kitchensink testing

* Hide `--internal-testing-template` (former `--template`) CLI option

* replace two space syntax with <br> tag (facebook#1393)

for consistency :)

* Add causes of dev server not detecting changes (facebook#1422)

* Add causes of dev server not detecting changes

Add causes of `npm start` not detecting changes to Troubleshooting chapter of User Guide

* Reworded slightly

* Update README.md

* Added links to tutorials for integrating cra with an api backend (facebook#1437)

* Added Rails link to User Guide

* docs: unify sections for rails and node backend integration

* docs: fix faulty link and indentation

* Added babel-runtime dependency to deduplicate dependencies when using yarn (facebook#1441)

* Bump Jest version (facebook#1432)

* Readme: Removes experimental from Jest snapshot (facebook#1453)

Per final comment in facebook#372

`Snapshot rendering should actually be pretty stable / useable after React 15.4.1.
See this post for more info.`

* eject: Additionally remove `react-scripts` from dependencies (facebook#1458)

ATM if react-scripts is (erroneously) declared in `dependencies` instead of `devDependencies` or isn't declared at all, the `eject` script will fail half-way. This change makes it more robust, react-scripts will be removed from either, if present.

* E2e jsdom fix (facebook#1470)

* E2E: run tests when react is ready

* Entangle e2e with callbacks

* Remove unused e2e lines

* - import expect and expect flow (facebook#1463)

- code style

* Reflect websocket proxy support on README (facebook#1013) (facebook#1483)

* Reflect websocket proxy support on README

* Add 'the'

* Edit User Guide: Add ESLint config for VS Code users (facebook#1482)

* Add ESLint config for VS Code users

* Update VSC ESLint note to a better solution 

Update VSC ESLint note to a better solution as discussed in Pull Request

* e2e: Reduce complexity of e2e and improve Jest coverage (facebook#1484)

* UX: Explain why build is failing (facebook#1352)

* Update comments for webpack loaders

* Change "OS X" references to "macOS" (facebook#1511)

Updated README.md to refer to the current rebranding.

* corrected minor typo (facebook#1514)

* clarifying the use of custom environment variables (facebook#1513)

* clarifying the use of custom environment variables

* Tweak

* Add missing '\n' to the end of `package.json` file (facebook#1510)

* Make all react app vars accessible in index.html (facebook#1440)

* Make all vars accessiable in index.html

* Fix wrong env provieded to DefinePlugin

* Separate results from getClientEnvironment

* The `string` should be object instead of string

* Fix accessing wrong field

* Changed variables naming to `raw` and `stringified`

* Remove trailing commas

* Add `PUBLIC_URL` env variable for advanced use (facebook#937) (facebook#1504)

* Add `PUBLIC_URL` env variable for advanced use (facebook#937)
* Add support for `PUBLIC_URL` env variable
* Remove unnecessary duplications
* Simplify served path choice logic
* Honor PUBLIC_URL in development
* Add e2e tests

Enables serving static assets from specified host.

* Support relative asset paths for special case (facebook#1489)

* Fix paths in CSS files when homepage is set to "./"

In the production build, ExtractTextPlugin is used to generate a separate CSS file instead of injecting style through JavaScript. This plugin does not work well by default with nested output structure. To fix it, we give it a relative publicPath pointing to the build folder.

* Add section in README to explain how to make builds deployable anywhere

* Apply review requested change

* Apply review changes 2

* readme: Add Advanced Configuration (facebook#1515)

* Add Advanced Configuration section

* Reference package.json instead

* Add HOST, HTTPS, and CI

* Switch wording from Amazon to a CDN

* Add test runner comment

* Add top-level README link

* Simplify wording

* Link to relevant docs

* Link to apps

* Add .env link

* Simpler links

* Add a CI flag note

* Make build exit with error code when interrupted (facebook#1496)

* Make build exit with error code when interrupted

This addresses issue facebook#1493.

Current behavior is that `npm run build` exits code 0 without creating a bundle when interrupted. This change makes the build script catch catchable interruptions and exit with the appropriate error code.

* Better error messages for kill signals

* Don't catch SIGINT

Ctrl+C should exit silently, and already produces a non-zero exit code when sent to the console while `npm run build` is running. Exit code 0 is produced if SIGINT is sent directly to the `node build.js` process, but this is unlikely to happen. A SIGINT handler in `build.js` will also be triggered by Ctrl+C in the console, potentially producing unnecessary noise.

* Style fix

* No changes needed to build.js

Problem is coming from the parent process, `react-scripts`

* Make react-scripts script handle signals

* Clarify context

* Bump lerna

* Add test cases for PUBLIC_URL and relative path (facebook#1519)

* Add test cases to evaluate increased CI time

* Add positive test cases

* Add negative cases

* Test default behavior

* Exit on failure

* Fix test

* Add an annoying nit

* Upgrade babel dependencies

* Don't run CI on Node 0.10 (facebook#1521)

* fix: add yarn gitignores (facebook#1507)

* fix: add yarn gitignores to template

* fix: add yarn gitignores to root

* fix: add wildcard to npm-debug.log ignore

* Upgrade dependencies (facebook#1522)

* Upgrade dependencies

* Re-add caret

* Add CHANGELOG

* Publish

 - babel-preset-react-app@2.1.0
 - create-react-app@1.0.4
 - eslint-config-react-app@0.5.1
 - react-dev-utils@0.5.0
 - react-scripts@0.9.0

* Make index.html interpolation instructions less clashing with env syntax

* Add additional info about env variables

* Massage 0.9.0 changelog

* Add release cutters to changelog

* Tweak indentation

* Markdown whitespace fixes

* Some changelog formatting

* Suggest jest-enzyme for simplifying test matchers (facebook#994)

* Suggest jest-enzyme for simplifying test matchers

* Update README.md

* Update README.md

* Fix `test -e` with wildcard arguments. (facebook#1503)

The `test` command fails with multiple arguments when given a unary operator such as '-e'. Add a function that can test one or more files by looping over all files.

* Link to new Sass doc

* Clarify Less/Sass support

* Add a link to supported features

* Add SASS support documentation facebook#1007 (facebook#1008)

* Add SASS support documentation facebook#1007

* Change SASS section title to more generic label

* Fix link in Table of Contents

* Chain build-css with watch-css script, fix typos

* Update Sass and Less naming style

* Fix wording, remove offensive words

* Slightly rewite

* [documentation] how to disable autoprefix feature (facebook#1320)

* added how to disable autoprefix feature in doc

* Just link to the doc

* Added link to Azure deployment tutorial (facebook#1338)

* Correctly Command in README.md (facebook#1275)

* change npm to yarn command

* Keep npm primary option

* reduxjs/redux#2004 List features beyond ES6 supported by create-react-app (facebook#1313)

* reduxjs/redux#2004 List features beyond ES6 supported by create-react-app

* Add more info

* Update language support wording to ES2017

* Tweak syntax doc (facebook#1539)

* Tweak syntax doc

* Shorter version

* Add useful link to react-scripts (facebook#1495)

* Make node version check more robust in e2e.sh (facebook#1295)

* Revert "Don't run CI on Node 0.10" (facebook#1547)

* Revert "Don't run CI on Node 0.10"

* Install after checking node version

* Don't use travis install

* update CSS preprocessor instructions (facebook#1543)

* update CSS preprocessor instructions
- Windows shell users should note that running two programs simultaneously is not supported.

* fix the order of SASS build step
- the suggested build step with integrated CSS preprocessing is wrong. The SASS preprocessor should run first, then the react-scripts build will pick the up-to-date final CSS

* Add tweaks from PR discussion

* Use Yarn latest in e2e (facebook#1534)

* Use Yarn latest in e2e

* Here too

* And here plz

* modified documentation for setting up jest-enzyme (facebook#1562)

* Use https in link to Ignoring files at Github (facebook#1561)

* add --recursive to sass watch script (facebook#1564)

* Mention Windows support explicitly

* Reorder

* MacOS => macOS

* Update README.md (facebook#1573)

Update links to jest expect function.

* Switch from Neo to Neutrino (facebook#1576)

* Switch from Neo to Neutrino

* Edited format to be consistent

* fixes facebook#1584 PORT env variable not always an integer (facebook#1585)

* babel-preset: remove babel-plugin-transform-es2015-parameters (facebook#1598)

babel/babel#4851 is closed

* Add note for using CHOKIDAR_USEPOLLING in virtual machines to enable HMR (facebook#1608)

* Add note for using CHOKIDAR_USEPOLLING in virtual machines to enable HMR

* Use br in react-scripts template README md

* Use br in md for new line breaks

* Update troubleshooting HMR to allow for VMs running Windows

* Fix up the instructions

* Allow --scripts-version to be a git url (facebook#1570)

* Install react, react-dom, and react-scripts at the same time (facebook#1253)

* Install react and react-dom along with react-scripts

- Install react, react-dom and react-script in a same time
- Move react-scripts to devDependencies.

* Check if react, react-dom has been already installed

- To backward compatibility with old CRA’s cli
- In case old CRA doesn’t install react, react-don along with
react-scripts

* Use packageName to find script dependency

- use packageName to find dependency
- fix pathExists.sync

* Check dependencies.react in package.json instead of actual files

* Process exit when dependencies not found

- Show error and exit when dependencies not found.
- Log install show custom package name

* Remove template string

* Install dependencies if template is preseted

* Remove dangling comma

Resolves facebook#1239

* add a comment about NODE_ENV value set to 'production' during build step (facebook#1625)

* add a comment about NODE_ENV value set to 'production' during build step

facebook#790 (comment)

* Move words around

* Update flow configuration documentation (facebook#1518)

* Update flow configuration documentation

The documentation was missing creating the .flowconfig file

* Update flow configuration documentation

Adding in suggested changes

* Wording

* Wording

* Add note about when to import bootstrap CSS. (facebook#1618)

* Add note about when to import bootstrap CSS.

* Tweak

* Document Sass imports

* Fix workflow if react-scripts package is linked via npm-link (facebook#1356)

* add npm-link support

* - remove extra veriable
- simplify condition

* update code after review:
- remove utils/isReactScriptsLinked
- add appPath and ownPath to paths.js (but only for "before eject" export case)

* update code after review:
- remove utils/isReactScriptsLinked
- add appPath and ownPath to paths.js (but only for "before eject" export case)

* update code after review:
- remove utils/isReactScriptsLinked
- add appPath and ownPath to paths.js (but only for "before eject" export case)
- remove "if" block for fs.removeSync(ownPath) at ejec.tjs

* change ownPath value

* Document debugging in the browser. (facebook#1540)

* Document debugging in the browser.

* Styling

* Link to "Debugging in the Editor"

* Adding link to “Customizing” create-react-app (facebook#1121)

Add documentation for customizing Bootstrap theme

* Update index.js (facebook#1603)

To avoid file conflict issue with IJ static web projects

* Remove .bin files defined at react-scripts/package.json after eject  (facebook#1567)

* remove bin files after eject defined at package.json

* add swallowing try/catch

* Bump `recursive-readdir`. (facebook#1560)

* Added a how-to on react-snapshot (facebook#1577)

* Added a how-to on react-snapshot

Added a section with a short description and link to a tutorial on generating static html pages with react-snapshot, and also linked to it from the section on managing the page title.

* Updated link title for react-snapshot overview

* Explained pre-rendering in a more generic way

* Added link to top level README.md, and removed specifics from overview

* Updated html -> HTML

* Updated quotes and apostrophes

* html -> HTML

* Fix link

* NPM version check for tip (facebook#1193)

* Implemented a version check of npm to give a soft tip during the install procedure
and fixed gitignore

* Moved NPM check to method, it is only executed when you use NPM and the version is < 3.

* Minor formatting tweaks

* Simplify the code

* Remove unnecessary change

* Enable eslint caching in development (facebook#1578)

* Enable eslint caching in development

POC for facebook#740. Haven't found any problem, build times improved about 1s on my project and machine.

* Bump eslint-loader to 1.6.3

* move @remove-on-eject block to persist cache config on eject

* Use real build path name in build output (facebook#1478)

Use the configured appBuild value in paths.js instead of hard-coding it to 'build'.  This is helpful for the ejected case where the appBuild path is changed to another folder name.

* adding a note on how to resolve "Could not find a required file." dep… (facebook#1391)

* adding a note on how to resolve "Could not find a required file." deployment errors because of deleted or ignored files

* Tweak

* Unrelated style nits

* Use posix paths for Jest config during eject (facebook#1635)

Resolves facebook#1417 and facebook#1498.

* Setting a dynamic port value for the pushstate-server URL text (facebook#1628)

* Setting a dynamic port value for the pushstate-server URL text after a build is completed

* Fixing merge conflict

* Fix up broken line

* Gracefully handle initial installation error (facebook#1512)

* Gracefully handle initial installation error

* Print out message when problem occurs
* Delete project folder on errors

* Fix directory deleting message

Resolves facebook#1505

* Add changelog for 0.9.1

* Publish

 - babel-preset-react-app@2.1.1
 - create-react-app@1.1.0
 - eslint-config-react-app@0.5.2
 - react-dev-utils@0.5.1
 - react-scripts@0.9.1

* Update changelog

* Fix npm test on Windows (facebook#1647)

* Add 0.9.2 changelog

* 0.9.2

* Add a note about known issue

* Merge changelogs

* Format differently

* Set Chrome userDataDir to be under .vscode folder (facebook#1657)

* Fix e2e when used with cold cache (facebook#1667)

Resolves facebook#1666

* Fix e2e-simple (cont.)

* Add appveyor.yml (facebook#1648)

* Add appveyor.yml

* Execute mocha directly in e2e test

* Replace e2e process substitution

* Kill nohup node processes after e2e

* Disable known failing Windows test

* Only build master

* fix react dependency versions during initial install (facebook#1669)

* fix react dependency versions during initial install

* add review remarks

* Remove Windows 0.10 simple test

* add project name validation (facebook#1662)

* add project name validation

* Tweak console output

* fix project cleanup on windows (facebook#1675)

* Revert "Enable eslint caching in development" (facebook#1665)

* add X-FORWARDED headers for proxy requests (facebook#1677)

* Use offline cached version with yarn when it's possible (facebook#1423)

* add --offline flag when we are using yarn and we are offline

* Revert changes to init script

We only run these commands for backward compat mode, in which we wouldn't receive the offline flag anyway

* Don't pass isOnline to init script because it doesn't need it

* Don't ping the Yarn registry if user doesn't have Yarn

* Remove unused/wrong arguments

* Move logs to error handler

* Fix error handling

* Report to the user that they're offline

* Add 0.9.3 changelog (facebook#1683)

* Add "migrating" section for 0.9.3

* Publish

 - create-react-app@1.2.0
 - react-scripts@0.9.3

* False expression should not be in dependencies

* Publish

 - create-react-app@1.2.1

* appveyor: Build all branches

* Suggest CRA 1.2.1 in changelog

* Fixed missing flag in first preprocess command (facebook#1687)

* Re-enable e2e-install directory test

* Suggest to use .env for enabling polling mode (facebook#1698)

* Diagnostic code (facebook#1695)

* Adding diagnostic code as requested by @gaearon

* Oops

* Fix Jest tests for Cygwin

* Improve reliability of port hint. (facebook#1696)

* fixing things for people with the username `cwd`

closes facebook#1694

* combine awk into a single command and add escaping

* pin and bump lerna (facebook#1688)

* Lerna 2.0.0-beta.38 expects packages entry

* Add docs for apache's client side routing setting (facebook#1717)

* Add docs for apache's client side routing setting

* Tweak advice

* Update now.sh deployment instructions. (facebook#1710)

* Update now.sh deployment instructions.

Incorporates changes announced at https://zeit.co/blog/now-static that streamline Now deployments from CRA projects.

* Remove unintentional reference to deployed app.

No emergency; just didn't intend to tout or send traffic to my prototype.

* Add support for ignoreRestSiblings in no-unused-vars (facebook#1705)

* updating eslint to 3.16.1

* add support for ignoreRestSiblings in eslint

http://eslint.org/docs/rules/no-unused-vars#ignorerestsiblings

* updating eslint to 3.16.1 in `react-scripts`

* updating eslint

* missing `^`

* missing ^

* pinning main eslint and updating readme

* Pin ESLint version

* add double quotes to escape spaces in paths in e2e (facebook#1707)

* add double quotes to escape spaces in path

* Change $* to "$@" props to @n3tr

* escape spaces in path for all e2e tests

* Create appveyor.cleanup-cache.txt

* Link Appveyor caches to appveyor.cleanup-cache.txt

* Trigger AppVeyor cache cleanup

* Fix hot reloading for WebpackDevServer after eject (facebook#1721)

* Fix openBrowser() when BROWSER=open on macOS (facebook#1690)

* Fix openBrowser() when BROWSER=open on macOS

* Tweaks

* Create empty package.json in e2e test (facebook#1401) (facebook#1402)

* Create empty package.json in e2e test

Create empty package.json in e2e test while installing packaged CLI to prevent installation issues.

* Use "npm init" to initialize package.json instead of just writing an empty object into it.

* Fix typo

* Skip AppVeyor CI builds for Markdown changes (facebook#1723)

* Skip CI builds for Markdown changes

* I will never learn YML

* Don't use ES6 in a file that should run on Node 4 (facebook#1724)

* Bump jsx-a11y version (facebook#1542)

* Bump jsx-a11y version

* Update package dependecy for jsx-a11y

* Bump version in react-scripts

* Bump ESLint config to 0.6.0 manually

* Fix Node 4 e2e tests (facebook#1730)

* Lint internal scripts with eslint:recommended (facebook#1729)

* Lint internal scripts with eslint:recommended

* Warnings r bad

* Fix ejecting from a scoped fork (facebook#1727)

* Read script names from own bin instead of guessing

This fixes ejecting from a fork that uses a different bin script name.

* Fix ejecting for a scoped react-scripts fork

We shouldn't hardcode react-scripts because fork name might differ.
We also shouldn't rely on it being an immediate child because scoped packages are a level deeper.

* Clarify that own* properties only exist before ejecting

* Properly extract package name for installing tgz of scoped packages (facebook#1706)

* Properly extract package name

* Download package if need be ...

* Oops

* Add e2e test based on facebook#1537, but without specific filename

* Pass packageName through promises

A little bit more verbose but explicit and doesn't rely on shared mutable state.

* Fix up directory name in test

* Tweak failure message

* Fix lint

* extract generic build functions to react-dev-utils (facebook#1726)

* Temp rename

* Rename to change the case

* extract generic build functions to react-dev-utils

* tweak package json files and move removeFileNameHash

* revert removeFileNameHash

* use paths.appBuild in printFileSizes

* use paths.appBuild in removeFileNameHash

* change curried functions to regular functions

* add fs-extra to react-dev-utils deps

* move getDifferenceLabel inside printFileSizes

* inline copyPublicFolder

* combine printFileSizes and removeFileNameHash to fileSizeReporter

* fix typo

* Tweak APIs and fix issues

* Fix heading

* Remove missing file

* Newline

* Newline

* Trailing space

* Update FileSizeReporter.js

* Update build.js

* Bust AppVeoyr cache

* Relax ESLint config peerDependency (facebook#1740)

* Fix internal linting setup and add missing headers (facebook#1741)

* Fix lint

* Fix eject for linked react-scripts (facebook#1736)

* fix eject for linked react-scripts

* path.resolve => resolveApp

* Add changelog for 0.9.4

* Publish

 - create-react-app@1.3.0
 - eslint-config-react-app@0.6.1
 - react-dev-utils@0.5.2
 - react-scripts@0.9.4

* Adjust changelog wording

* Switch to preset-env (facebook#1742)

* Switch to preset-env
Disables webpack modules by enabling babel modules to resolve facebook#1638

* Bump babel-core to match babel preset versions

* Add uglify to targets

* Display yarn instead of yarnpkg when creating a new app (facebook#1747)

* Display yarn instead of yarnpkg

* Refactored displayd commands

* Removed testing directory

* Add yarn steps for adding flow (facebook#1756)

[skip ci]

* Suggest `serve` for running in production (facebook#1760)

* Suggest `serve` for serving the `build` directory

* How to handle it with Node in prod (or other platforms)

* Pretty newline added

* Adjusted default port of static server

* Remove `open` command from output

* Removed constant assignment

* Better explanation for not using having to use a static server

* Cute newline added

* Style nits

* Remove 'guard-for-in' lint rule (facebook#1773)

Iterating over an object's keys using `for/in` is idiomatic and it's safe (in all modern browsers) to not check hasOwnProperty as long as the object is a plain object. Can we remove this lint rule?

* Run CI on Node 7; Bump detect-port: 1.0.1 -> 1.1.0 (facebook#1776) (facebook#1783)

* Run CI on Node 7

* Bump detect-port: 1.0.1 -> 1.1.0

* Run AppVeyor CI on Node 7

* Add 0.9.5 changelog (facebook#1784)

* Add 0.9.5 changelog

* Update CHANGELOG.md

* Publish

 - babel-preset-react-app@2.2.0
 - eslint-config-react-app@0.6.2
 - react-scripts@0.9.5

* docs(babel-preset): Update comment info about babel-preset-env. (facebook#1787)

* Feature/readme-nomoretools (facebook#1799)

* docs: replace TDLR with a meaningful heading

* docs: insert section No additional build tools

* Tweak wording

* Suggest "yarn build" rather than "yarn run build" (facebook#1800)

* Fix for issue facebook#1798: Suggested 'yarn build' versus 'yarn run build'

* remove 'run' from 'yarn test' command as well

* conditionally show 'run' if Yarn is not available

* Tweak the wording

* Allow creation of apps in empty mercurial repos (facebook#1811)

* Allow creation of apps in empty mercurial repos

* Adding .hgignore to list of validFiles for isSafeToCreateProjectIn check

* Adding .hgcheck to list of validFiles for isSafeToCreateProjectIn check

* Link to CRNA

* Make Surge guide more focused

* User Guide: Removed blockquote from code section, due to markdown conflict (facebook#1869)

* Removed blockquote from code section

* Fix the fix

* Fix AppVeyor CI (facebook#1876)

* Fix responsive behavior in iOS 9+ (facebook#1821)

* Adding shrink-to-fit=no for proper responsive handling on Safari 9+

* Check internet connectivity with lookup instead of resolve (facebook#1863)

Resolves facebook#1818

* Update `detect-port` (facebook#1861)

Previous changes caused `detect-port` to pick random port on app startup. Update fixes this regression, `detect-port` pick next available port instead.

* Fix importing linked packages (facebook#1884)

Resolves facebook#1661

* Fix AppVeyor CI (facebook#1868)

* Fix AppVeyor CI (facebook#1876)

* Run AppVeyor on Visual Studio 2017

* Suggest Yarn in HTML template (facebook#1911)

* Fix npm to yarn

* yarn & npm

* Update index.html

* Switch ordering of suggestion

We should suggest NPM first for new users.

* Note that only jest-enzyme@2.x is compatible

* Add sku to the list of alternatives (facebook#1962)

* Update information in User Guide for Enzyme dependency (facebook#1982)

* Ensure proxy url starts with `http://` or `https://` (facebook#1890)

* Update ansi-html to fix facebook#1881

* Add linked modules test (0.9.x) (facebook#1912)

* Add linked modules test

* Keep fallback after eject

* Add note about installing watchman (facebook#1950)

* Add note about installing watchman

* Update CONTRIBUTING.md

* Start the dev server at the specified host

Pass the host from environment variable as argument of the devServer's
listen function instead of a field of options object.
Set the default host to 0.0.0.0 instead of localhost.

* Add folder structure docs for new contributors (facebook#1991)

* Adding folder structure to help people navigate through project. It helps in resolving issues by providing brief description of each package and its purpose

* Removing unnecessary packages from Folder structure heading

* Update CONTRIBUTING.md

* Relax label rules (facebook#1989)


# Conflicts:
#	packages/eslint-config-react-app/index.js

* Update doc server example to work from any directory (facebook#1988)

* Node.js serving with absolute path

It’s safer to use the absolute path of the directory that you want to serve, in case you run the express app from another directory.

* Update README.md

* Fix config discrepancies after merging from upstream v0.9.x

* Minor fixes per feedback for upstream merging

* Fix import from incorrect module

* Release v7.0.0
@someden
Copy link

@someden someden commented Dec 23, 2019

I think this issue already has some solutions:

  1. https://create-react-app.dev/docs/production-build#profiling
    "scripts": {
        "build:prod": "react-scripts build",
        "build:staging": "react-scripts build --profile",
    },
  1. https://create-react-app.dev/docs/deployment/#customizing-environment-variables-for-arbitrary-build-environments
    "scripts": {
        "build:prod": "react-scripts build",
        "build:staging": "env-cmd -f .env.staging react-scripts build --profile",
    },

@SirGordon
Copy link

@SirGordon SirGordon commented Dec 23, 2019

@someden These solutions address only some special cases, but not the whole issue.
For example, they do not solve mine.

@Terrabits
Copy link

@Terrabits Terrabits commented Jan 16, 2020

@someden

  1. Profiling is part of but not wholly sufficient for development builds
  2. react-scripts ignores/overwrites certain environment variables to ensure that start is always in a development environment (e.g. NODE_ENV=development) and build is always in production (e.g. NODE_ENV=production). The solutions that involve custom environment variables do not resolve this.

The only solutions I've found that build in development mode involve either ejecting CRA or building your own react-scripts, both of which are pretty painful options.

@shennan
Copy link

@shennan shennan commented Mar 17, 2020

I got stuck on @Liel208's workaround for 30 minutes because I decided my custom variable would be named BUILD_ENV. This somehow gets plucked from the process.env if used. So anyone thinking of using the same variable name; don't. 😁

Edit

Okay, so actually tried APP_ENV and LADIDAH_ENV which also get pulled from the process.env object. So I'm guessing REACT_APP_VAR specifically gets passed on by create-react-app?

@weisk
Copy link

@weisk weisk commented Mar 24, 2020

@Terrabits go ahead and open a PR please :)

just read here https://github.com/facebook/create-react-app/blob/master/CONTRIBUTING.md#submitting-a-pull-request

NOBODY from the team has worked on this, and regarding the testing you could just explain a little bit the changes you introduced, on the PR description...

As per the code standards, in my opinion I would say that it's good... however, the process is to open the PR, and then comments can be made, and you can work from there. You can reference this issue on the PR, along with a descriptive title, you can also put fixes #790

But yeah, for now, i'm using your fork, so I would like this one to be added!

@bmoeskau
Copy link

@bmoeskau bmoeskau commented Jun 1, 2020

Strange to me that this was dismissed by the core team, as it seems like such an obvious need. I have two versions of an API key in my .env and .env.production files, for dev and prod which is fine. When I build and deploy to my staging environment, I explicitly don't want to use my production API key. I would prefer a staging-specific key, like how every environment everywhere generally works. I find it baffling that I can't seem to do this?

I guess I can pass my server ENV down to the client and jury-rig it, but why?

@someden
Copy link

@someden someden commented Jun 9, 2020

@bmoeskau there is no problems with your case, it is simple to do it, just read my comment above #790 (comment)

@MendyBerger
Copy link

@MendyBerger MendyBerger commented Jun 17, 2020

This workaround might help some

#2880 (comment)

@zoness32
Copy link

@zoness32 zoness32 commented Jun 18, 2020

Being able to set development mode in a packaged build is a very useful thing. At this point all of our analytics are going to our production bucket because we have to generate builds to push to our staging environments. This is unacceptable from a user analytics standpoint. We can't have internal testing in our staging environments mucking with the data from our prod environment. I'm really surprised this hasn't been accounted for by now.

@watery
Copy link

@watery watery commented Jul 28, 2020

I recently ran into this issue. I created a fork that adds --development and --production flags to the start and build commands. Now I can run react-scripts build --development (and react-scripts start --production, for that matter).

Is this something that CRA would be interested in merging?

Terrabits@ec2bd4a

@Terrabits Just a quick note, I skimmed through your diff and it seems to me you're bypassing PUBLIC_URL handling, which we rely on for our pre-staging area, where a single webserver serves several React webapps each one under its own subpath.

@Acidic9
Copy link

@Acidic9 Acidic9 commented Aug 22, 2020

If you just want to inspect the output if it was development, you can temporarily fix this by editing node_modules/react-scripts/scripts/build.js and replacing production with development:

process.env.BABEL_ENV = 'development';
process.env.NODE_ENV = 'development';

const config = configFactory('development');

@juicemia
Copy link

@juicemia juicemia commented Aug 24, 2020

Has there been any traction on this? I'm trying to output a build with sourcemaps, etc. to be served with an app server. Maybe there's another way to do this that I'm not seeing, but right now it looks like if I want sourcemaps, I have to run npm run start, which serves from localhost:3000, and then bind my app server to a different port, and then enable CORS in the app server, which I can't do.

@gaearon also for your consideration: I think it's noble to want to protect users from accidentally releasing a development build, but there's other ways to protect against that like CI. Even if a development build was released to production, that code has to work. If it doesn't, it means it hasn't been tested, and at that point there's more issues in the process than just pushing a huge website to prod right? I don't expect this to necessarily change your mind, it's just a different perspective.

@BlueHotDog
Copy link

@BlueHotDog BlueHotDog commented Aug 25, 2020

4 years for a flag? hmmm. this is related to the same issue of not being able to output a watchable dev build. preventing from using CRA in extension development.

@antonymarion
Copy link

@antonymarion antonymarion commented Oct 30, 2020

If you just want to inspect the output if it was development, you can temporarily fix this by editing node_modules/react-scripts/scripts/build.js and replacing production with development:

process.env.BABEL_ENV = 'development';
process.env.NODE_ENV = 'development';

const config = configFactory('development');

And you can eject it before if you want to see the script build.js in the scripts folder (rather than diving into the node_modules).
Then you can make this change line 4-5 and 47.

You may have also to change the default appBuild: resolveApp('dist'), in the config/path.js file since development build files inside a dist folder.

@RobbieMcKinstry
Copy link

@RobbieMcKinstry RobbieMcKinstry commented Nov 16, 2020

Has there been any traction on this? I'm trying to output a build with sourcemaps, etc. to be served with an app server.

This is exactly my use case. There's quite a high barrier to doing something so common.

@br-matt
Copy link

@br-matt br-matt commented Dec 17, 2020

I don't want to use rewired just for this. We are trying to test builds inside of a web-component 😢

@patrickjm
Copy link

@patrickjm patrickjm commented Jan 2, 2021

Another use case for this.

I'm using Skaffold to constantly rebuild docker images as I develop.

The production build takes a long time. It really slows down my development loop.

@Jammar
Copy link

@Jammar Jammar commented Jan 12, 2021

One more use case for this:

I am error searching my app in IE10 (I know...) and hot-reload doesn't work because of some dependencies that won't get polyfilled (there's some issue on that, can't find it now).

Anyway, only way to try my app in IE10 is through building it and serve. The errors in IE10 points to a minified version. Would love to have a development build.

@biapar
Copy link

@biapar biapar commented Feb 3, 2021

EricRabil added a commit to open-imcore/imcore.react that referenced this issue Apr 7, 2021
Such a simple patch. It's insane that there's still no flag for this in 2021. lol. facebook/create-react-app#790
@bric3
Copy link

@bric3 bric3 commented Jul 1, 2021

I am developing an Application for a desktop app, using Chrome Embedded Frame, and there is a bug with source maps : the devtools cannot load them. Which makes development utterly punishing, exception always at line 3 or 4, forget debug, ...

I really would like a way to alter, overrides the build process without having to eject. At this time the only working solution I've found is https://github.com/timarney/react-app-rewired as it allows to override the webpack configuration.
There is a warning that tool appear lightly maintained, but the version 2.1.8 works with react-scripts 4.0.3

yarn --cwd internal-pwa add react-app-rewired

Here's what my config-overrides.js looks like.

module.exports = function override(config, env) {
    config.mode = "development";
    config.optimization.minimize = false;
    config.optimization.minimizer = [];
    config.devtool = 'inline-source-maps'
    
    return config;
};

This react-app-rewired has been a game changer for me. I hope the react-script tools could provide similar features.

bric3 added a commit to bric3/excalidraw-jetbrains-plugin that referenced this issue Jul 1, 2021
The webapp is now built with a override of the default
react-script webpack config, this override disables
optimizations and inline source maps.

Workaround of facebook/create-react-app#790, by using
`react-script-rewired` and passing a custom webpack
configuration override.

The non-modifiable webpack config passed to react-script is
located here :
`excalidraw-assets/node_modules/react-scripts/config/webpack.config.js`

Related to #7
@y-nk
Copy link

@y-nk y-nk commented Jul 21, 2021

Sadly adding to the pile of request for this... 5 years after the issue was opened. At some point I'm wondering if someone still really cares about the people using this project. (@gaearon 👀)

Staging builds are a thing, especially in projects/organisations where the established workflow imposes a build to be deployed in a staging environment (through CI) and where you want to keep the flexibility of having an unminified build to allow meaningful bug reporting with the help of the console.

I don't see any valid reason not to have this ; there's no solid case to refute a staging configuration mode as proposed in the original issue ; there's no cost in doing so (the OP was kind enough to give pointers and it seems fairly straightforward), and there's even less reason not to let the consumer pass their own NODE_ENV value (NODE_ENV=development npm run build).

And for sake not letting people do what they wish with their build is nothing but the goal of a convenient developer companion tool.

PS: You're free to delete this comment - i'm probably gonna have to use rewire as i'm certainly not gonna wait 5 more years to see a move.

PS2:

No, this is a dangerous footgun and will result in people unknowingly deploying development builds to production.

The problem isn't the tool in that case, but the people using it. In the same way you can't prevent a person from using a regular screwdriver on a cruciform screw. Add blinking warnings at build time if you wish to prevent and educate them, call the option dangerouslySetNodeEnv= but don't be an ass by blocking them.

@mlynch
Copy link

@mlynch mlynch commented Aug 19, 2021

This feature would be very welcome for doing mobile app development with React and projects like Capacitor and Ionic. In those situations you have to deploy a built bundle to a native app container, so having the ability to do a dev build is actually really useful as a development aid. Will look into the workarounds suggested here but hope some day this gets reconsidered!

@jcrben
Copy link

@jcrben jcrben commented Sep 2, 2021

My takeaway from this: don't use NODE_ENV in general in my app code, and instead use something I have total control over. Just gonna use something like APP_ENV (or rather REACT_APP_ENV) instead. I don't see how this hurts anything. I'd rather stick to the conventional NODE_ENV tho

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet