React app
Last updated
Last updated
Ensure requirements are met, then execute the following in a terminal.
✏️ Replace $APP_NAME
with the name for your unique app.
Once deployed, continue development 🌱
For explanation about these steps, continue reading the next section.
✏️ Replace $APP_NAME
with the name for your unique app.
as of create-react-app v3, it automatically performs git init
and an initial commit
✏️ Replace $APP_NAME
with the name for your unique app.
This command:
…or if you are ever working on a branch other than master
:
✏️ Replace $BRANCH_NAME
with the name for the current branch.
Then, git commit
your changes & git push heroku master
♻️
Minimal app.json
🚦 If replacing the default web process, please check this buildpack's Purpose to avoid misusing this buildpack (such as running a Node server) which can lead to confusing deployment issues.
The config file static.json
should be committed at the root of the repo. It will not be recognized, if this file in a sub-directory
The default static.json
, if it does not exist in the repo, is:
If a different web server "root"
is specified, such as with a highly customized, ejected create-react-app project, then the new bundle location may need to be set to enable runtime environment variables.
🚥 Client-side routing is supported by default. Any server request that would result in 404 Not Found returns the React app.
Enforce secure connections by automatically redirecting insecure requests to https://, in static.json
:
Strict transport security (HSTS)
⚠️ Do not set HSTS headers if the app's hostname will not permantly support HTTPS/SSL/TLS. Once HSTS is set, switching back to plain HTTP will cause security errors in browsers that received the headers, until the max-age is reached. Heroku's built-in herokuapp.com
hostnames are safe to use with HSTS.
max-age
is the number of seconds to enforce HTTPS since the last connection; the example is one-year
Proxy URL prefix
To make calls through the proxy, use relative URL's in the React app which will be proxied to the configured target URL. For the example URL prefix of /api/
, here's how the proxy would rewrite the requests:
You may choose any prefix and may have multiple proxies with different prefixes.
Proxy for deployment
Add "proxies"
to static.json
:
Then, point the React UI app to a specific backend API:
Proxy for local development
Add "proxy"
to package.json
:
Replace http://localhost:8000
with the URL to your local or remote backend service.
🚫🤐 Not for secrets. These values may be accessed by anyone who can see the React app.
Requires at least create-react-app 0.7. Earlier versions only support Compile-time.
Create a .env
file that sets a variable per line:
Requirement
never changes for a build
✓
✓
✓
✓
ex: REACT_APP_BUILD_VERSION
(static fact about the bundle)
✓
✓
ex: REACT_APP_API_URL
(transient, external reference)
✓
✓
☝️🤐 Use secrets carefully. If these values are embedded in the JavaScript bundle, like with REACT_APP_
vars, then they may be accessed by anyone who can see the React app.
♻️ The app must be re-deployed for compiled changes to take effect, because during the build, these references will be replaced with their quoted string value.
Only REACT_APP_
vars are replaced in create-react-app's build. To make any other variables visible to React, they must be prefixed for the build command in package.json
, like this:
🚫🤐 Not for secrets. These values may be accessed by anyone who can see the React app.
Then, require/import it to use the vars within components:
⚠️ Avoid setting backslash escape sequences, such as , into Runtime config vars. Use literal UTF-8 values only; they will be automatically escaped.
Custom bundle location
If the javascript bundle location is customized, such as with an ejected created-react-app project, then the runtime may not be able to locate the bundle to inject runtime variables.
To solve this so the runtime can locate the bundle, set the custom bundle path:
To unset this config and use the default path for create-react-app's bundle, /app/build/static/js/*.js
:
🚫🤐 Be careful not to export secrets. These values may be accessed by anyone who can see the React app.
create .profile.d/000-react-app-exports.sh
make it executable chmod +x .profile.d/000-react-app-exports.sh
add an export
line for each variable:
set-up & use Runtime configuration to access the variables
Private modules are supported during build.
Set your secret in the NPM_TOKEN
config var:
Confirm that your app is using this buildpack:
If it's not using create-react-app-buildpack
, then set it:
…and deploy with the new buildpack:
If the error still occurs, then at least we know it's really using this buildpack! Proceed with troubleshooting.
Check this README to see if it already mentions the issue.
Search the internet for mentions of the error message and its subject module, e.g. ENOENT "node-sass"
build log output
link to GitHub repo with the source code (if private, grant read access to @mars)
This buildpack will never intentionally cause previously deployed apps to become undeployable. Using master as directed in the main instructions will always deploy an app with the most recent version of this buildpack.
♻️ Then, commit & deploy to rebuild on the new buildpack version.
installs node
, puts on the $PATH
node_modules/
cached between deployments
production build for create-react-app
exposes all env vars to the build script
generates a production bundle regardless of NODE_ENV
setting
sets default web server config unless static.json
already exists
enables runtime environment variables
This buildpack can deploy any SPA [single-page app] as long as it meets the following requirements:
npm run build
performs the transpile/bundling
the file build/index.html
or the root specified in static.json
exists at runtime.
comes with npm 5.2+ and higher, see
if is installed locally, the new app will use it instead of
sets the & its default URL https://$APP_NAME.herokuapp.com
sets the app to use this
configures the in the local repo, so git push heroku master
will push to this new Heroku app.
Find the app on .
Work with your app locally using npm start
. See:
Eventually, to share, collaborate, or simply back-up your code, , and then follow the instructions shown on the repo to push an existing repository from the command line.
Use or whatever testing library you prefer.
is supported with minimal configuration. The CI integration is compatible with npm & yarn (see ).
Heroku CI uses to provision test apps. To support Heroku CI, commit this minimal example app.json
:
Heroku apps may declare what processes are launched for a successful deployment by way of the . This buildpack's default process comes from . (See: 🏙 Architecture). The implicit Procfile
to start the static web server is:
To customize an app's processes, commit a Procfile
and deploy. Include web: bin/boot
to launch the default web process, or you may replace the default web process. Additional may be added to run any number of dynos with whatever arbitrary commands you want, and scale each independently.
The web server may be .
👓 See .
Prevent downgrade attacks with . Add HSTS "headers"
to static.json
.
Proxy XHR requests from the React UI in the browser to API backends. Use to prevent same-origin errors when is not supported on the backend.
The (see: 🏙 Architecture) provides to utilize Nginx for high-performance proxies in production.
create-react-app itself provides a built-in . This may be configured to match the behavior of proxy for deployment.
are fully supported with this buildpack.
Two versions of variables are supported. In addition to compile-time variables applied during the app supports variables set at runtime, applied as each web dyno starts-up.
support for
updates immediately when setting new
different values for staging & production (in a )
ex: REACT_APP_DEBUG_ASSERTIONS
()
ex: REACT_APP_FILEPICKER_API_KEY
()
Supports all config vars, including , NODE_
, NPM_
, & HEROKU_
prefixed variables.
Use Node's .
Supports only prefixed variables.
Install the :
✳️ Note this path is a *
glob, selecting multiple files, because as of create-react-app version 2 the .
Use a custom to make variables set by other components available to the React app by prefixing them with REACT_APP_
.
For example, to use the API key for the JS image uploader:
Setup your app with a .npmrc
file following .
Search our to see if someone else has experienced the same problem.
File a new . Please include:
, so you can lock an app to a specific version, if that kind of determinism pleases you:
✏️ Replace v6.0.0
with the desired .
This buildpack combines several buildpacks, specified in , to support zero-configuration deployment on Heroku:
version specified in
; create-react-app default is react-scripts build
customize further with
web server
configure with static.json
(see also )
🚀 The runtime web
process is the 's default processes. heroku-buildpack-static uses to launch its Nginx web server. Processes may be customized by committing a Procfile to the app.
pointed out that this buildpack is not necessarily specific to create-react-app
.