You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The above form is looking for a variable called `REACT_APP_SECRET_CODE` from the environment. In order to consume this
423
+
value, we need to have it defined in the environment:
424
+
425
+
### Windows (cmd.exe)
426
+
427
+
```cmd
428
+
set REACT_APP_SECRET_CODE=abcdef&&npm start
429
+
```
430
+
431
+
(Note: the lack of whitespace is intentional.)
432
+
433
+
### Linux, OS X (Bash)
434
+
435
+
```bash
436
+
REACT_APP_SECRET_CODE=abcdef npm start
437
+
```
438
+
439
+
> Note: Defining environment variables in this manner is temporary for the life of the shell session. Setting
440
+
permanent environment variables is outside the scope of these docs.
441
+
442
+
With our environment variable defined, we start the app and consume the values. Remember that the `NODE_ENV`
443
+
variable will be set for you automatically. When you load the app in the browser and inspect the `<input>`, you will see
444
+
its value set to `abcdef`, and the bold text will show the environment provided when using `npm start`:
445
+
446
+
```html
447
+
<div>
448
+
<small>You are running this application in<b>development</b> mode.</small>
449
+
<form>
450
+
<input type="hidden" value="abcdef"/>
451
+
</form>
452
+
</div>
453
+
```
454
+
455
+
Having access to the `NODE_ENV` is also useful for performing actions conditionally:
456
+
457
+
```js
458
+
if (process.env.NODE_ENV!=='production') {
459
+
analytics.disable();
460
+
}
461
+
```
462
+
390
463
## Integrating with a Node Backend
391
464
392
465
Check out [this tutorial](https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/) for instructions on integrating an app with a Node backend running on another port, and using `fetch()` to access it. You can find the companion GitHub repository [here](https://github.com/fullstackreact/food-lookup-demo).
393
466
467
+
## Proxying API Requests in Development
468
+
469
+
>Note: this feature is available with `react-scripts@0.2.3` and higher.
470
+
471
+
People often serve the front-end React app from the same host and port as their backend implementation.
472
+
For example, a production setup might look like this after the app is deployed:
473
+
474
+
```
475
+
/-static server returns index.htmlwith React app
476
+
/todos -static server returns index.htmlwith React app
477
+
/api/todos - server handles any /api/* requests using the backend implementation
478
+
```
479
+
480
+
Such setup is **not** required. However, if you **do** have a setup like this, it is convenient to write requests like `fetch('/api/todos')` without worrying about redirecting them to another host or port during development.
481
+
482
+
To tell the development server to proxy any unknown requests to your API server in development, add a `proxy` field to your `package.json`, for example:
483
+
484
+
```js
485
+
"proxy": "http://localhost:4000",
486
+
```
487
+
488
+
This way, when you `fetch('/api/todos')` in development, the development server will recognize that it’s not a static asset, and will proxy your request to `http://localhost:4000/api/todos` as a fallback.
489
+
490
+
Conveniently, this avoids [CORS issues](http://stackoverflow.com/questions/21854516/understanding-ajax-cors-and-security-considerations) and error messages like this in development:
491
+
492
+
```
493
+
Fetch API cannot load http://localhost:4000/api/todos. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
494
+
```
495
+
496
+
Keep in mind that `proxy` only has effect in development (with `npm start`), and it is up to you to ensure that URLs like `/api/todos` point to the right thing in production. You don’t have to use the `/api` prefix. Any unrecognized request will be redirected to the specified `proxy`.
497
+
498
+
Currently the `proxy` option only handles HTTP requests, and it won’t proxy WebSocket connections.
499
+
If the `proxy` option is **not** flexible enough for you, alternatively you can:
500
+
501
+
* Enable CORS on your server ([here’s how to do it for Express](http://enable-cors.org/server_expressjs.html)).
502
+
* Use [environment variables](#adding-custom-environment-variables) to inject the right server host and port into your app.
503
+
394
504
## Deployment
395
505
506
+
By default, Create React App produces a build assuming your app is hosted at the server root.
507
+
To override this, specify the `homepage` in your `package.json`, for example:
508
+
509
+
```js
510
+
"homepage": "http://mywebsite.com/relativepath",
511
+
```
512
+
513
+
This will let Create React App correctly infer the root path to use in the generated HTML file.
514
+
396
515
### Now
397
516
398
517
See [this example](https://github.com/xkawi/create-react-app-now) for a zero-configuration single-command deployment with [now](https://zeit.co/now).
399
518
400
519
### Heroku
401
520
402
-
Use the [Heroku Buildpack for create-react-app](https://github.com/mars/create-react-app-buildpack).
521
+
Use the [Heroku Buildpack for Create React App](https://github.com/mars/create-react-app-buildpack).
522
+
You can find instructions in [Deploying React with Zero Configuration](https://blog.heroku.com/deploying-react-with-zero-configuration).
403
523
404
524
### Surge
405
525
@@ -426,17 +546,15 @@ Note that in order to support routers that use html5 `pushState` API, you may wa
426
546
427
547
>Note: this feature is available with `[email protected]` and higher.
428
548
429
-
First, open your `package.json` and add a `homepage` field.
430
-
It could look like this:
549
+
Open your `package.json` and add a `homepage` field:
431
550
432
551
```js
433
-
{
434
-
"name":"my-app",
435
552
"homepage": "http://myusername.github.io/my-app",
436
-
// ...
437
-
}
438
553
```
439
554
555
+
**The above step is important!**
556
+
Create React App uses the `homepage` field to determine the root URL in the built HTML file.
557
+
440
558
Now, whenever you run `npm run build`, you will see a cheat sheet with a sequence of commands to deploy to GitHub pages:
441
559
442
560
```sh
@@ -451,7 +569,7 @@ git checkout -
451
569
452
570
You may copy and paste them, or put them into a custom shell script. You may also customize them for another hosting provider.
453
571
454
-
Note that GitHub Pages doesn't support routers that use the HTML5 `pushState` history API under the hood (for example, React Router using `browserHistory`). This is becasue when there is a fresh page load for a url like `http://user.github.io/todomvc/todos/42`, where `/todos/42` is a frontend route, the GitHub Pages server returns 404 because it knows nothing of `/todos/42`. If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions:
572
+
Note that GitHub Pages doesn't support routers that use the HTML5 `pushState` history API under the hood (for example, React Router using `browserHistory`). This is because when there is a fresh page load for a url like `http://user.github.io/todomvc/todos/42`, where `/todos/42` is a frontend route, the GitHub Pages server returns 404 because it knows nothing of `/todos/42`. If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions:
455
573
* You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to `hashHistory` for this effect, but the URL will be longer and more verbose (for example, `http://user.github.io/todomvc/#/todos/42?_k=yknaj`). [Read more](https://github.com/reactjs/react-router/blob/master/docs/guides/Histories.md#histories) about different history implementations in React Router.
456
574
* Alternatively, you can use a trick to teach GitHub Pages to handle 404 by redirecting to your `index.html` page with a special redirect parameter. You would need to add a `404.html` file with the redirection code to the `build` folder before deploying your project, and you’ll need to add code handling the redirect parameter to `index.html`. You can find a detailed explanation of this technique [in this guide](https://github.com/rafrex/spa-github-pages).
0 commit comments