From c8f0a454350516823ae973187a1db9d0ac253916 Mon Sep 17 00:00:00 2001 From: Mars Hall Date: Mon, 26 Jun 2017 11:40:45 -0700 Subject: [PATCH 01/39] =?UTF-8?q?=F0=9F=93=9A=20fix=20HTML=20anchors=20for?= =?UTF-8?q?=20GitHub=20w/=20`#user-content-`=20prefix?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 72 +++++++++++++++++++++++++++++-------------------------- 1 file changed, 38 insertions(+), 34 deletions(-) diff --git a/README.md b/README.md index 892ad23a..ef7acf9e 100644 --- a/README.md +++ b/README.md @@ -3,30 +3,30 @@ Heroku Buildpack for create-react-app Deploy React.js web apps generated with [create-react-app](https://github.com/facebookincubator/create-react-app). Automates deployment with the built-in bundler and serves it up via [Nginx](http://nginx.org/en/). See the [introductory blog post](https://blog.heroku.com/deploying-react-with-zero-configuration) and entry in [Heroku elements](https://elements.heroku.com/buildpacks/mars/create-react-app-buildpack). -* 🚦 [Purpose](#purpose) -* ⚠️ [Requirements](#requires) -* πŸš€ [Quick Start](#quick-start) -* πŸ›  [Usage](#usage) - 1. [Generate a React app](#generate-a-react-app) - 1. [Make it a git repo](#make-it-a-git-repo) - 1. [Create the Heroku app](#create-the-heroku-app) - 1. [Commit & deploy ♻️](#commit--deploy-️) - 1. [Continue Development](#continue-development) -* πŸ‘“ [Customization](#customization) - * [Web server](#web-server) - * [Routing clean URLs](#routing-clean-urls) - * [HTTPS-only](#https-only) - * [Proxy](#proxy) - * [Environment variables](#environment-variables) - * [Set vars on Heroku](#set-vars-on-heroku) - * [Set vars for local dev](#set-vars-for-local-dev) - * [Compile-time vs Runtime](#compile-time-vs-runtime) - * [Compile-time config](#compile-time-configuration) - * [Runtime config](#runtime-configuration) - * [using an Add-on's config](#add-on-config-vars) -* πŸ•΅οΈΒ [Troubleshooting](#troubleshooting) -* πŸ“ [Version compatibility](#version-compatibility) -* πŸ™ [Architecture](#architecture-) +* 🚦 [Purpose](#user-content-purpose) +* ⚠️ [Requirements](#user-content-requires) +* πŸš€ [Quick Start](#user-content-quick-start) +* πŸ›  [Usage](#user-content-usage) + 1. [Generate a React app](#user-content-generate-a-react-app) + 1. [Make it a git repo](#user-content-make-it-a-git-repo) + 1. [Create the Heroku app](#user-content-create-the-heroku-app) + 1. [Commit & deploy ♻️](#user-content-commit--deploy-️) + 1. [Continue Development](#user-content-continue-development) +* πŸ‘“ [Customization](#user-content-customization) + * [Web server](#user-content-web-server) + * [Routing clean URLs](#user-content-routing-clean-urls) + * [HTTPS-only](#user-content-https-only) + * [Proxy](#user-content-proxy) + * [Environment variables](#user-content-environment-variables) + * [Set vars on Heroku](#user-content-set-vars-on-heroku) + * [Set vars for local dev](#user-content-set-vars-for-local-dev) + * [Compile-time vs Runtime](#user-content-compile-time-vs-runtime) + * [Compile-time config](#user-content-compile-time-configuration) + * [Runtime config](#user-content-runtime-configuration) + * [using an Add-on's config](#user-content-add-on-config-vars) +* πŸ•΅οΈΒ [Troubleshooting](#user-content-troubleshooting) +* πŸ“ [Version compatibility](#user-content-version-compatibility) +* πŸ™ [Architecture](#user-content-architecture-) ----- @@ -35,7 +35,11 @@ Purpose **This buildpack deploys a React UI as a static web site.** The [Nginx](http://nginx.org/en/) web server provides optimum performance and security for the runtime. -If your goal is to combine React UI + API (Node, Ruby, Python…) into a *single app*, then this buildpack is not the answer. The simplest combined solution is to use [create-react-app + Node.js server](https://github.com/mars/heroku-cra-node). See also: [create-react-app + Rails 5 server](https://medium.com/superhighfives/a-top-shelf-web-stack-rails-5-api-activeadmin-create-react-app-de5481b7ec0b). +If your goal is to combine React UI + API (Node, Ruby, Python…) into a *single app*, then this buildpack is not the answer. The simplest combined solution is all javascript: + +▢️ **[create-react-app + Node.js server](https://github.com/mars/heroku-cra-node)** on Heroku + +Combination with other languages is possible too, like [create-react-app + Rails 5 server](https://medium.com/superhighfives/a-top-shelf-web-stack-rails-5-api-activeadmin-create-react-app-de5481b7ec0b). Requires -------- @@ -51,7 +55,7 @@ Requires Quick Start ----------- -Ensure [requirements](#requires) are met, then execute the following in a terminal. +Ensure [requirements](#user-content-requires) are met, then execute the following in a terminal. ✏️ *Replace `$APP_NAME` with a name for your unique app.* @@ -86,7 +90,7 @@ cd my-app git init ``` -At this point, this new repo is local, only on your computer. Eventually, you may want to [push to Github](#push-to-github). +At this point, this new repo is local, only on your computer. Eventually, you may want to [push to Github](#user-content-push-to-github). ### Create the Heroku app @@ -235,7 +239,7 @@ REACT_APP_CLIENT_ID=XyzxYzxyZ Two versions of variables are supported. In addition to compile-time variables applied during [build](https://github.com/facebookincubator/create-react-app#npm-run-build) the app supports variables set at runtime, applied as each web dyno starts-up. -Requirement | [Compile-time](#compile-time-configuration) | [Runtime](#runtime-configuration) +Requirement | [Compile-time](#user-content-compile-time-configuration) | [Runtime](#user-content-runtime-configuration) :--- |:---:|:---: never changes for a build | βœ“ | support for [continuous delivery](https://www.heroku.com/continuous-delivery) | | βœ“ @@ -244,7 +248,7 @@ different values for staging & production (in a [pipeline](https://devcenter.her ex: `REACT_APP_BUILD_VERSION` (static fact about the bundle) | βœ“ | ex: `REACT_APP_DEBUG_ASSERTIONS` ([prune code from bundle](https://webpack.github.io/docs/list-of-plugins.html#defineplugin)) | βœ“ | ex: `REACT_APP_API_URL` (transient, external reference) | | βœ“ -ex: `REACT_APP_FILEPICKER_API_KEY` ([Add-on config vars](#add-on-config-vars)) | | βœ“ +ex: `REACT_APP_FILEPICKER_API_KEY` ([Add-on config vars](#user-content-add-on-config-vars)) | | βœ“ ### Compile-time configuration @@ -301,7 +305,7 @@ Use a custom [`.profile.d` script](https://devcenter.heroku.com/articles/buildpa ```bash export REACT_APP_ADDON_CONFIG=${ADDON_CONFIG:-} ``` -1. set-up & use [Runtime configuration](#runtime-configuration) to access the variables +1. set-up & use [Runtime configuration](#user-content-runtime-configuration) to access the variables For example, to use the API key for the [Filestack](https://elements.heroku.com/addons/filepicker) JS image uploader: @@ -323,7 +327,7 @@ Troubleshooting Version compatibility --------------------- -This buildpack will never intentionally cause previously deployed apps to become undeployable. Using master [as directed in the main instructions](#create-the-heroku-app) will always deploy an app with the most recent version of this buildpack. +This buildpack will never intentionally cause previously deployed apps to become undeployable. Using master [as directed in the main instructions](#user-content-create-the-heroku-app) will always deploy an app with the most recent version of this buildpack. [Releases are tagged](https://github.com/mars/create-react-app-buildpack/releases), so you can lock an app to a specific version, if that kind of determinism pleases you: @@ -345,8 +349,8 @@ This buildpack composes several buildpacks (specified in [`.buildpacks`](.buildp * complete Node.js enviroment to support the webpack build * `node_modules` cached between deployments 2. [`mars/create-react-app-inner-buildpack`](https://github.com/mars/create-react-app-inner-buildpack) - * enables [runtime environment variables](#runtime-configuration) - * generates the [default `static.json`](#customization) + * enables [runtime environment variables](#user-content-runtime-configuration) + * generates the [default `static.json`](#user-content-customization) * performs the production build for create-react-app, `npm run build` 3. [`heroku/static` buildpack](https://github.com/heroku/heroku-buildpack-static) * [Nginx](http://nginx.org/en/) web server @@ -360,4 +364,4 @@ This buildpack composes several buildpacks (specified in [`.buildpacks`](.buildp 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`](#customization) exists at runtime. +* the file `build/index.html` or [the root specified in `static.json`](#user-content-customization) exists at runtime. From 16c60e30b164f6e16ee54eddafe466acf7d71306 Mon Sep 17 00:00:00 2001 From: Mars Hall Date: Mon, 26 Jun 2017 11:57:43 -0700 Subject: [PATCH 02/39] =?UTF-8?q?=F0=9F=93=9A=20add=20Procfile=20info;=20c?= =?UTF-8?q?larify=20next=20steps=20after=20Quickstart?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index ef7acf9e..d445c255 100644 --- a/README.md +++ b/README.md @@ -13,6 +13,7 @@ Deploy React.js web apps generated with [create-react-app](https://github.com/fa 1. [Commit & deploy ♻️](#user-content-commit--deploy-️) 1. [Continue Development](#user-content-continue-development) * πŸ‘“ [Customization](#user-content-customization) + * [Procfile](#user-content-procfile) * [Web server](#user-content-web-server) * [Routing clean URLs](#user-content-routing-clean-urls) * [HTTPS-only](#user-content-https-only) @@ -70,7 +71,10 @@ git push heroku master heroku open ``` -For explanation about these steps, continue reading the next section. +Once deployed, [continue development](#user-content-continue-development) 🌱 + +For explanation about these steps, continue reading the [next section](#user-content-usage). + Usage ----- @@ -138,6 +142,16 @@ Eventually, to share, collaborate, or simply back-up your code, [create an empty Customization ------------- +### Procfile + +Heroku apps declared what processes are launched for a successful deployment by way of the [`Procfile`](https://devcenter.heroku.com/articles/procfile). This buildpack's default process comes from [`heroku/static` buildpack](https://github.com/heroku/heroku-buildpack-static). (See: πŸ™ [Architecture](#user-content-architecture-)). The implicit `Procfile` to start the static web server is: + +``` +web: bin/boot +``` + +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](https://devcenter.heroku.com/articles/procfile#declaring-process-types) may be added to run any number of dynos with whatever arbitrary commands you want, and scale each independently. + ### Web server The web server may be [configured via the static buildpack](https://github.com/heroku/heroku-buildpack-static#configuration). From 63bd14a98e430df6ebdc7c20ffc4050679f631ac Mon Sep 17 00:00:00 2001 From: Mars Hall Date: Mon, 26 Jun 2017 12:09:21 -0700 Subject: [PATCH 03/39] =?UTF-8?q?=F0=9F=93=9A=20improve=20`static.json`=20?= =?UTF-8?q?examples?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index d445c255..42466e81 100644 --- a/README.md +++ b/README.md @@ -185,6 +185,7 @@ Enforce secure connections by automatically redirecting insecure requests to **h ```json { + "root": "build/", "https_only": true } ``` @@ -193,6 +194,8 @@ Prevent downgrade attacks with [HTTP strict transport security](https://develope ```json { + "root": "build/", + "https_only": true, "headers": { "/**": { "Strict-Transport-Security": "max-age=7776000" @@ -211,6 +214,7 @@ Configure using [Proxy Backends from the static site buildpack](https://github.c ```json { + "root": "build/", "proxies": { "/api/": { "origin": "${API_URL}" From d72583fbd061c827cfa82fe139094cb9815be53b Mon Sep 17 00:00:00 2001 From: Mars Hall Date: Mon, 26 Jun 2017 13:32:10 -0700 Subject: [PATCH 04/39] =?UTF-8?q?=F0=9F=93=9A=20link=20to=20Architecture?= =?UTF-8?q?=20from=20Purpose?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 42466e81..ffb49f54 100644 --- a/README.md +++ b/README.md @@ -34,7 +34,7 @@ Deploy React.js web apps generated with [create-react-app](https://github.com/fa Purpose ------- -**This buildpack deploys a React UI as a static web site.** The [Nginx](http://nginx.org/en/) web server provides optimum performance and security for the runtime. +**This buildpack deploys a React UI as a static web site.** The [Nginx](http://nginx.org/en/) web server provides optimum performance and security for the runtime. See [Architecture](#user-content-architecture-) for details. If your goal is to combine React UI + API (Node, Ruby, Python…) into a *single app*, then this buildpack is not the answer. The simplest combined solution is all javascript: From 4efaba7fe84e6a4658b1e947b8341cccc5a3f4e7 Mon Sep 17 00:00:00 2001 From: Mars Hall Date: Wed, 28 Jun 2017 17:15:48 -0700 Subject: [PATCH 05/39] Testpack API support (#57) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Testpack API support including NODE_ENV=test override. * Hint to the test runner to exit when complete instead of watching. * πŸ“š testing and support for Heroku CI * Format build log * πŸ“š minimal `app.json` for CI --- README.md | 21 +++++++++++++++++++++ bin/compile | 15 ++++++++++++--- bin/test | 15 +++++++++++++++ bin/test-compile | 7 +++++++ 4 files changed, 55 insertions(+), 3 deletions(-) create mode 100755 bin/test create mode 100755 bin/test-compile diff --git a/README.md b/README.md index ffb49f54..2a5bd339 100644 --- a/README.md +++ b/README.md @@ -12,6 +12,8 @@ Deploy React.js web apps generated with [create-react-app](https://github.com/fa 1. [Create the Heroku app](#user-content-create-the-heroku-app) 1. [Commit & deploy ♻️](#user-content-commit--deploy-️) 1. [Continue Development](#user-content-continue-development) + 1. [Push to Github](#user-content-push-to-github) + 1. [Testing](#user-content-testing) * πŸ‘“ [Customization](#user-content-customization) * [Procfile](#user-content-procfile) * [Web server](#user-content-web-server) @@ -138,6 +140,25 @@ Then, commit & deploy ♻️ Eventually, to share, collaborate, or simply back-up your code, [create an empty repo at Github](https://github.com/new), 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](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#user-content-running-tests) or whatever testing library you prefer. + +As long as tests can be run with `npm test` (like the built-in Jest testing) then it will work effortlessly with [Heroku CI](https://devcenter.heroku.com/articles/heroku-ci). + +#### Minimal `app.json` + +Heroku CI uses [`app.json`](https://devcenter.heroku.com/articles/app-json-schema) to provision test apps. To enable Heroku CI, commit this minimal example `app.json`: + +```json +{ + "buildpacks": [ + { + "url": "https://github.com/mars/create-react-app-buildpack" + } + ] +} +``` Customization ------------- diff --git a/bin/compile b/bin/compile index 860f7469..efa4c76b 100755 --- a/bin/compile +++ b/bin/compile @@ -31,11 +31,20 @@ branch="" dir=$(mktemp -t buildpackXXXXX) rm -rf $dir +echo "-----> Configure create-react-app build environment" # Set env vars for the inner buildpacks in `.buildpacks` -# * install build tooling (devDependencies) with npm & Yarn -# * used only during compile, as the runtime is a static web server +# * during compile, install build tooling (devDependencies) with npm & Yarn +# * in runtime, NODE_ENV is not used (this buildpack launches a static web server) export NPM_CONFIG_PRODUCTION=false -export NODE_ENV=development +INHERITED_NODE_ENV="${NODE_ENV:-development}" +if [ "$INHERITED_NODE_ENV" = "production" ] + then + echo ' Setting `NODE_ENV=development` to install dependencies for `npm build`' + export NODE_ENV=development +else + echo " Using \`NODE_ENV=${INHERITED_NODE_ENV}\`" + export NODE_ENV="${INHERITED_NODE_ENV}" +fi echo "=====> Downloading Buildpack: $url" diff --git a/bin/test b/bin/test new file mode 100755 index 00000000..f0c90e59 --- /dev/null +++ b/bin/test @@ -0,0 +1,15 @@ +#!/usr/bin/env bash +# bin/test-compile BUILD_DIR CACHE_DIR ENV_DIR + +# Hint to the test runner to exit when complete instead of watching. +export CI=true + +# Test runner copied from Node buildpack: +# https://github.com/heroku/heroku-buildpack-nodejs/blob/master/bin/test + +BUILD_DIR=${1:-} +if yarn --version > /dev/null 2>&1; then + cd "$BUILD_DIR" && yarn test +else + cd "$BUILD_DIR" && npm test +fi \ No newline at end of file diff --git a/bin/test-compile b/bin/test-compile new file mode 100755 index 00000000..e4e10c4f --- /dev/null +++ b/bin/test-compile @@ -0,0 +1,7 @@ +#!/usr/bin/env bash +# bin/test-compile BUILD_DIR CACHE_DIR ENV_DIR + +# Test compiler copied from Node buildpack: +# https://github.com/heroku/heroku-buildpack-nodejs/blob/master/bin/test-compile + +NODE_ENV=test "$(dirname ${0:-})/compile" "$1" "$2" "$3" \ No newline at end of file From c05a456643f07f6b94fbf47513caf5e6cdc0a3a1 Mon Sep 17 00:00:00 2001 From: Mars Hall Date: Thu, 29 Jun 2017 07:32:28 -0700 Subject: [PATCH 06/39] =?UTF-8?q?=F0=9F=93=9A=20another=20contextual=20Pur?= =?UTF-8?q?pose=20link?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 2a5bd339..2da49fb0 100644 --- a/README.md +++ b/README.md @@ -173,6 +173,8 @@ web: bin/boot 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](https://devcenter.heroku.com/articles/procfile#declaring-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](#user-content-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](https://github.com/heroku/heroku-buildpack-static#configuration). From 5fbc97438a0cf8a6270bbb5e64257eb0b188438c Mon Sep 17 00:00:00 2001 From: Mars Hall Date: Fri, 30 Jun 2017 11:09:12 -0700 Subject: [PATCH 07/39] =?UTF-8?q?=F0=9F=93=9A=20document=20proxy=20for=20l?= =?UTF-8?q?ocal=20development=20to=20match=20deployment?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 27 ++++++++++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 2da49fb0..b51c3e80 100644 --- a/README.md +++ b/README.md @@ -233,7 +233,11 @@ Prevent downgrade attacks with [HTTP strict transport security](https://develope Proxy XHR requests from the React UI in the browser to API backends. Prevent same-origin errors when [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS) is not available on the backend. -Configure using [Proxy Backends from the static site buildpack](https://github.com/heroku/heroku-buildpack-static/blob/master/README.md#proxy-backends). Add `"proxies"` to `static.json`: +#### Proxy for deployment + +The [`heroku/static` buildpack](https://github.com/heroku/heroku-buildpack-static) (see: πŸ™ [Architecture](#user-content-architecture-)) provides [Proxy Backends configuration](https://github.com/heroku/heroku-buildpack-static/blob/master/README.md#proxy-backends) to utilize Nginx for high-performance proxies in production. + +Add `"proxies"` to `static.json`: ```json { @@ -252,6 +256,27 @@ Then, point the React UI app to a specific backend API: heroku config:set API_URL="https://api.example.com" ``` +#### Proxy for local development + +create-react-app itself provides a built-in [proxy for development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#user-content-proxying-api-requests-in-development). This may be configured to match the behavior of [proxy for deployment](#user-content-proxy-for-deployment). + +Add `"proxy"` to `package.json`: + +```json +{ + "proxy": { + "/api": { + "target": "http://localhost:8000", + "pathRewrite": { + "^/api": "/" + } + } + } +} +``` + +Replace `http://localhost:8000` with the URL to your local or remote backend service. + ### Environment variables From 7af93440b8f57a1d1ffe6e56383738197d9f1c2d Mon Sep 17 00:00:00 2001 From: Mars Hall Date: Wed, 5 Jul 2017 10:16:46 -0700 Subject: [PATCH 08/39] =?UTF-8?q?=F0=9F=93=9A=20revs=20to=20Proxy=20&=20Te?= =?UTF-8?q?sting=20sections?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 25 ++++++++++++++++++++----- 1 file changed, 20 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index b51c3e80..e69c407b 100644 --- a/README.md +++ b/README.md @@ -142,13 +142,13 @@ Eventually, to share, collaborate, or simply back-up your code, [create an empty ### Testing -Use [create-react-app's built-in Jest testing](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#user-content-running-tests) or whatever testing library you prefer. +Use [create-react-app's built-in Jest testing](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#user-content-running-tests) or whatever testing library you prefer. -As long as tests can be run with `npm test` (like the built-in Jest testing) then it will work effortlessly with [Heroku CI](https://devcenter.heroku.com/articles/heroku-ci). +[Heroku CI](https://devcenter.heroku.com/articles/heroku-ci) is supported with minimal configuration. The CI integration is compatible with npm & yarn (see [`bin/test`](bin/test)). #### Minimal `app.json` -Heroku CI uses [`app.json`](https://devcenter.heroku.com/articles/app-json-schema) to provision test apps. To enable Heroku CI, commit this minimal example `app.json`: +Heroku CI uses [`app.json`](https://devcenter.heroku.com/articles/app-json-schema) to provision test apps. To support Heroku CI, commit this minimal example `app.json`: ```json { @@ -231,7 +231,21 @@ Prevent downgrade attacks with [HTTP strict transport security](https://develope ### Proxy -Proxy XHR requests from the React UI in the browser to API backends. Prevent same-origin errors when [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS) is not available on the backend. +Proxy XHR requests from the React UI in the browser to API backends. Use to prevent same-origin errors when [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_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: + +``` +/api/search-items + β†’ https://backend.example.com/search-items + +/api/users/me + β†’ https://backend.example.com/users/me +``` + +You may choose any prefix and may have multiple proxies with different prefixes. #### Proxy for deployment @@ -253,7 +267,7 @@ Add `"proxies"` to `static.json`: Then, point the React UI app to a specific backend API: ```bash -heroku config:set API_URL="https://api.example.com" +heroku config:set API_URL="https://backend.example.com" ``` #### Proxy for local development @@ -422,6 +436,7 @@ This buildpack composes several buildpacks (specified in [`.buildpacks`](.buildp * [Nginx](http://nginx.org/en/) web server * handy static website & SPA (single-page app) [customization options](https://github.com/heroku/heroku-buildpack-static#configuration) +Runtime processes are launched based on the last buildpack's [Procfile](#user-content-procfile). ### General-purpose SPA deployment From 16eccf5773b566c215ffe2f51bc3361784de0fee Mon Sep 17 00:00:00 2001 From: Mars Hall Date: Mon, 4 Sep 2017 10:00:56 -0700 Subject: [PATCH 09/39] =?UTF-8?q?=F0=9F=93=9A=20clarify=20architecture=20d?= =?UTF-8?q?ocs=20=F0=9F=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index e69c407b..efff6c87 100644 --- a/README.md +++ b/README.md @@ -423,20 +423,24 @@ heroku buildpacks:set https://github.com/mars/create-react-app-buildpack.git#v1. Architecture πŸ™ ------------ -This buildpack composes several buildpacks (specified in [`.buildpacks`](.buildpacks)) to support **no-configuration deployment** on Heroku: +This buildpack combines several buildpacks, specified in [`.buildpacks`](.buildpacks), to support **zero-configuration deployment** on Heroku: 1. [`heroku/nodejs` buildpack](https://github.com/heroku/heroku-buildpack-nodejs) - * complete Node.js enviroment to support the webpack build - * `node_modules` cached between deployments + * installs complete `node`, puts it on the `$PATH` + * version specified in [`package.json`, `engines.node`](https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version) + * `node_modules/` cached between deployments 2. [`mars/create-react-app-inner-buildpack`](https://github.com/mars/create-react-app-inner-buildpack) - * enables [runtime environment variables](#user-content-runtime-configuration) + * production build for create-react-app, `npm run build` * generates the [default `static.json`](#user-content-customization) - * performs the production build for create-react-app, `npm run build` + * enables [runtime environment variables](#user-content-runtime-configuration) 3. [`heroku/static` buildpack](https://github.com/heroku/heroku-buildpack-static) * [Nginx](http://nginx.org/en/) web server - * handy static website & SPA (single-page app) [customization options](https://github.com/heroku/heroku-buildpack-static#configuration) + * launches via `bin/boot` + * configure via `static.json`; see [options specific to this buildpack](#user-conter-web-server) and [all options](https://github.com/heroku/heroku-buildpack-static#configuration) + +Runtime processes are launched based on the last buildpack's default processes, the static buildpack's Nginx web server. Processes may be customized with a [Procfile](#user-content-procfile). + -Runtime processes are launched based on the last buildpack's [Procfile](#user-content-procfile). ### General-purpose SPA deployment From 95bb7fbdbbda49de1873cd3324a16773597f141d Mon Sep 17 00:00:00 2001 From: Mars Hall Date: Mon, 4 Sep 2017 10:06:24 -0700 Subject: [PATCH 10/39] =?UTF-8?q?=F0=9F=93=9A=20clarify=20architecture=20d?= =?UTF-8?q?ocs=20=F0=9F=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index efff6c87..b4e428cb 100644 --- a/README.md +++ b/README.md @@ -430,18 +430,17 @@ This buildpack combines several buildpacks, specified in [`.buildpacks`](.buildp * version specified in [`package.json`, `engines.node`](https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version) * `node_modules/` cached between deployments 2. [`mars/create-react-app-inner-buildpack`](https://github.com/mars/create-react-app-inner-buildpack) - * production build for create-react-app, `npm run build` - * generates the [default `static.json`](#user-content-customization) - * enables [runtime environment variables](#user-content-runtime-configuration) + * production build for create-react-app + * generates the [default `static.json`](#user-content-web-server) + * enables [runtime environment variables](#user-content-environment-variables) 3. [`heroku/static` buildpack](https://github.com/heroku/heroku-buildpack-static) * [Nginx](http://nginx.org/en/) web server * launches via `bin/boot` - * configure via `static.json`; see [options specific to this buildpack](#user-conter-web-server) and [all options](https://github.com/heroku/heroku-buildpack-static#configuration) + * configure via `static.json`; see [options specific to this buildpack](#user-content-web-server) and [all options](https://github.com/heroku/heroku-buildpack-static#configuration) Runtime processes are launched based on the last buildpack's default processes, the static buildpack's Nginx web server. Processes may be customized with a [Procfile](#user-content-procfile). - ### General-purpose SPA deployment [Some kind feedback](https://github.com/mars/create-react-app-buildpack/issues/2) pointed out that this buildpack is not necessarily specific to `create-react-app`. From a534f3ab14042a4f799b993b45548df4cef81a2e Mon Sep 17 00:00:00 2001 From: Mars Hall Date: Mon, 4 Sep 2017 10:11:29 -0700 Subject: [PATCH 11/39] =?UTF-8?q?=F0=9F=93=9A=20add=20buildpack=20check=20?= =?UTF-8?q?to=20Troubleshooting?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/README.md b/README.md index b4e428cb..e0bafef2 100644 --- a/README.md +++ b/README.md @@ -396,6 +396,26 @@ export REACT_APP_FILEPICKER_API_KEY=${FILEPICKER_API_KEY:-} Troubleshooting --------------- +1. Confirm that your app is using this buildpack: + + ```bash + heroku buildpacks + ``` + + If it's not using `create-react-app-buildpack`, then set it: + + ```bash + heroku buildpacks:set https://github.com/mars/create-react-app-buildpack.git + ``` + + …and deploy with the new buildpack: + + ```bash + git commit --allow-empty -m 'Switch to create-react-app-buildpack' + git push heroku master + ``` + + If the error still occurs, then at least we know it's really using this buildpack! Proceed with troubleshooting. 1. Check this README to see if it already mentions the issue. 1. Search our [issues](https://github.com/mars/create-react-app-buildpack/issues?utf8=βœ“&q=is%3Aissue%20) to see if someone else has experienced the same problem. 1. Search the internet for mentions of the error message and its subject module, e.g. `ENOENT "node-sass"` From 63212a5cb41fc96e87f19a35b78794fe95809b24 Mon Sep 17 00:00:00 2001 From: Mars Hall Date: Mon, 4 Sep 2017 10:14:13 -0700 Subject: [PATCH 12/39] =?UTF-8?q?=F0=9F=93=9A=20fix=20typo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e0bafef2..f63e28e9 100644 --- a/README.md +++ b/README.md @@ -165,7 +165,7 @@ Customization ### Procfile -Heroku apps declared what processes are launched for a successful deployment by way of the [`Procfile`](https://devcenter.heroku.com/articles/procfile). This buildpack's default process comes from [`heroku/static` buildpack](https://github.com/heroku/heroku-buildpack-static). (See: πŸ™ [Architecture](#user-content-architecture-)). The implicit `Procfile` to start the static web server is: +Heroku apps may declare what processes are launched for a successful deployment by way of the [`Procfile`](https://devcenter.heroku.com/articles/procfile). This buildpack's default process comes from [`heroku/static` buildpack](https://github.com/heroku/heroku-buildpack-static). (See: πŸ™ [Architecture](#user-content-architecture-)). The implicit `Procfile` to start the static web server is: ``` web: bin/boot From 5ded51e2e15c335a509c6d819834b3fe7419565a Mon Sep 17 00:00:00 2001 From: Mars Hall Date: Mon, 26 Mar 2018 13:14:18 -0700 Subject: [PATCH 13/39] Support for npm Private Modules (#96) --- .buildpacks | 2 +- README.md | 12 ++++++++++++ 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/.buildpacks b/.buildpacks index b2b0e4e7..d525ec57 100644 --- a/.buildpacks +++ b/.buildpacks @@ -1,3 +1,3 @@ https://github.com/heroku/heroku-buildpack-nodejs.git -https://github.com/mars/create-react-app-inner-buildpack.git#v3.0.0 +https://github.com/mars/create-react-app-inner-buildpack.git#v4.0.0 https://github.com/heroku/heroku-buildpack-static.git diff --git a/README.md b/README.md index f63e28e9..e1ee6e58 100644 --- a/README.md +++ b/README.md @@ -27,6 +27,7 @@ Deploy React.js web apps generated with [create-react-app](https://github.com/fa * [Compile-time config](#user-content-compile-time-configuration) * [Runtime config](#user-content-runtime-configuration) * [using an Add-on's config](#user-content-add-on-config-vars) + * [npm Private Packages](#user-content-npm-private-packages) * πŸ•΅οΈΒ [Troubleshooting](#user-content-troubleshooting) * πŸ“ [Version compatibility](#user-content-version-compatibility) * πŸ™ [Architecture](#user-content-architecture-) @@ -393,6 +394,17 @@ For example, to use the API key for the [Filestack](https://elements.heroku.com/ export REACT_APP_FILEPICKER_API_KEY=${FILEPICKER_API_KEY:-} ``` +npm Private Packages +------------------- +Private modules are supported during build. + +1. Setup your app with a `.npmrc` file following [npm's guide for CI/deployment](https://docs.npmjs.com/private-modules/ci-server-config). +1. Set your secret in the `NPM_TOKEN` config var: + + ```bash + heroku config:set NPM_TOKEN=xxxxx + ``` + Troubleshooting --------------- From 6b6a152c16ef40081d3169bf21834f53dd69038e Mon Sep 17 00:00:00 2001 From: Mars Hall Date: Sun, 12 Aug 2018 14:38:50 -0700 Subject: [PATCH 14/39] =?UTF-8?q?=F0=9F=93=9A=20clarify=20`NODE=5FENV`=20&?= =?UTF-8?q?=20other=20architecture=20details?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index e1ee6e58..1a934776 100644 --- a/README.md +++ b/README.md @@ -458,19 +458,24 @@ Architecture πŸ™ This buildpack combines several buildpacks, specified in [`.buildpacks`](.buildpacks), to support **zero-configuration deployment** on Heroku: 1. [`heroku/nodejs` buildpack](https://github.com/heroku/heroku-buildpack-nodejs) - * installs complete `node`, puts it on the `$PATH` + * installs `node`, puts on the `$PATH` * version specified in [`package.json`, `engines.node`](https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version) * `node_modules/` cached between deployments + * `NODE_ENV` at buildtime: + * defaults to `NODE_ENV=development` to install the build tooling of create-react-app's dev dependencies, like `react-scripts` + * honors specific setting of `NODE_ENV`, like `NODE_ENV=test` for [automated testing](#user-content-testing) in [`bin/test`](bin/test) + * but forces `NODE_ENV=production` to be `development` to ensure dev dependencies are available for build 2. [`mars/create-react-app-inner-buildpack`](https://github.com/mars/create-react-app-inner-buildpack) * production build for create-react-app - * generates the [default `static.json`](#user-content-web-server) + * executes the package's build script; create-react-app default is `react-scripts build` + * generates a production bundle regardless of `NODE_ENV` setting + * sets default [web server config](#user-content-web-server) unless `static.json` already exists * enables [runtime environment variables](#user-content-environment-variables) 3. [`heroku/static` buildpack](https://github.com/heroku/heroku-buildpack-static) * [Nginx](http://nginx.org/en/) web server - * launches via `bin/boot` - * configure via `static.json`; see [options specific to this buildpack](#user-content-web-server) and [all options](https://github.com/heroku/heroku-buildpack-static#configuration) + * [configure with `static.json`](#user-content-web-server) (see [config static web server](https://github.com/heroku/heroku-buildpack-static#user-content-configuration) -Runtime processes are launched based on the last buildpack's default processes, the static buildpack's Nginx web server. Processes may be customized with a [Procfile](#user-content-procfile). +πŸš€ The runtime `web` process is the [last buildpack](https://github.com/mars/create-react-app-buildpack/blob/master/.buildpacks)'s default processes. heroku-buildpack-static uses [`bin/boot`](https://github.com/heroku/heroku-buildpack-static/blob/master/bin/release) to launch its Nginx web server. Processes may be customized by committing a [Procfile](#user-content-procfile) to the app. ### General-purpose SPA deployment From 5472f8d5d16f2008e57d9c60dcfc3aafda4d50c4 Mon Sep 17 00:00:00 2001 From: Mars Hall Date: Sun, 12 Aug 2018 14:46:30 -0700 Subject: [PATCH 15/39] =?UTF-8?q?=F0=9F=93=9A=20clarify=20`NODE=5FENV`=20&?= =?UTF-8?q?=20other=20architecture=20details,=20pt=202?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 1a934776..02478a3c 100644 --- a/README.md +++ b/README.md @@ -463,7 +463,7 @@ This buildpack combines several buildpacks, specified in [`.buildpacks`](.buildp * `node_modules/` cached between deployments * `NODE_ENV` at buildtime: * defaults to `NODE_ENV=development` to install the build tooling of create-react-app's dev dependencies, like `react-scripts` - * honors specific setting of `NODE_ENV`, like `NODE_ENV=test` for [automated testing](#user-content-testing) in [`bin/test`](bin/test) + * honors specific setting of `NODE_ENV`, like `NODE_ENV=test` for [automated testing](#user-content-testing) in [`bin/test`](bin/test-compile) * but forces `NODE_ENV=production` to be `development` to ensure dev dependencies are available for build 2. [`mars/create-react-app-inner-buildpack`](https://github.com/mars/create-react-app-inner-buildpack) * production build for create-react-app @@ -473,7 +473,7 @@ This buildpack combines several buildpacks, specified in [`.buildpacks`](.buildp * enables [runtime environment variables](#user-content-environment-variables) 3. [`heroku/static` buildpack](https://github.com/heroku/heroku-buildpack-static) * [Nginx](http://nginx.org/en/) web server - * [configure with `static.json`](#user-content-web-server) (see [config static web server](https://github.com/heroku/heroku-buildpack-static#user-content-configuration) + * [configure with `static.json`](#user-content-web-server) (see also [all static web server config](https://github.com/heroku/heroku-buildpack-static#user-content-configuration)) πŸš€ The runtime `web` process is the [last buildpack](https://github.com/mars/create-react-app-buildpack/blob/master/.buildpacks)'s default processes. heroku-buildpack-static uses [`bin/boot`](https://github.com/heroku/heroku-buildpack-static/blob/master/bin/release) to launch its Nginx web server. Processes may be customized by committing a [Procfile](#user-content-procfile) to the app. From a27f4363da37f331a9fc6dee4888e0a622003d28 Mon Sep 17 00:00:00 2001 From: Joe Kutner Date: Wed, 29 Aug 2018 16:40:48 -0500 Subject: [PATCH 16/39] Update README.md (#120) I update the readme to use the Buildpack Registry short-name --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 02478a3c..e836b151 100644 --- a/README.md +++ b/README.md @@ -67,7 +67,7 @@ Ensure [requirements](#user-content-requires) are met, then execute the followin create-react-app $APP_NAME cd $APP_NAME git init -heroku create $APP_NAME --buildpack https://github.com/mars/create-react-app-buildpack.git +heroku create $APP_NAME --buildpack mars/create-react-app git add . git commit -m "Start with create-react-app" git push heroku master @@ -102,7 +102,7 @@ At this point, this new repo is local, only on your computer. Eventually, you ma ### Create the Heroku app ```bash -heroku create $APP_NAME --buildpack https://github.com/mars/create-react-app-buildpack.git +heroku create $APP_NAME --buildpack mars/create-react-app ``` ✏️ *Replace `$APP_NAME` with a name for your unique app.* @@ -155,7 +155,7 @@ Heroku CI uses [`app.json`](https://devcenter.heroku.com/articles/app-json-schem { "buildpacks": [ { - "url": "https://github.com/mars/create-react-app-buildpack" + "url": "mars/create-react-app" } ] } @@ -417,7 +417,7 @@ Troubleshooting If it's not using `create-react-app-buildpack`, then set it: ```bash - heroku buildpacks:set https://github.com/mars/create-react-app-buildpack.git + heroku buildpacks:set mars/create-react-app ``` …and deploy with the new buildpack: From b9040a5cf82d943d90856a615ee0b3c76f7325b4 Mon Sep 17 00:00:00 2001 From: Mars Hall Date: Wed, 29 Aug 2018 15:14:35 -0700 Subject: [PATCH 17/39] Support for custom bundle location via `JS_RUNTIME_TARGET_BUNDLE` (#117) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Support for custom bundle location via `JS_RUNTIME_TARGET_BUNDLE` * πŸ“š about custom bundle location * πŸ“š how to unset custom bundle path * Upgrade to inner buildpack with improved custom bundle UX --- .buildpacks | 2 +- README.md | 20 ++++++++++++++++++++ 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/.buildpacks b/.buildpacks index d525ec57..f8ce2aa9 100644 --- a/.buildpacks +++ b/.buildpacks @@ -1,3 +1,3 @@ https://github.com/heroku/heroku-buildpack-nodejs.git -https://github.com/mars/create-react-app-inner-buildpack.git#v4.0.0 +https://github.com/mars/create-react-app-inner-buildpack.git#v5.1.0 https://github.com/heroku/heroku-buildpack-static.git diff --git a/README.md b/README.md index e836b151..5fc3d776 100644 --- a/README.md +++ b/README.md @@ -186,6 +186,10 @@ The default `static.json`, if it does not exist in the repo, is: { "root": "build/" } ``` +### 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](#user-content-custom-bundle-location). + ### Routing clean URLs [React Router](https://github.com/ReactTraining/react-router) (not included) may easily use hash-based URLs like `https://example.com/index.html#/users/me/edit`. This is nice & easy when getting started with local development, but for a public app you probably want real URLs like `https://example.com/users/me/edit`. @@ -373,6 +377,22 @@ class App extends Component { ⚠️ *Avoid setting backslash escape sequences, such as `\n`, 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: + +```bash +heroku config:set JS_RUNTIME_TARGET_BUNDLE=/app/my/custom/path/js/main.*.js +``` + +To unset this config and use the default path for **create-react-app**'s bundle, `/app/build/static/js/main.*.js`: + +```bash +heroku config:unset JS_RUNTIME_TARGET_BUNDLE +``` + ### Add-on config vars 🀐 *Be careful not to export secrets. These values may be accessed by anyone who can see the React app.* From 746eed2a6ccdfdf2ed90fdc06fcb31d2bb33e5cf Mon Sep 17 00:00:00 2001 From: Mars Hall Date: Fri, 31 Aug 2018 10:56:26 -0700 Subject: [PATCH 18/39] =?UTF-8?q?=F0=9F=93=9A=20TOC=20entry=20for=20"Custo?= =?UTF-8?q?m=20bundle=20location"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 5fc3d776..822c0886 100644 --- a/README.md +++ b/README.md @@ -26,6 +26,7 @@ Deploy React.js web apps generated with [create-react-app](https://github.com/fa * [Compile-time vs Runtime](#user-content-compile-time-vs-runtime) * [Compile-time config](#user-content-compile-time-configuration) * [Runtime config](#user-content-runtime-configuration) + * [Custom bundle location](#user-content-custom-bundle-location) * [using an Add-on's config](#user-content-add-on-config-vars) * [npm Private Packages](#user-content-npm-private-packages) * πŸ•΅οΈΒ [Troubleshooting](#user-content-troubleshooting) From 0a48e8ef5b6d1b0de84121bcc91a4ca82b6619cb Mon Sep 17 00:00:00 2001 From: Mars Hall Date: Tue, 4 Sep 2018 08:31:52 -0700 Subject: [PATCH 19/39] =?UTF-8?q?=F0=9F=93=9A=20clarify=20static.json=20at?= =?UTF-8?q?=20root=20of=20repo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 822c0886..99f850b6 100644 --- a/README.md +++ b/README.md @@ -181,6 +181,8 @@ To customize an app's processes, commit a `Procfile` and deploy. Include `web: b The web server may be [configured via the static buildpack](https://github.com/heroku/heroku-buildpack-static#configuration). +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: ```json @@ -195,7 +197,7 @@ If a different web server `"root"` is specified, such as with a highly customize [React Router](https://github.com/ReactTraining/react-router) (not included) may easily use hash-based URLs like `https://example.com/index.html#/users/me/edit`. This is nice & easy when getting started with local development, but for a public app you probably want real URLs like `https://example.com/users/me/edit`. -Create a `static.json` file to configure the web server for clean [`browserHistory` with React Router v3](https://github.com/ReactTraining/react-router/blob/v3/docs/guides/Histories.md#browserhistory) & [`BrowserRouter` with v4](https://reacttraining.com/react-router/web/api/BrowserRouter): +Create a `static.json` file at the root of the repo to configure the web server for clean [`browserHistory` with React Router v3](https://github.com/ReactTraining/react-router/blob/v3/docs/guides/Histories.md#browserhistory) & [`BrowserRouter` with v4](https://reacttraining.com/react-router/web/api/BrowserRouter): ```json { From db68d9b75ff24f1dd1949c2dea607c667f67573f Mon Sep 17 00:00:00 2001 From: Mars Hall Date: Wed, 5 Sep 2018 16:24:14 -0700 Subject: [PATCH 20/39] =?UTF-8?q?=F0=9F=93=9A=20update=20CRA=20link,=20use?= =?UTF-8?q?=20npx,=20clarify=20pushing=20from=20a=20branch?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 31 ++++++++++++++++++++----------- 1 file changed, 20 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 99f850b6..94b9dd8a 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ Heroku Buildpack for create-react-app ===================================== -Deploy React.js web apps generated with [create-react-app](https://github.com/facebookincubator/create-react-app). Automates deployment with the built-in bundler and serves it up via [Nginx](http://nginx.org/en/). See the [introductory blog post](https://blog.heroku.com/deploying-react-with-zero-configuration) and entry in [Heroku elements](https://elements.heroku.com/buildpacks/mars/create-react-app-buildpack). +Deploy React.js web apps generated with [create-react-app](https://github.com/facebook/create-react-app). Automates deployment with the built-in bundler and serves it up via [Nginx](http://nginx.org/en/). See the [introductory blog post](https://blog.heroku.com/deploying-react-with-zero-configuration) and entry in [Heroku elements](https://elements.heroku.com/buildpacks/mars/create-react-app-buildpack). * 🚦 [Purpose](#user-content-purpose) * ⚠️ [Requirements](#user-content-requires) @@ -54,18 +54,16 @@ Requires * [a free account](https://signup.heroku.com) * [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) * [Node.js](https://nodejs.org) -* [create-react-app](https://github.com/facebookincubator/create-react-app) - * `npm install -g create-react-app` Quick Start ----------- Ensure [requirements](#user-content-requires) are met, then execute the following in a terminal. -✏️ *Replace `$APP_NAME` with a name for your unique app.* +✏️ *Replace `$APP_NAME` with the name for your unique app.* ```bash -create-react-app $APP_NAME +npx create-react-app $APP_NAME cd $APP_NAME git init heroku create $APP_NAME --buildpack mars/create-react-app @@ -85,11 +83,14 @@ Usage ### Generate a React app +✏️ *Replace `$APP_NAME` with the name for your unique app.* + ```bash -create-react-app my-app -cd my-app +npx create-react-app $APP_NAME +cd $APP_NAME ``` +* [npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f) * If [yarn](https://yarnpkg.com) is installed locally, the new app will use it instead of [npm](https://www.npmjs.com). ### Make it a git repo @@ -102,17 +103,17 @@ At this point, this new repo is local, only on your computer. Eventually, you ma ### Create the Heroku app +✏️ *Replace `$APP_NAME` with the name for your unique app.* + ```bash heroku create $APP_NAME --buildpack mars/create-react-app ``` -✏️ *Replace `$APP_NAME` with a name for your unique app.* - This command: * sets the [app name](https://devcenter.heroku.com/articles/creating-apps#creating-a-named-app) & its URL `https://my-app-name.herokuapp.com` -* sets the [buildpack](https://devcenter.heroku.com/articles/buildpacks) to deploy a `create-react-app` app -* configures the [`heroku` remote](https://devcenter.heroku.com/articles/git#creating-a-heroku-remote) in the local git repo, so `git push heroku master` will push to this new Heroku app. +* sets the app to use this [buildpack](https://devcenter.heroku.com/articles/buildpacks) +* configures the [`heroku` git remote](https://devcenter.heroku.com/articles/git#creating-a-heroku-remote) in the local repo, so `git push heroku master` will push to this new Heroku app. ### Commit & deploy ♻️ @@ -122,6 +123,14 @@ git commit -m "Start with create-react-app" git push heroku master ``` +…or if you are ever working on a branch other than `master`: + +✏️ *Replace `$BRANCH_NAME` with the name for the current branch.* + +```bash +git push heroku $BRANCH_NAME:master +``` + ### Visit the app's public URL in your browser ```bash From ec9b2c5b20d9d10375dc66f3c7efc8faffab7fb4 Mon Sep 17 00:00:00 2001 From: Mars Hall Date: Wed, 5 Sep 2018 16:27:57 -0700 Subject: [PATCH 21/39] =?UTF-8?q?=F0=9F=93=9A=20clarify=20default=20app=20?= =?UTF-8?q?URL?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 94b9dd8a..90062b97 100644 --- a/README.md +++ b/README.md @@ -111,7 +111,7 @@ heroku create $APP_NAME --buildpack mars/create-react-app This command: -* sets the [app name](https://devcenter.heroku.com/articles/creating-apps#creating-a-named-app) & its URL `https://my-app-name.herokuapp.com` +* sets the [app name](https://devcenter.heroku.com/articles/creating-apps#creating-a-named-app) & its default URL `https://$APP_NAME.herokuapp.com` * sets the app to use this [buildpack](https://devcenter.heroku.com/articles/buildpacks) * configures the [`heroku` git remote](https://devcenter.heroku.com/articles/git#creating-a-heroku-remote) in the local repo, so `git push heroku master` will push to this new Heroku app. From e04470cc6df8919ee2eee0d3030ad679c698c660 Mon Sep 17 00:00:00 2001 From: Mars Hall Date: Fri, 7 Sep 2018 10:40:41 -0700 Subject: [PATCH 22/39] =?UTF-8?q?=F0=9F=93=9A=20describe=20env=20vars=20av?= =?UTF-8?q?ailable=20to=20build?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 90062b97..faa54b96 100644 --- a/README.md +++ b/README.md @@ -499,7 +499,8 @@ This buildpack combines several buildpacks, specified in [`.buildpacks`](.buildp * but forces `NODE_ENV=production` to be `development` to ensure dev dependencies are available for build 2. [`mars/create-react-app-inner-buildpack`](https://github.com/mars/create-react-app-inner-buildpack) * production build for create-react-app - * executes the package's build script; create-react-app default is `react-scripts build` + * executes the npm package's build script; create-react-app default is `react-scripts build` + * exposes `REACT_APP_`, `NODE_`, & `NPM_` prefixed env vars to the build script * generates a production bundle regardless of `NODE_ENV` setting * sets default [web server config](#user-content-web-server) unless `static.json` already exists * enables [runtime environment variables](#user-content-environment-variables) From afe3b086e8d5fb93978dd8910c79f34cbd80767d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dan=20Andr=C3=A9asson?= Date: Mon, 10 Sep 2018 23:54:22 +0200 Subject: [PATCH 23/39] Update README with latest release tag (#126) Update README with latest release tag --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index faa54b96..445d3298 100644 --- a/README.md +++ b/README.md @@ -476,10 +476,10 @@ This buildpack will never intentionally cause previously deployed apps to become [Releases are tagged](https://github.com/mars/create-react-app-buildpack/releases), so you can lock an app to a specific version, if that kind of determinism pleases you: ```bash -heroku buildpacks:set https://github.com/mars/create-react-app-buildpack.git#v1.2.1 +heroku buildpacks:set https://github.com/mars/create-react-app-buildpack.git#v5.1.0 ``` -✏️ *Replace `v1.2.1` with the desired [release tag](https://github.com/mars/create-react-app-buildpack/releases).* +✏️ *Replace `v5.1.0` with the desired [release tag](https://github.com/mars/create-react-app-buildpack/releases).* ♻️ Then, commit & deploy to rebuild on the new buildpack version. From 16e6ec799ad01b552e635ea1386fe976fb6647dd Mon Sep 17 00:00:00 2001 From: Mars Hall Date: Sun, 23 Sep 2018 12:10:59 -0700 Subject: [PATCH 24/39] Support dyno metadata during build (#129) --- .buildpacks | 2 +- README.md | 42 +++++++++++++++++++++++++++++++++--------- 2 files changed, 34 insertions(+), 10 deletions(-) diff --git a/.buildpacks b/.buildpacks index f8ce2aa9..ae4acfd3 100644 --- a/.buildpacks +++ b/.buildpacks @@ -1,3 +1,3 @@ https://github.com/heroku/heroku-buildpack-nodejs.git -https://github.com/mars/create-react-app-inner-buildpack.git#v5.1.0 +https://github.com/mars/create-react-app-inner-buildpack.git#v6.0.0 https://github.com/heroku/heroku-buildpack-static.git diff --git a/README.md b/README.md index 445d3298..f016a1fe 100644 --- a/README.md +++ b/README.md @@ -311,9 +311,9 @@ Replace `http://localhost:8000` with the URL to your local or remote backend ser ### Environment variables -[`REACT_APP_*` environment variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables) are supported with this buildpack. +[`REACT_APP_*` environment variables](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables) are fully supported with this buildpack. -🀐 *Be careful not to export secrets. These values may be accessed by anyone who can see the React app.* +🚫🀐 ***Not for secrets.** These values may be accessed by anyone who can see the React app.* ### [Set vars on Heroku](https://devcenter.heroku.com/articles/config-vars) @@ -349,7 +349,23 @@ ex: `REACT_APP_FILEPICKER_API_KEY` ([Add-on config vars](#user-content-add-on-co ### Compile-time configuration -♻️ The app must be re-deployed for compiled changes to take effect. +Supports [`REACT_APP_`](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables), `NODE_`, `NPM_`, & `HEROKU_` prefixed variables. + +Use Node's [`process.env` object](https://nodejs.org/dist/latest-v10.x/docs/api/process.html#process_process_env). + +```javascript +import React, { Component } from 'react'; + +class App extends Component { + render() { + return ( + Runtime env var example: { process.env.REACT_APP_HELLO } + ); + } +} +``` + +♻️ 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. ```bash heroku config:set REACT_APP_HELLO='I love sushi!' @@ -358,9 +374,17 @@ git commit --allow-empty -m "Set REACT_APP_HELLO config var" git push heroku master ``` +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: + +```bash +REACT_APP_HEROKU_SLUG_COMMIT=$HEROKU_SLUG_COMMIT react-scripts build +``` + ### Runtime configuration -*Requires at least create-react-app 0.7.* +Supports only [`REACT_APP_`](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables) prefixed variables. + +🚫🀐 ***Not for secrets.** These values may be accessed by anyone who can see the React app.* Install the [runtime env npm package](https://www.npmjs.com/package/@mars/heroku-js-runtime-env): @@ -407,9 +431,9 @@ heroku config:unset JS_RUNTIME_TARGET_BUNDLE ### Add-on config vars -🀐 *Be careful not to export secrets. These values may be accessed by anyone who can see the React app.* +🚫🀐 ***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](https://devcenter.heroku.com/articles/buildpack-api#profile-d-scripts) to make variables visible to the React app by prefixing them with `REACT_APP_`. +Use a custom [`.profile.d` script](https://devcenter.heroku.com/articles/buildpack-api#profile-d-scripts) to make variables set by other components available to the React app by prefixing them with `REACT_APP_`. 1. create `.profile.d/000-react-app-exports.sh` 1. make it executable `chmod +x .profile.d/000-react-app-exports.sh` @@ -476,10 +500,10 @@ This buildpack will never intentionally cause previously deployed apps to become [Releases are tagged](https://github.com/mars/create-react-app-buildpack/releases), so you can lock an app to a specific version, if that kind of determinism pleases you: ```bash -heroku buildpacks:set https://github.com/mars/create-react-app-buildpack.git#v5.1.0 +heroku buildpacks:set https://github.com/mars/create-react-app-buildpack.git#v6.0.0 ``` -✏️ *Replace `v5.1.0` with the desired [release tag](https://github.com/mars/create-react-app-buildpack/releases).* +✏️ *Replace `v6.0.0` with the desired [release tag](https://github.com/mars/create-react-app-buildpack/releases).* ♻️ Then, commit & deploy to rebuild on the new buildpack version. @@ -500,7 +524,7 @@ This buildpack combines several buildpacks, specified in [`.buildpacks`](.buildp 2. [`mars/create-react-app-inner-buildpack`](https://github.com/mars/create-react-app-inner-buildpack) * production build for create-react-app * executes the npm package's build script; create-react-app default is `react-scripts build` - * exposes `REACT_APP_`, `NODE_`, & `NPM_` prefixed env vars to the build script + * exposes `REACT_APP_`, `NODE_`, `NPM_`, & `HEROKU_` prefixed env vars to the build script * generates a production bundle regardless of `NODE_ENV` setting * sets default [web server config](#user-content-web-server) unless `static.json` already exists * enables [runtime environment variables](#user-content-environment-variables) From f2368a61ca8128dc49d3c5be94160373fa17c707 Mon Sep 17 00:00:00 2001 From: Mars Hall Date: Tue, 2 Oct 2018 09:49:23 -0700 Subject: [PATCH 25/39] =?UTF-8?q?=F0=9F=93=9A=20notices=20about=20CRA=202?= =?UTF-8?q?=20incompatibility?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index f016a1fe..254c5b36 100644 --- a/README.md +++ b/README.md @@ -63,7 +63,7 @@ Ensure [requirements](#user-content-requires) are met, then execute the followin ✏️ *Replace `$APP_NAME` with the name for your unique app.* ```bash -npx create-react-app $APP_NAME +npx create-react-app@1.5.x $APP_NAME cd $APP_NAME git init heroku create $APP_NAME --buildpack mars/create-react-app @@ -86,12 +86,13 @@ Usage ✏️ *Replace `$APP_NAME` with the name for your unique app.* ```bash -npx create-react-app $APP_NAME +npx create-react-app@1.5.x $APP_NAME cd $APP_NAME ``` * [npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f) -* If [yarn](https://yarnpkg.com) is installed locally, the new app will use it instead of [npm](https://www.npmjs.com). +* if [yarn](https://yarnpkg.com) is installed locally, the new app will use it instead of [npm](https://www.npmjs.com) +* version 1.5.x is specified because [runtime env vars](#user-content-runtime-configuration) are not yet compatible with version 2.0.x ([issue #131](https://github.com/mars/create-react-app-buildpack/issues/131)) ### Make it a git repo @@ -384,6 +385,8 @@ REACT_APP_HEROKU_SLUG_COMMIT=$HEROKU_SLUG_COMMIT react-scripts build Supports only [`REACT_APP_`](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables) prefixed variables. +🚨 *Not yet compatible with **Create React App 2** ([issue #131](https://github.com/mars/create-react-app-buildpack/issues/131))* + 🚫🀐 ***Not for secrets.** These values may be accessed by anyone who can see the React app.* Install the [runtime env npm package](https://www.npmjs.com/package/@mars/heroku-js-runtime-env): From f81fbdfeed590201dcdf5d23a2157708d26c2dbd Mon Sep 17 00:00:00 2001 From: Mars Hall Date: Mon, 8 Oct 2018 13:43:56 -0700 Subject: [PATCH 26/39] Runtime vars compatibility with split bundles (#133) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Runtime vars compatibility with split bundles * πŸ“š split bundle compatibility * Upgrade inner buildpack for split bundle compatibility --- .buildpacks | 2 +- README.md | 13 ++++++------- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/.buildpacks b/.buildpacks index ae4acfd3..29867bfa 100644 --- a/.buildpacks +++ b/.buildpacks @@ -1,3 +1,3 @@ https://github.com/heroku/heroku-buildpack-nodejs.git -https://github.com/mars/create-react-app-inner-buildpack.git#v6.0.0 +https://github.com/mars/create-react-app-inner-buildpack.git#v7.0.0 https://github.com/heroku/heroku-buildpack-static.git diff --git a/README.md b/README.md index 254c5b36..30411bf3 100644 --- a/README.md +++ b/README.md @@ -63,7 +63,7 @@ Ensure [requirements](#user-content-requires) are met, then execute the followin ✏️ *Replace `$APP_NAME` with the name for your unique app.* ```bash -npx create-react-app@1.5.x $APP_NAME +npx create-react-app@2.x $APP_NAME cd $APP_NAME git init heroku create $APP_NAME --buildpack mars/create-react-app @@ -86,13 +86,12 @@ Usage ✏️ *Replace `$APP_NAME` with the name for your unique app.* ```bash -npx create-react-app@1.5.x $APP_NAME +npx create-react-app@2.x $APP_NAME cd $APP_NAME ``` * [npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f) * if [yarn](https://yarnpkg.com) is installed locally, the new app will use it instead of [npm](https://www.npmjs.com) -* version 1.5.x is specified because [runtime env vars](#user-content-runtime-configuration) are not yet compatible with version 2.0.x ([issue #131](https://github.com/mars/create-react-app-buildpack/issues/131)) ### Make it a git repo @@ -385,8 +384,6 @@ REACT_APP_HEROKU_SLUG_COMMIT=$HEROKU_SLUG_COMMIT react-scripts build Supports only [`REACT_APP_`](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables) prefixed variables. -🚨 *Not yet compatible with **Create React App 2** ([issue #131](https://github.com/mars/create-react-app-buildpack/issues/131))* - 🚫🀐 ***Not for secrets.** These values may be accessed by anyone who can see the React app.* Install the [runtime env npm package](https://www.npmjs.com/package/@mars/heroku-js-runtime-env): @@ -423,10 +420,12 @@ If the javascript bundle location is customized, such as with an ejected created To solve this so the runtime can locate the bundle, set the custom bundle path: ```bash -heroku config:set JS_RUNTIME_TARGET_BUNDLE=/app/my/custom/path/js/main.*.js +heroku config:set JS_RUNTIME_TARGET_BUNDLE=/app/my/custom/path/js/*.js ``` -To unset this config and use the default path for **create-react-app**'s bundle, `/app/build/static/js/main.*.js`: +✳️ *Note this path is a `*` glob, selecting multiple files, because as of create-react-app version 2 the [bundle is split](https://reactjs.org/blog/2018/10/01/create-react-app-v2.html).* + +To unset this config and use the default path for **create-react-app**'s bundle, `/app/build/static/js/*.js`: ```bash heroku config:unset JS_RUNTIME_TARGET_BUNDLE From ea2acbc0b3cd6a8c43f7bef4107f1d56abe37201 Mon Sep 17 00:00:00 2001 From: Mars Hall Date: Sun, 23 Dec 2018 06:10:43 -0800 Subject: [PATCH 27/39] Default routing (#145) --- .buildpacks | 2 +- README.md | 39 +++++++++++++++++++++------------------ 2 files changed, 22 insertions(+), 19 deletions(-) diff --git a/.buildpacks b/.buildpacks index 29867bfa..4b4241a9 100644 --- a/.buildpacks +++ b/.buildpacks @@ -1,3 +1,3 @@ https://github.com/heroku/heroku-buildpack-nodejs.git -https://github.com/mars/create-react-app-inner-buildpack.git#v7.0.0 +https://github.com/mars/create-react-app-inner-buildpack.git#v8.0.0 https://github.com/heroku/heroku-buildpack-static.git diff --git a/README.md b/README.md index 30411bf3..8d66d7fa 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ Deploy React.js web apps generated with [create-react-app](https://github.com/fa * πŸ‘“ [Customization](#user-content-customization) * [Procfile](#user-content-procfile) * [Web server](#user-content-web-server) - * [Routing clean URLs](#user-content-routing-clean-urls) + * [Routing](#user-content-routing) * [HTTPS-only](#user-content-https-only) * [Proxy](#user-content-proxy) * [Environment variables](#user-content-environment-variables) @@ -194,20 +194,6 @@ The config file `static.json` should be committed at the root of the repo. It wi The default `static.json`, if it does not exist in the repo, is: -```json -{ "root": "build/" } -``` - -### 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](#user-content-custom-bundle-location). - -### Routing clean URLs - -[React Router](https://github.com/ReactTraining/react-router) (not included) may easily use hash-based URLs like `https://example.com/index.html#/users/me/edit`. This is nice & easy when getting started with local development, but for a public app you probably want real URLs like `https://example.com/users/me/edit`. - -Create a `static.json` file at the root of the repo to configure the web server for clean [`browserHistory` with React Router v3](https://github.com/ReactTraining/react-router/blob/v3/docs/guides/Histories.md#browserhistory) & [`BrowserRouter` with v4](https://reacttraining.com/react-router/web/api/BrowserRouter): - ```json { "root": "build/", @@ -217,7 +203,15 @@ Create a `static.json` file at the root of the repo to configure the web server } ``` -πŸ‘“ See [custom routing w/ the static buildpack](https://github.com/heroku/heroku-buildpack-static#custom-routes). +### 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](#user-content-custom-bundle-location). + +### 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://github.com/heroku/heroku-buildpack-static/blob/master/README.md#user-content-custom-routes). ### HTTPS-only @@ -226,6 +220,9 @@ Enforce secure connections by automatically redirecting insecure requests to **h ```json { "root": "build/", + "routes": { + "/**": "index.html" + }, "https_only": true } ``` @@ -235,16 +232,19 @@ Prevent downgrade attacks with [HTTP strict transport security](https://develope ```json { "root": "build/", + "routes": { + "/**": "index.html" + }, "https_only": true, "headers": { "/**": { - "Strict-Transport-Security": "max-age=7776000" + "Strict-Transport-Security": "max-age=31557600" } } } ``` -* `max-age` is the number of seconds to enforce HTTPS since the last connection; the example is 90-days +* `max-age` is the number of seconds to enforce HTTPS since the last connection; the example is one-year ### Proxy @@ -273,6 +273,9 @@ Add `"proxies"` to `static.json`: ```json { "root": "build/", + "routes": { + "/**": "index.html" + }, "proxies": { "/api/": { "origin": "${API_URL}" From 2bbc8211bb63d084c128d28ac55b8b1849834235 Mon Sep 17 00:00:00 2001 From: Mars Hall Date: Mon, 7 Jan 2019 15:20:56 -0800 Subject: [PATCH 28/39] =?UTF-8?q?=F0=9F=93=9A=20HSTS=20usage=20details?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 8d66d7fa..4dda7564 100644 --- a/README.md +++ b/README.md @@ -227,7 +227,11 @@ Enforce secure connections by automatically redirecting insecure requests to **h } ``` -Prevent downgrade attacks with [HTTP strict transport security](https://developer.mozilla.org/en-US/docs/Web/Security/HTTP_strict_transport_security). Add HSTS `"headers"` to `static.json`: +#### Strict transport security (HSTS) + +Prevent downgrade attacks with [HTTP strict transport security](https://developer.mozilla.org/en-US/docs/Web/Security/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. ```json { From 65e77449e2b6cf893aa1ef6f377fc37ad91ffea4 Mon Sep 17 00:00:00 2001 From: Mars Hall Date: Thu, 21 Feb 2019 17:05:34 -0800 Subject: [PATCH 29/39] =?UTF-8?q?=F0=9F=93=9A=20about=20the=20upcoming=20c?= =?UTF-8?q?hange=20to=20Deploy=20with=20Auto=20Build?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 4dda7564..0393d9ce 100644 --- a/README.md +++ b/README.md @@ -3,6 +3,8 @@ Heroku Buildpack for create-react-app Deploy React.js web apps generated with [create-react-app](https://github.com/facebook/create-react-app). Automates deployment with the built-in bundler and serves it up via [Nginx](http://nginx.org/en/). See the [introductory blog post](https://blog.heroku.com/deploying-react-with-zero-configuration) and entry in [Heroku elements](https://elements.heroku.com/buildpacks/mars/create-react-app-buildpack). +πŸ‘‰ *An [upcoming change](https://devcenter.heroku.com/changelog-items/1557) to the official Node.js buildpack affects this buildpack. **No changes are required to apps using this buildpack.** See [#156 Deploy with Auto Build](https://github.com/mars/create-react-app-buildpack/pull/156) for information about the transition on **March 11, 2019**, when new deployments may briefly be broken.* + * 🚦 [Purpose](#user-content-purpose) * ⚠️ [Requirements](#user-content-requires) * πŸš€ [Quick Start](#user-content-quick-start) From 1b64ebffcd6a6781637d78e8d90ce23c1cb19df9 Mon Sep 17 00:00:00 2001 From: Mars Hall Date: Mon, 4 Mar 2019 13:38:55 -0800 Subject: [PATCH 30/39] =?UTF-8?q?=F0=9F=93=9A=20update=20auto=20build=20no?= =?UTF-8?q?tice=20(no=20breakage=20anticipated)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 0393d9ce..91140ff4 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ Heroku Buildpack for create-react-app Deploy React.js web apps generated with [create-react-app](https://github.com/facebook/create-react-app). Automates deployment with the built-in bundler and serves it up via [Nginx](http://nginx.org/en/). See the [introductory blog post](https://blog.heroku.com/deploying-react-with-zero-configuration) and entry in [Heroku elements](https://elements.heroku.com/buildpacks/mars/create-react-app-buildpack). -πŸ‘‰ *An [upcoming change](https://devcenter.heroku.com/changelog-items/1557) to the official Node.js buildpack affects this buildpack. **No changes are required to apps using this buildpack.** See [#156 Deploy with Auto Build](https://github.com/mars/create-react-app-buildpack/pull/156) for information about the transition on **March 11, 2019**, when new deployments may briefly be broken.* +πŸ‘‰ *An [upcoming change](https://devcenter.heroku.com/changelog-items/1557) to the official Node.js buildpack affects this buildpack. **No changes are required to apps using this buildpack.** See [#156 Deploy with Auto Build](https://github.com/mars/create-react-app-buildpack/pull/156) for information about the transition on **March 11, 2019**.* * 🚦 [Purpose](#user-content-purpose) * ⚠️ [Requirements](#user-content-requires) From 411505b01473cd83a651344501426e1213f7fb42 Mon Sep 17 00:00:00 2001 From: Mars Hall Date: Mon, 11 Mar 2019 07:28:02 -0700 Subject: [PATCH 31/39] Deploy with auto build (#156) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Use Node buildpackβ€˜s auto build * Remove NODE_ENV=development workaround since Node buildpack installs devDeps for build & auto-runs build. * πŸ“š link to Dev Center for Node.js build customization * Switch to new Node auto build behavior ahead of release * Upgrade to "Node auto build" release version of inner buildpack --- .buildpacks | 2 +- README.md | 15 +++++++-------- bin/compile | 18 +++--------------- 3 files changed, 11 insertions(+), 24 deletions(-) diff --git a/.buildpacks b/.buildpacks index 4b4241a9..a34fb6fe 100644 --- a/.buildpacks +++ b/.buildpacks @@ -1,3 +1,3 @@ https://github.com/heroku/heroku-buildpack-nodejs.git -https://github.com/mars/create-react-app-inner-buildpack.git#v8.0.0 +https://github.com/mars/create-react-app-inner-buildpack.git#v9.0.0 https://github.com/heroku/heroku-buildpack-static.git diff --git a/README.md b/README.md index 91140ff4..0f4f9a7d 100644 --- a/README.md +++ b/README.md @@ -358,7 +358,9 @@ ex: `REACT_APP_FILEPICKER_API_KEY` ([Add-on config vars](#user-content-add-on-co ### Compile-time configuration -Supports [`REACT_APP_`](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables), `NODE_`, `NPM_`, & `HEROKU_` prefixed variables. +Supports all config vars, including [`REACT_APP_`](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables), `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](https://nodejs.org/dist/latest-v10.x/docs/api/process.html#process_process_env). @@ -528,15 +530,12 @@ This buildpack combines several buildpacks, specified in [`.buildpacks`](.buildp * installs `node`, puts on the `$PATH` * version specified in [`package.json`, `engines.node`](https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version) * `node_modules/` cached between deployments - * `NODE_ENV` at buildtime: - * defaults to `NODE_ENV=development` to install the build tooling of create-react-app's dev dependencies, like `react-scripts` - * honors specific setting of `NODE_ENV`, like `NODE_ENV=test` for [automated testing](#user-content-testing) in [`bin/test`](bin/test-compile) - * but forces `NODE_ENV=production` to be `development` to ensure dev dependencies are available for build -2. [`mars/create-react-app-inner-buildpack`](https://github.com/mars/create-react-app-inner-buildpack) * production build for create-react-app - * executes the npm package's build script; create-react-app default is `react-scripts build` - * exposes `REACT_APP_`, `NODE_`, `NPM_`, & `HEROKU_` prefixed env vars to the build script + * [executes the npm package's build script](https://devcenter.heroku.com/changelog-items/1557); create-react-app default is `react-scripts build` + * exposes all env vars to the build script * generates a production bundle regardless of `NODE_ENV` setting + * customize further with [Node.js build configuration](https://devcenter.heroku.com/articles/nodejs-support#customizing-the-build-process) +2. [`mars/create-react-app-inner-buildpack`](https://github.com/mars/create-react-app-inner-buildpack) * sets default [web server config](#user-content-web-server) unless `static.json` already exists * enables [runtime environment variables](#user-content-environment-variables) 3. [`heroku/static` buildpack](https://github.com/heroku/heroku-buildpack-static) diff --git a/bin/compile b/bin/compile index efa4c76b..53e343e0 100755 --- a/bin/compile +++ b/bin/compile @@ -23,6 +23,9 @@ CACHE_DIR=$2 ENV_DIR=$3 BP_DIR=`cd $(dirname $0); cd ..; pwd` +# Switch to new Node auto build behavior ahead of release +export NEW_BUILD_SCRIPT_BEHAVIOR=true + # Use architecture of multi-buildpack to compose behavior. # https://github.com/heroku/heroku-buildpack-multi cp $BP_DIR/.buildpacks $BUILD_DIR/.buildpacks @@ -31,21 +34,6 @@ branch="" dir=$(mktemp -t buildpackXXXXX) rm -rf $dir -echo "-----> Configure create-react-app build environment" -# Set env vars for the inner buildpacks in `.buildpacks` -# * during compile, install build tooling (devDependencies) with npm & Yarn -# * in runtime, NODE_ENV is not used (this buildpack launches a static web server) -export NPM_CONFIG_PRODUCTION=false -INHERITED_NODE_ENV="${NODE_ENV:-development}" -if [ "$INHERITED_NODE_ENV" = "production" ] - then - echo ' Setting `NODE_ENV=development` to install dependencies for `npm build`' - export NODE_ENV=development -else - echo " Using \`NODE_ENV=${INHERITED_NODE_ENV}\`" - export NODE_ENV="${INHERITED_NODE_ENV}" -fi - echo "=====> Downloading Buildpack: $url" if [[ "$url" =~ \.tgz$ ]] || [[ "$url" =~ \.tgz\? ]]; then From b51b56156260c66810de2b535ab26fc892213d01 Mon Sep 17 00:00:00 2001 From: Mars Hall Date: Mon, 11 Mar 2019 07:46:21 -0700 Subject: [PATCH 32/39] =?UTF-8?q?=F0=9F=93=9Aupdate=20auto=20build=20notic?= =?UTF-8?q?e?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 0f4f9a7d..126dd745 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ Heroku Buildpack for create-react-app Deploy React.js web apps generated with [create-react-app](https://github.com/facebook/create-react-app). Automates deployment with the built-in bundler and serves it up via [Nginx](http://nginx.org/en/). See the [introductory blog post](https://blog.heroku.com/deploying-react-with-zero-configuration) and entry in [Heroku elements](https://elements.heroku.com/buildpacks/mars/create-react-app-buildpack). -πŸ‘‰ *An [upcoming change](https://devcenter.heroku.com/changelog-items/1557) to the official Node.js buildpack affects this buildpack. **No changes are required to apps using this buildpack.** See [#156 Deploy with Auto Build](https://github.com/mars/create-react-app-buildpack/pull/156) for information about the transition on **March 11, 2019**.* +πŸ‘‰ *A [recent change](https://devcenter.heroku.com/changelog-items/1557) to the official Node.js buildpack affects this buildpack. **No changes are required to apps using this buildpack.** See [#156 Deploy with Auto Build](https://github.com/mars/create-react-app-buildpack/pull/156) for information about the transition on **March 11, 2019**.* * 🚦 [Purpose](#user-content-purpose) * ⚠️ [Requirements](#user-content-requires) From 43e11e2c62fb9e4bd30530ec8225f7a4c3dd0f7d Mon Sep 17 00:00:00 2001 From: Mars Hall Date: Tue, 12 Mar 2019 11:13:09 -0700 Subject: [PATCH 33/39] =?UTF-8?q?=F0=9F=93=9A=20link=20a=20new=20alternati?= =?UTF-8?q?ve?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 126dd745..7cda91cf 100644 --- a/README.md +++ b/README.md @@ -42,11 +42,12 @@ Purpose **This buildpack deploys a React UI as a static web site.** The [Nginx](http://nginx.org/en/) web server provides optimum performance and security for the runtime. See [Architecture](#user-content-architecture-) for details. -If your goal is to combine React UI + API (Node, Ruby, Python…) into a *single app*, then this buildpack is not the answer. The simplest combined solution is all javascript: +If your goal is to make a single app that combines React UI with a server-side backend (Node, Ruby, Python…), then this buildpack is not the answer. -▢️ **[create-react-app + Node.js server](https://github.com/mars/heroku-cra-node)** on Heroku +Check out these alternatives to use React with a server-side app: -Combination with other languages is possible too, like [create-react-app + Rails 5 server](https://medium.com/superhighfives/a-top-shelf-web-stack-rails-5-api-activeadmin-create-react-app-de5481b7ec0b). +* **[create-react-app + Node.js server](https://github.com/mars/heroku-cra-node)** ⭐️ simplest solution +* **[create-react-app + Ruby on Rails server](https://blog.heroku.com/a-rock-solid-modern-web-stack)** Requires -------- From 59519c1589f2fdc2b53ca8f1e622cc8eb64271b6 Mon Sep 17 00:00:00 2001 From: Mars Hall Date: Mon, 15 Apr 2019 15:04:46 -0700 Subject: [PATCH 34/39] =?UTF-8?q?=F0=9F=93=9A=20update=20link=20to=20CRA?= =?UTF-8?q?=20Custom=20Environment=20Variables=20docs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 7cda91cf..19226cd0 100644 --- a/README.md +++ b/README.md @@ -321,7 +321,7 @@ Replace `http://localhost:8000` with the URL to your local or remote backend ser ### Environment variables -[`REACT_APP_*` environment variables](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables) are fully supported with this buildpack. +[`REACT_APP_*` environment variables](https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables) are fully supported with this buildpack. 🚫🀐 ***Not for secrets.** These values may be accessed by anyone who can see the React app.* From 3018570b91e4a060cd2bb5768cc4e8ddb2961e99 Mon Sep 17 00:00:00 2001 From: Mars Hall Date: Tue, 10 Sep 2019 16:49:54 -0700 Subject: [PATCH 35/39] Delete the old "Node build" notice from README --- README.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/README.md b/README.md index 19226cd0..80c76742 100644 --- a/README.md +++ b/README.md @@ -3,8 +3,6 @@ Heroku Buildpack for create-react-app Deploy React.js web apps generated with [create-react-app](https://github.com/facebook/create-react-app). Automates deployment with the built-in bundler and serves it up via [Nginx](http://nginx.org/en/). See the [introductory blog post](https://blog.heroku.com/deploying-react-with-zero-configuration) and entry in [Heroku elements](https://elements.heroku.com/buildpacks/mars/create-react-app-buildpack). -πŸ‘‰ *A [recent change](https://devcenter.heroku.com/changelog-items/1557) to the official Node.js buildpack affects this buildpack. **No changes are required to apps using this buildpack.** See [#156 Deploy with Auto Build](https://github.com/mars/create-react-app-buildpack/pull/156) for information about the transition on **March 11, 2019**.* - * 🚦 [Purpose](#user-content-purpose) * ⚠️ [Requirements](#user-content-requires) * πŸš€ [Quick Start](#user-content-quick-start) From 733028cc4eed6db26f803a361595a3fb3ea9cc16 Mon Sep 17 00:00:00 2001 From: Mars Hall Date: Fri, 28 Feb 2020 18:13:50 -0800 Subject: [PATCH 36/39] Update docs for create-react-app 3.x --- README.md | 22 +++++----------------- 1 file changed, 5 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index 80c76742..2628c1e9 100644 --- a/README.md +++ b/README.md @@ -64,12 +64,9 @@ Ensure [requirements](#user-content-requires) are met, then execute the followin ✏️ *Replace `$APP_NAME` with the name for your unique app.* ```bash -npx create-react-app@2.x $APP_NAME +npx create-react-app@3.x $APP_NAME cd $APP_NAME -git init heroku create $APP_NAME --buildpack mars/create-react-app -git add . -git commit -m "Start with create-react-app" git push heroku master heroku open ``` @@ -87,21 +84,14 @@ Usage ✏️ *Replace `$APP_NAME` with the name for your unique app.* ```bash -npx create-react-app@2.x $APP_NAME +npx create-react-app@3.x $APP_NAME cd $APP_NAME ``` +* as of create-react-app v3, it automatically performs `git init` and an initial commit * [npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f) * if [yarn](https://yarnpkg.com) is installed locally, the new app will use it instead of [npm](https://www.npmjs.com) -### Make it a git repo - -```bash -git init -``` - -At this point, this new repo is local, only on your computer. Eventually, you may want to [push to Github](#user-content-push-to-github). - ### Create the Heroku app ✏️ *Replace `$APP_NAME` with the name for your unique app.* @@ -116,11 +106,9 @@ This command: * sets the app to use this [buildpack](https://devcenter.heroku.com/articles/buildpacks) * configures the [`heroku` git remote](https://devcenter.heroku.com/articles/git#creating-a-heroku-remote) in the local repo, so `git push heroku master` will push to this new Heroku app. -### Commit & deploy ♻️ +### Deploy ♻️ ```bash -git add . -git commit -m "Start with create-react-app" git push heroku master ``` @@ -146,7 +134,7 @@ Find the app on [your dashboard](https://dashboard.heroku.com). Work with your app locally using `npm start`. See: [create-react-app docs](https://github.com/facebookincubator/create-react-app#getting-started) -Then, commit & deploy ♻️ +Then, `git commit` your changes & `git push heroku master` ♻️ ### Push to Github From e6de55bcb4e4a06ee444b96449650f821ff7a90c Mon Sep 17 00:00:00 2001 From: Kazeem Quadri <33027659+Darkace01@users.noreply.github.com> Date: Thu, 3 Feb 2022 20:27:34 +0100 Subject: [PATCH 37/39] Update README.md (#193) * Update README.md Change the default branch in commands from master to main * Update README.md Version Compatibility Section (Changed master to main) --- README.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 2628c1e9..3edafbd4 100644 --- a/README.md +++ b/README.md @@ -67,7 +67,7 @@ Ensure [requirements](#user-content-requires) are met, then execute the followin npx create-react-app@3.x $APP_NAME cd $APP_NAME heroku create $APP_NAME --buildpack mars/create-react-app -git push heroku master +git push heroku main heroku open ``` @@ -104,20 +104,20 @@ This command: * sets the [app name](https://devcenter.heroku.com/articles/creating-apps#creating-a-named-app) & its default URL `https://$APP_NAME.herokuapp.com` * sets the app to use this [buildpack](https://devcenter.heroku.com/articles/buildpacks) -* configures the [`heroku` git remote](https://devcenter.heroku.com/articles/git#creating-a-heroku-remote) in the local repo, so `git push heroku master` will push to this new Heroku app. +* configures the [`heroku` git remote](https://devcenter.heroku.com/articles/git#creating-a-heroku-remote) in the local repo, so `git push heroku main` will push to this new Heroku app. ### Deploy ♻️ ```bash -git push heroku master +git push heroku main ``` -…or if you are ever working on a branch other than `master`: +…or if you are ever working on a branch other than `main`: ✏️ *Replace `$BRANCH_NAME` with the name for the current branch.* ```bash -git push heroku $BRANCH_NAME:master +git push heroku $BRANCH_NAME:main ``` ### Visit the app's public URL in your browser @@ -134,7 +134,7 @@ Find the app on [your dashboard](https://dashboard.heroku.com). Work with your app locally using `npm start`. See: [create-react-app docs](https://github.com/facebookincubator/create-react-app#getting-started) -Then, `git commit` your changes & `git push heroku master` ♻️ +Then, `git commit` your changes & `git push heroku main` ♻️ ### Push to Github @@ -369,7 +369,7 @@ class App extends Component { heroku config:set REACT_APP_HELLO='I love sushi!' git commit --allow-empty -m "Set REACT_APP_HELLO config var" -git push heroku master +git push heroku main ``` 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: @@ -480,7 +480,7 @@ Troubleshooting ```bash git commit --allow-empty -m 'Switch to create-react-app-buildpack' - git push heroku master + git push heroku main ``` If the error still occurs, then at least we know it's really using this buildpack! Proceed with troubleshooting. @@ -495,7 +495,7 @@ Troubleshooting Version compatibility --------------------- -This buildpack will never intentionally cause previously deployed apps to become undeployable. Using master [as directed in the main instructions](#user-content-create-the-heroku-app) will always deploy an app with the most recent version of this buildpack. +This buildpack will never intentionally cause previously deployed apps to become undeployable. Using main [as directed in the main instructions](#user-content-create-the-heroku-app) will always deploy an app with the most recent version of this buildpack. [Releases are tagged](https://github.com/mars/create-react-app-buildpack/releases), so you can lock an app to a specific version, if that kind of determinism pleases you: From d1a1d052db00b4666b6aeb99a656930ee74cfccb Mon Sep 17 00:00:00 2001 From: Mars Hall Date: Thu, 9 Jun 2022 16:36:52 -0700 Subject: [PATCH 38/39] =?UTF-8?q?=F0=9F=8C=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 540 +----------------------------------------------------- 1 file changed, 5 insertions(+), 535 deletions(-) diff --git a/README.md b/README.md index 3edafbd4..7905dee9 100644 --- a/README.md +++ b/README.md @@ -1,542 +1,12 @@ Heroku Buildpack for create-react-app ===================================== -Deploy React.js web apps generated with [create-react-app](https://github.com/facebook/create-react-app). Automates deployment with the built-in bundler and serves it up via [Nginx](http://nginx.org/en/). See the [introductory blog post](https://blog.heroku.com/deploying-react-with-zero-configuration) and entry in [Heroku elements](https://elements.heroku.com/buildpacks/mars/create-react-app-buildpack). +After a long, useful run, this buildpack is now at its end of life πŸŒ… -* 🚦 [Purpose](#user-content-purpose) -* ⚠️ [Requirements](#user-content-requires) -* πŸš€ [Quick Start](#user-content-quick-start) -* πŸ›  [Usage](#user-content-usage) - 1. [Generate a React app](#user-content-generate-a-react-app) - 1. [Make it a git repo](#user-content-make-it-a-git-repo) - 1. [Create the Heroku app](#user-content-create-the-heroku-app) - 1. [Commit & deploy ♻️](#user-content-commit--deploy-️) - 1. [Continue Development](#user-content-continue-development) - 1. [Push to Github](#user-content-push-to-github) - 1. [Testing](#user-content-testing) -* πŸ‘“ [Customization](#user-content-customization) - * [Procfile](#user-content-procfile) - * [Web server](#user-content-web-server) - * [Routing](#user-content-routing) - * [HTTPS-only](#user-content-https-only) - * [Proxy](#user-content-proxy) - * [Environment variables](#user-content-environment-variables) - * [Set vars on Heroku](#user-content-set-vars-on-heroku) - * [Set vars for local dev](#user-content-set-vars-for-local-dev) - * [Compile-time vs Runtime](#user-content-compile-time-vs-runtime) - * [Compile-time config](#user-content-compile-time-configuration) - * [Runtime config](#user-content-runtime-configuration) - * [Custom bundle location](#user-content-custom-bundle-location) - * [using an Add-on's config](#user-content-add-on-config-vars) - * [npm Private Packages](#user-content-npm-private-packages) -* πŸ•΅οΈΒ [Troubleshooting](#user-content-troubleshooting) -* πŸ“ [Version compatibility](#user-content-version-compatibility) -* πŸ™ [Architecture](#user-content-architecture-) +The underlying [static web server buildpack](https://github.com/heroku/heroku-buildpack-static) is deprecated and will not be supported on Heroku-22 or newer stacks. ------ +Please look into using [Next.js](https://nextjs.org) or [Remix](https://remix.run) to develop React apps which are deployable using the [Node.js buildpack](https://github.com/heroku/heroku-buildpack-nodejs). -Purpose -------- +---------- -**This buildpack deploys a React UI as a static web site.** The [Nginx](http://nginx.org/en/) web server provides optimum performance and security for the runtime. See [Architecture](#user-content-architecture-) for details. - -If your goal is to make a single app that combines React UI with a server-side backend (Node, Ruby, Python…), then this buildpack is not the answer. - -Check out these alternatives to use React with a server-side app: - -* **[create-react-app + Node.js server](https://github.com/mars/heroku-cra-node)** ⭐️ simplest solution -* **[create-react-app + Ruby on Rails server](https://blog.heroku.com/a-rock-solid-modern-web-stack)** - -Requires --------- - -* [Heroku](https://www.heroku.com/home) - * [command-line tools (CLI)](https://toolbelt.heroku.com) - * [a free account](https://signup.heroku.com) -* [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) -* [Node.js](https://nodejs.org) - -Quick Start ------------ - -Ensure [requirements](#user-content-requires) are met, then execute the following in a terminal. - -✏️ *Replace `$APP_NAME` with the name for your unique app.* - -```bash -npx create-react-app@3.x $APP_NAME -cd $APP_NAME -heroku create $APP_NAME --buildpack mars/create-react-app -git push heroku main -heroku open -``` - -Once deployed, [continue development](#user-content-continue-development) 🌱 - -For explanation about these steps, continue reading the [next section](#user-content-usage). - - -Usage ------ - -### Generate a React app - -✏️ *Replace `$APP_NAME` with the name for your unique app.* - -```bash -npx create-react-app@3.x $APP_NAME -cd $APP_NAME -``` - -* as of create-react-app v3, it automatically performs `git init` and an initial commit -* [npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f) -* if [yarn](https://yarnpkg.com) is installed locally, the new app will use it instead of [npm](https://www.npmjs.com) - -### Create the Heroku app - -✏️ *Replace `$APP_NAME` with the name for your unique app.* - -```bash -heroku create $APP_NAME --buildpack mars/create-react-app -``` - -This command: - -* sets the [app name](https://devcenter.heroku.com/articles/creating-apps#creating-a-named-app) & its default URL `https://$APP_NAME.herokuapp.com` -* sets the app to use this [buildpack](https://devcenter.heroku.com/articles/buildpacks) -* configures the [`heroku` git remote](https://devcenter.heroku.com/articles/git#creating-a-heroku-remote) in the local repo, so `git push heroku main` will push to this new Heroku app. - -### Deploy ♻️ - -```bash -git push heroku main -``` - -…or if you are ever working on a branch other than `main`: - -✏️ *Replace `$BRANCH_NAME` with the name for the current branch.* - -```bash -git push heroku $BRANCH_NAME:main -``` - -### Visit the app's public URL in your browser - -```bash -heroku open -``` - -### Visit the Heroku Dashboard for the app - -Find the app on [your dashboard](https://dashboard.heroku.com). - -### Continue Development - -Work with your app locally using `npm start`. See: [create-react-app docs](https://github.com/facebookincubator/create-react-app#getting-started) - -Then, `git commit` your changes & `git push heroku main` ♻️ - -### Push to Github - -Eventually, to share, collaborate, or simply back-up your code, [create an empty repo at Github](https://github.com/new), 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](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#user-content-running-tests) or whatever testing library you prefer. - -[Heroku CI](https://devcenter.heroku.com/articles/heroku-ci) is supported with minimal configuration. The CI integration is compatible with npm & yarn (see [`bin/test`](bin/test)). - -#### Minimal `app.json` - -Heroku CI uses [`app.json`](https://devcenter.heroku.com/articles/app-json-schema) to provision test apps. To support Heroku CI, commit this minimal example `app.json`: - -```json -{ - "buildpacks": [ - { - "url": "mars/create-react-app" - } - ] -} -``` - -Customization -------------- - -### Procfile - -Heroku apps may declare what processes are launched for a successful deployment by way of the [`Procfile`](https://devcenter.heroku.com/articles/procfile). This buildpack's default process comes from [`heroku/static` buildpack](https://github.com/heroku/heroku-buildpack-static). (See: πŸ™ [Architecture](#user-content-architecture-)). The implicit `Procfile` to start the static web server is: - -``` -web: bin/boot -``` - -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](https://devcenter.heroku.com/articles/procfile#declaring-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](#user-content-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](https://github.com/heroku/heroku-buildpack-static#configuration). - -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: - -```json -{ - "root": "build/", - "routes": { - "/**": "index.html" - } -} -``` - -### 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](#user-content-custom-bundle-location). - -### 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://github.com/heroku/heroku-buildpack-static/blob/master/README.md#user-content-custom-routes). - -### HTTPS-only - -Enforce secure connections by automatically redirecting insecure requests to **https://**, in `static.json`: - -```json -{ - "root": "build/", - "routes": { - "/**": "index.html" - }, - "https_only": true -} -``` - -#### Strict transport security (HSTS) - -Prevent downgrade attacks with [HTTP strict transport security](https://developer.mozilla.org/en-US/docs/Web/Security/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. - -```json -{ - "root": "build/", - "routes": { - "/**": "index.html" - }, - "https_only": true, - "headers": { - "/**": { - "Strict-Transport-Security": "max-age=31557600" - } - } -} -``` - -* `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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_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: - -``` -/api/search-items - β†’ https://backend.example.com/search-items - -/api/users/me - β†’ https://backend.example.com/users/me -``` - -You may choose any prefix and may have multiple proxies with different prefixes. - -#### Proxy for deployment - -The [`heroku/static` buildpack](https://github.com/heroku/heroku-buildpack-static) (see: πŸ™ [Architecture](#user-content-architecture-)) provides [Proxy Backends configuration](https://github.com/heroku/heroku-buildpack-static/blob/master/README.md#proxy-backends) to utilize Nginx for high-performance proxies in production. - -Add `"proxies"` to `static.json`: - -```json -{ - "root": "build/", - "routes": { - "/**": "index.html" - }, - "proxies": { - "/api/": { - "origin": "${API_URL}" - } - } -} -``` - -Then, point the React UI app to a specific backend API: - -```bash -heroku config:set API_URL="https://backend.example.com" -``` - -#### Proxy for local development - -create-react-app itself provides a built-in [proxy for development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#user-content-proxying-api-requests-in-development). This may be configured to match the behavior of [proxy for deployment](#user-content-proxy-for-deployment). - -Add `"proxy"` to `package.json`: - -```json -{ - "proxy": { - "/api": { - "target": "http://localhost:8000", - "pathRewrite": { - "^/api": "/" - } - } - } -} -``` - -Replace `http://localhost:8000` with the URL to your local or remote backend service. - - -### Environment variables - -[`REACT_APP_*` environment variables](https://facebook.github.io/create-react-app/docs/adding-custom-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 on Heroku](https://devcenter.heroku.com/articles/config-vars) - -```bash -heroku config:set REACT_APP_HELLO='I love sushi!' -``` - -### 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: - -```bash -REACT_APP_API_URL=http://api.example.com -REACT_APP_CLIENT_ID=XyzxYzxyZ -``` - -### Compile-time vs Runtime - -Two versions of variables are supported. In addition to compile-time variables applied during [build](https://github.com/facebookincubator/create-react-app#npm-run-build) the app supports variables set at runtime, applied as each web dyno starts-up. - -Requirement | [Compile-time](#user-content-compile-time-configuration) | [Runtime](#user-content-runtime-configuration) -:--- |:---:|:---: -never changes for a build | βœ“ | -support for [continuous delivery](https://www.heroku.com/continuous-delivery) | | βœ“ -updates immediately when setting new [config vars](https://devcenter.heroku.com/articles/config-vars) | | βœ“ -different values for staging & production (in a [pipeline](https://devcenter.heroku.com/articles/pipelines)) | | βœ“ -ex: `REACT_APP_BUILD_VERSION` (static fact about the bundle) | βœ“ | -ex: `REACT_APP_DEBUG_ASSERTIONS` ([prune code from bundle](https://webpack.github.io/docs/list-of-plugins.html#defineplugin)) | βœ“ | -ex: `REACT_APP_API_URL` (transient, external reference) | | βœ“ -ex: `REACT_APP_FILEPICKER_API_KEY` ([Add-on config vars](#user-content-add-on-config-vars)) | | βœ“ - -### Compile-time configuration - -Supports all config vars, including [`REACT_APP_`](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables), `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](https://nodejs.org/dist/latest-v10.x/docs/api/process.html#process_process_env). - -```javascript -import React, { Component } from 'react'; - -class App extends Component { - render() { - return ( - Runtime env var example: { process.env.REACT_APP_HELLO } - ); - } -} -``` - -♻️ 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. - -```bash -heroku config:set REACT_APP_HELLO='I love sushi!' - -git commit --allow-empty -m "Set REACT_APP_HELLO config var" -git push heroku main -``` - -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: - -```bash -REACT_APP_HEROKU_SLUG_COMMIT=$HEROKU_SLUG_COMMIT react-scripts build -``` - -### Runtime configuration - -Supports only [`REACT_APP_`](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables) prefixed variables. - -🚫🀐 ***Not for secrets.** These values may be accessed by anyone who can see the React app.* - -Install the [runtime env npm package](https://www.npmjs.com/package/@mars/heroku-js-runtime-env): - -```bash -npm install @mars/heroku-js-runtime-env --save -``` - -Then, require/import it to use the vars within components: - -```javascript -import React, { Component } from 'react'; -import runtimeEnv from '@mars/heroku-js-runtime-env'; - -class App extends Component { - render() { - // Load the env object. - const env = runtimeEnv(); - - // …then use values just like `process.env` - return ( - Runtime env var example: { env.REACT_APP_HELLO } - ); - } -} -``` - -⚠️ *Avoid setting backslash escape sequences, such as `\n`, 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: - -```bash -heroku config:set JS_RUNTIME_TARGET_BUNDLE=/app/my/custom/path/js/*.js -``` - -✳️ *Note this path is a `*` glob, selecting multiple files, because as of create-react-app version 2 the [bundle is split](https://reactjs.org/blog/2018/10/01/create-react-app-v2.html).* - -To unset this config and use the default path for **create-react-app**'s bundle, `/app/build/static/js/*.js`: - -```bash -heroku config:unset JS_RUNTIME_TARGET_BUNDLE -``` - -### 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](https://devcenter.heroku.com/articles/buildpack-api#profile-d-scripts) to make variables set by other components available to the React app by prefixing them with `REACT_APP_`. - -1. create `.profile.d/000-react-app-exports.sh` -1. make it executable `chmod +x .profile.d/000-react-app-exports.sh` -1. add an `export` line for each variable: - - ```bash - export REACT_APP_ADDON_CONFIG=${ADDON_CONFIG:-} - ``` -1. set-up & use [Runtime configuration](#user-content-runtime-configuration) to access the variables - -For example, to use the API key for the [Filestack](https://elements.heroku.com/addons/filepicker) JS image uploader: - -```bash -export REACT_APP_FILEPICKER_API_KEY=${FILEPICKER_API_KEY:-} -``` - -npm Private Packages -------------------- -Private modules are supported during build. - -1. Setup your app with a `.npmrc` file following [npm's guide for CI/deployment](https://docs.npmjs.com/private-modules/ci-server-config). -1. Set your secret in the `NPM_TOKEN` config var: - - ```bash - heroku config:set NPM_TOKEN=xxxxx - ``` - -Troubleshooting ---------------- - -1. Confirm that your app is using this buildpack: - - ```bash - heroku buildpacks - ``` - - If it's not using `create-react-app-buildpack`, then set it: - - ```bash - heroku buildpacks:set mars/create-react-app - ``` - - …and deploy with the new buildpack: - - ```bash - git commit --allow-empty -m 'Switch to create-react-app-buildpack' - git push heroku main - ``` - - If the error still occurs, then at least we know it's really using this buildpack! Proceed with troubleshooting. -1. Check this README to see if it already mentions the issue. -1. Search our [issues](https://github.com/mars/create-react-app-buildpack/issues?utf8=βœ“&q=is%3Aissue%20) to see if someone else has experienced the same problem. -1. Search the internet for mentions of the error message and its subject module, e.g. `ENOENT "node-sass"` -1. File a new [issue](https://github.com/mars/create-react-app-buildpack/issues/new). 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 main [as directed in the main instructions](#user-content-create-the-heroku-app) will always deploy an app with the most recent version of this buildpack. - -[Releases are tagged](https://github.com/mars/create-react-app-buildpack/releases), so you can lock an app to a specific version, if that kind of determinism pleases you: - -```bash -heroku buildpacks:set https://github.com/mars/create-react-app-buildpack.git#v6.0.0 -``` - -✏️ *Replace `v6.0.0` with the desired [release tag](https://github.com/mars/create-react-app-buildpack/releases).* - -♻️ Then, commit & deploy to rebuild on the new buildpack version. - - -Architecture πŸ™ ------------- - -This buildpack combines several buildpacks, specified in [`.buildpacks`](.buildpacks), to support **zero-configuration deployment** on Heroku: - -1. [`heroku/nodejs` buildpack](https://github.com/heroku/heroku-buildpack-nodejs) - * installs `node`, puts on the `$PATH` - * version specified in [`package.json`, `engines.node`](https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version) - * `node_modules/` cached between deployments - * production build for create-react-app - * [executes the npm package's build script](https://devcenter.heroku.com/changelog-items/1557); create-react-app default is `react-scripts build` - * exposes all env vars to the build script - * generates a production bundle regardless of `NODE_ENV` setting - * customize further with [Node.js build configuration](https://devcenter.heroku.com/articles/nodejs-support#customizing-the-build-process) -2. [`mars/create-react-app-inner-buildpack`](https://github.com/mars/create-react-app-inner-buildpack) - * sets default [web server config](#user-content-web-server) unless `static.json` already exists - * enables [runtime environment variables](#user-content-environment-variables) -3. [`heroku/static` buildpack](https://github.com/heroku/heroku-buildpack-static) - * [Nginx](http://nginx.org/en/) web server - * [configure with `static.json`](#user-content-web-server) (see also [all static web server config](https://github.com/heroku/heroku-buildpack-static#user-content-configuration)) - -πŸš€ The runtime `web` process is the [last buildpack](https://github.com/mars/create-react-app-buildpack/blob/master/.buildpacks)'s default processes. heroku-buildpack-static uses [`bin/boot`](https://github.com/heroku/heroku-buildpack-static/blob/master/bin/release) to launch its Nginx web server. Processes may be customized by committing a [Procfile](#user-content-procfile) to the app. - - -### General-purpose SPA deployment - -[Some kind feedback](https://github.com/mars/create-react-app-buildpack/issues/2) 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/bundling -* the file `build/index.html` or [the root specified in `static.json`](#user-content-customization) exists at runtime. +Original README is still available on the [final release tag](https://github.com/mars/create-react-app-buildpack/tree/v9.0.1). From e0678acf1272b730126fcda4886d14dcb052adb6 Mon Sep 17 00:00:00 2001 From: Mars Hall Date: Fri, 10 Jun 2022 13:19:47 -0700 Subject: [PATCH 39/39] Improve deprecation experience. --- .buildpacks | 2 +- bin/compile | 8 ++++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/.buildpacks b/.buildpacks index a34fb6fe..a73061c5 100644 --- a/.buildpacks +++ b/.buildpacks @@ -1,3 +1,3 @@ https://github.com/heroku/heroku-buildpack-nodejs.git https://github.com/mars/create-react-app-inner-buildpack.git#v9.0.0 -https://github.com/heroku/heroku-buildpack-static.git +https://github.com/heroku/heroku-buildpack-static.git#21c1f5175186b70cf247384fd0bf922504b419be diff --git a/bin/compile b/bin/compile index 53e343e0..5f6c2ac7 100755 --- a/bin/compile +++ b/bin/compile @@ -26,6 +26,14 @@ BP_DIR=`cd $(dirname $0); cd ..; pwd` # Switch to new Node auto build behavior ahead of release export NEW_BUILD_SCRIPT_BEHAVIOR=true +echo +echo "=====! create-react-app-buildpack has reached end-of-life πŸŒ…" +echo " This build may succeed, but the buildpack is no longer maintained." +echo " On the Heroku-22 stack and beyond, this may fail to build at all." +echo +echo " Please consider migrating to https://nextjs.org or https://remix.run to develop React apps which are deployable using Heroku's Node.js buildpack https://github.com/heroku/heroku-buildpack-nodejs, or you may develop your own create-react-app deployment with Node.js and Nginx buildpacks." +echo + # Use architecture of multi-buildpack to compose behavior. # https://github.com/heroku/heroku-buildpack-multi cp $BP_DIR/.buildpacks $BUILD_DIR/.buildpacks