mars / create-react-app-inner-buildpack

Inner layer of Heroku Buildpack for create-react-app

There's nothing like making things

Making things work, gracefully, repeatably, or at-all 🥵, considering other perspectives, the morning after many hours of being stuck, using the good patterns preceeding myself, & documenting process along the way, reaching toward some ever unattainable perfection in software, or in anything.

So here is over a decade of code memories, old & new, available to execute on your own machine, or one(s) you rent, to help each other figure this all out, and hopefully make the world a better place for all humans, use it well, in love 🙏💜

create-react-app-inner-buildpack's Issues

JS_RUNTIME_TARGET_BUNDLE not set during `heroku ps:exec`

I am trying to deploy a React app not using CRA to Heroku using the create-react-app-buildpack. I am running into a bug that I believe is related to this inner buildpack.

Since I'm not using CRA, I have set a custom path ("dist/") for my bundle.js output. Thus, I am setting a custom path for JS_RUNTIME_TARGET_BUNDLE:

heroku config:set JS_RUNTIME_TARGET_BUNDLE='/app/dist/*.js'

My app has an Nginx 404 page show up on deploy. So, I SSH into the Dyno to check out the issue:

$ heroku ps:exec
Establishing credentials... done
Connecting to web.1 on REDACTED...
ls: cannot access '/app/build/static/js/*.js': No such file or directory
Error injecting runtime env: bundle not found '/app/build/static/js/*.js'. See: https://github.com/mars/create-react-app-buildpack/blob/master/README.md#user-content-custom-bundle-location
$ ...

My natural conclusion is that https://github.com/mars/create-react-app-inner-buildpack/blob/master/.profile.d/inject_react_app_env.sh#L8 is not working properly. I have triple-confirmed that JS_RUNTIME_TARGET_BUNDLE is indeed set on my app and I have forced multiple redeploys. I also have the root set in my static.json file. Not sure what else I can do here to set the custom path to my root.

Thank you for the help.

Heroku build number

Hi there,

Thanks for creating this build pack. Really appreciate the effort and would be stuck without it.

I'm wondering if there's some way of using this to expose the Heroku deployment number to our React app? Is it held in an environment var or as part of the build artefacts?

Failed deployment with dokku

Hi,

I'm just testing the create-react-app-buildpack with dokku and am having trouble. I've created a skeleton React app using create-react-app, selected the buildpack, and my deployment is rejected as follows:

=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-static.git
=====> Detected Framework: Static HTML
remote:   % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
remote:                                  Dload  Upload   Total   Spent    Left  Speed
remote: 100  838k  100  838k    0     0  1723k      0 --:--:-- --:--:-- --:--:-- 1722k
-----> Installed directory to /app/bin
       Using release configuration from last framework (Static HTML).
remote: cat: /tmp/build/last_pack_release.out: input file is output file
-----> Discovering process types
-----> Releasing test-react-app (dokku/test-react-app:latest)...
-----> Deploying test-react-app (dokku/test-react-app:latest)...
-----> Attempting to run scripts.dokku.predeploy from app.json (if defined)
-----> No Procfile found in app image
-----> DOKKU_SCALE file not found in app image. Generating one based on Procfile...
-----> New DOKKU_SCALE file generated
=====> web=1
-----> Attempting pre-flight checks
       For more efficient zero downtime deployments, create a file CHECKS.
       See http://dokku.viewdocs.io/dokku/deployment/zero-downtime-deploys/ for examples
       CHECKS file not found in container: Running simple container check...
-----> Waiting for 10 seconds ...
efabdb4ae8207039adea204502846609e5b4ebbce0e5eb66692a35d28cd62f54
remote: App container failed to start!!
=====> test-react-app web container output:
       cat: /app/Procfile: No such file or directory
       Injecting runtime env into /app/build/static/js/main.d9ea9b9a.js (from .profile.d/inject_react_app_env.sh)
       setuidgid: usage: setuidgid account child
       cat: /app/Procfile: No such file or directory
       Injecting runtime env into /app/build/static/js/main.d9ea9b9a.js (from .profile.d/inject_react_app_env.sh)
       setuidgid: usage: setuidgid account child
       cat: /app/Procfile: No such file or directory
       Injecting runtime env into /app/build/static/js/main.d9ea9b9a.js (from .profile.d/inject_react_app_env.sh)
       setuidgid: usage: setuidgid account child
       cat: /app/Procfile: No such file or directory
       Injecting runtime env into /app/build/static/js/main.d9ea9b9a.js (from .profile.d/inject_react_app_env.sh)
       setuidgid: usage: setuidgid account child
       cat: /app/Procfile: No such file or directory
       Injecting runtime env into /app/build/static/js/main.d9ea9b9a.js (from .profile.d/inject_react_app_env.sh)
       setuidgid: usage: setuidgid account child
       cat: /app/Procfile: No such file or directory
       Injecting runtime env into /app/build/static/js/main.d9ea9b9a.js (from .profile.d/inject_react_app_env.sh)
       setuidgid: usage: setuidgid account child
=====> end test-react-app web container output
To foo:test-react-app
 ! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'dokku@foo:test-react-app'

I thought this would use the static buildpack, which doesn't require a Procfile, so I'm not sure why this is failing. Any thoughts?

It throws an error when Injecting runtime env into a file when the file has empty space in its name

I got the following error when I build my app.
/app/.heroku/create-react-app/injectable_env.rb:27:in read': No such file or directory @ rb_sysopen`

The reason why is that one of the generated js files has space in its name.

Determine js_bundle path from static.json, if present

The js_bundle path is currently hardcoded:

js_bundle=/app/build/static/js/main.*.js

However, the outer buildpack may set a different root via static.json, which causes the js_bundle to be produced at a different path.

The js_bundle path should be derived from the content of /app/static.json's root if present and retain the current behavior if not.

js_bundle=/app/${static.json.root}/build/static/js/main.*.js

Without this change, the following error results at runtime from sites deployed to Heroku, as the REACT_APP_VARS_AS_JSON token is not replaced.

Runtime env vars cannot be parsed. Content is `{{REACT_APP_VARS_AS_JSON_______…`