React app
Requires
Quick Start
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.
Usage
Generate a React app
βοΈ Replace $APP_NAME
with the name for your unique app.
as of create-react-app v3, it automatically performs
git init
and an initial commitnpx comes with npm 5.2+ and higher, see instructions for older npm versions
Create the Heroku app
βοΈ Replace $APP_NAME
with the name for your unique app.
This command:
sets the app name & its default URL
https://$APP_NAME.herokuapp.com
sets the app to use this buildpack
configures the
heroku
git remote in the local repo, sogit push heroku master
will push to this new Heroku app.
Deploy β»οΈ
β¦or if you are ever working on a branch other than master
:
βοΈ Replace $BRANCH_NAME
with the name for the current branch.
Visit the app's public URL in your browser
Visit the Heroku Dashboard for the app
Find the app on your dashboard.
Continue Development
Work with your app locally using npm start
. See: create-react-app docs
Then, git commit
your changes & git push heroku master
β»οΈ
Push to Github
Eventually, to share, collaborate, or simply back-up your code, create an empty repo at Github, and then follow the instructions shown on the repo to push an existing repository from the command line.
Testing
Use create-react-app's built-in Jest testing or whatever testing library you prefer.
Minimal app.json
Heroku CI uses app.json
to provision test apps. To support Heroku CI, commit this minimal example app.json
:
Customization
Procfile
Heroku apps may declare what processes are launched for a successful deployment by way of the Procfile
. This buildpack's default process comes from heroku/static
buildpack. (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 process types may be added to run any number of dynos with whatever arbitrary commands you want, and scale each independently.
π¦ 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.
Web server
The web server may be configured via the static buildpack.
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:
Changing the root
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.
Routing
π₯ Client-side routing is supported by default. Any server request that would result in 404 Not Found returns the React app.
π See custom routing w/ the static buildpack.
HTTPS-only
Enforce secure connections by automatically redirecting insecure requests to https://, in static.json
:
Strict transport security (HSTS)
Prevent downgrade attacks with HTTP strict transport security. Add HSTS "headers"
to static.json
.
β οΈ 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
Proxy XHR requests from the React UI in the browser to API backends. Use to prevent same-origin errors when CORS is not supported on the backend.
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
The heroku/static
buildpack (see: π Architecture) provides Proxy Backends configuration to utilize Nginx for high-performance proxies in production.
Add "proxies"
to static.json
:
Then, point the React UI app to a specific backend API:
Proxy for local development
create-react-app itself provides a built-in proxy for development. This may be configured to match the behavior of proxy for deployment.
Add "proxy"
to package.json
:
Replace http://localhost:8000
with the URL to your local or remote backend service.
Environment variables
REACT_APP_*
environment variables are fully supported with this buildpack.
π«π€ Not for secrets. These values may be accessed by anyone who can see the React app.
Set vars for local dev
Requires at least create-react-app 0.7. Earlier versions only support Compile-time.
Create a .env
file that sets a variable per line:
Compile-time vs Runtime
Two versions of variables are supported. In addition to compile-time variables applied during build the app supports variables set at runtime, applied as each web dyno starts-up.
Requirement
never changes for a build
β
β
β
β
ex: REACT_APP_BUILD_VERSION
(static fact about the bundle)
β
β
ex: REACT_APP_API_URL
(transient, external reference)
β
β
Compile-time configuration
Supports all config vars, including REACT_APP_
, NODE_
, NPM_
, & HEROKU_
prefixed variables.
βοΈπ€ 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.
Use Node's process.env
object.
β»οΈ 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:
Runtime configuration
Supports only REACT_APP_
prefixed variables.
π«π€ Not for secrets. These values may be accessed by anyone who can see the React app.
Install the runtime env npm package:
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:
β³οΈ Note this path is a *
glob, selecting multiple files, because as of create-react-app version 2 the bundle is split.
To unset this config and use the default path for create-react-app's bundle, /app/build/static/js/*.js
:
Add-on config vars
π«π€ Be careful not to export secrets. These values may be accessed by anyone who can see the React app.
Use a custom .profile.d
script to make variables set by other components available to the React app by prefixing them with 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
For example, to use the API key for the Filestack JS image uploader:
npm Private Packages
Private modules are supported during build.
Setup your app with a
.npmrc
file following npm's guide for CI/deployment.Set your secret in the
NPM_TOKEN
config var:
Troubleshooting
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 our issues to see if someone else has experienced the same problem.
Search the internet for mentions of the error message and its subject module, e.g.
ENOENT "node-sass"
File a new issue. Please include:
build log output
link to GitHub repo with the source code (if private, grant read access to @mars)
Version compatibility
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.
Releases are tagged, so you can lock an app to a specific version, if that kind of determinism pleases you:
βοΈ Replace v6.0.0
with the desired release tag.
β»οΈ Then, commit & deploy to rebuild on the new buildpack version.
Architecture π
installs
node
, puts on the$PATH
version specified in
package.json
,engines.node
node_modules/
cached between deploymentsproduction build for create-react-app
executes the npm package's build script; create-react-app default is
react-scripts build
exposes all env vars to the build script
generates a production bundle regardless of
NODE_ENV
settingcustomize further with Node.js build configuration
mars/create-react-app-inner-buildpack
sets default web server config unless
static.json
already existsenables runtime environment variables
Nginx web server
configure with
static.json
(see also all static web server config)
π The runtime web
process is the last buildpack's default processes. heroku-buildpack-static uses bin/boot
to launch its Nginx web server. Processes may be customized by committing a Procfile to the app.
General-purpose SPA deployment
Some kind feedback pointed out that this buildpack is not necessarily specific to create-react-app
.
This buildpack can deploy any SPA [single-page app] as long as it meets the following requirements:
npm run build
performs the transpile/bundlingthe file
build/index.html
or the root specified instatic.json
exists at runtime.
Last updated