Skip to content

Commit 3ea471d

Browse files
Jerry MuzsikTimer
Jerry Muzsik
authored andcommitted
Document multiple build environments via env-cmd facebook#4071 (facebook#4117)
* Docs - Document multiple build environments via * Docs - Document multiple build environments via * Docs - Document multiple build environments via * Docs - Document multiple build environments via env-cmd * fix - based upon requests * Update README.md
1 parent 69d4219 commit 3ea471d

File tree

1 file changed

+29
-0
lines changed

1 file changed

+29
-0
lines changed

template/README.md

+29
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@ You can find the most recent version of this guide [here](https://github.com/fac
8787
- [Serving Apps with Client-Side Routing](#serving-apps-with-client-side-routing)
8888
- [Service Worker Considerations](#service-worker-considerations)
8989
- [Building for Relative Paths](#building-for-relative-paths)
90+
- [Customizing Environment Variables for Arbitrary Build Environments](#customizing-environment-variables-for-arbitrary-build-environments)
9091
- [Azure](#azure)
9192
- [Firebase](#firebase)
9293
- [GitHub Pages](#github-pages)
@@ -2211,6 +2212,34 @@ If you are not using the HTML5 `pushState` history API or not using client-side
22112212
22122213
This will make sure that all the asset paths are relative to `index.html`. You will then be able to move your app from `http://mywebsite.com` to `http://mywebsite.com/relativepath` or even `http://mywebsite.com/relative/path` without having to rebuild it.
22132214

2215+
### Customizing Environment Variables for Arbitrary Build Environments
2216+
2217+
You can create an arbitrary build environment by creating a custom `.env` file and loading it using [env-cmd](https://www.npmjs.com/package/env-cmd).
2218+
2219+
For example, to create a build environment for a staging environment:
2220+
2221+
1. Create a file called `.env.staging`
2222+
1. Set environment variables as you would any other `.env` file (e.g. `REACT_APP_API_URL=http://api-staging.example.com`)
2223+
1. Install [env-cmd](https://www.npmjs.com/package/env-cmd)
2224+
```sh
2225+
$ npm install env-cmd --save
2226+
$ # or
2227+
$ yarn add env-cmd
2228+
```
2229+
1. Add a new script to your `package.json`, building with your new environment:
2230+
```json
2231+
{
2232+
"scripts": {
2233+
"build:staging": "env-cmd .env.staging npm run build",
2234+
}
2235+
}
2236+
```
2237+
2238+
Now you can run `npm run build:staging` to build with the staging environment config.
2239+
You can specify other environments in the same way.
2240+
2241+
Variables in `.env.production` will be used as fallback because `NODE_ENV` will always be set to `production` for a build.
2242+
22142243
### [Azure](https://azure.microsoft.com/)
22152244

22162245
See [this](https://medium.com/@to_pe/deploying-create-react-app-on-microsoft-azure-c0f6686a4321) blog post on how to deploy your React app to Microsoft Azure.

0 commit comments

Comments
 (0)