See: create-react-app-buildpack's architecture for how this helps deploy React apps.
Use Ruby 1.9.3 as built-in to Cedar-14.
Run tests: bundle exec rake
Inner layer of Heroku Buildpack for create-react-app
Home Page: https://github.com/mars/create-react-app-buildpack
License: MIT License
See: create-react-app-buildpack's architecture for how this helps deploy React apps.
Use Ruby 1.9.3 as built-in to Cedar-14.
Run tests: bundle exec rake
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_______…`
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?
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.
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?
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.