GithubHelp home page GithubHelp logo

Comments (7)

mars avatar mars commented on May 17, 2024

Hi @jared-dykstra. Thank you for opening this pull request. Coincidentally, I am generalizing this JS Runtime Env pattern, experimenting with a version for use by any bundled JS app:
https://github.com/mars/heroku-js-runtime-env-buildpack

With this generalized technique, it’s always necessary to specify the bundle’s location through config var JS_RUNTIME_TARGET_BUNDLE

Following the results of this generalized JS Runtime Env, create-react-app-buildpack (the parent of this repo) may migrate to use that solution.

This PR elegantly solves the part of the same problem through introspection of static.json, but remains specific to create-react-app & the static site buildpack.
Also requires some time to consider how this might break things for other edge cases. I believe some folks may be moving files around after this buildpack builds the bundle. Would this break their build?

Thanks again for this πŸ™‡β€β™‚οΈπŸ™ Great to see how other folks are using create-react-app-buildpack.

from create-react-app-inner-buildpack.

jared-dykstra avatar jared-dykstra commented on May 17, 2024

Thanks, @mars .

You're welcome to do with PR #8 as you wish, especially as a change to the outer bundle is required to use this change.

Unfortunately, I do not know enough to answer your question about whether or not this would break their build. It seems likely that the worst-case is REACT_APP_VARS_AS_JSON token isn't replaced and it fails the same way it would without my change.

For now, I'm using my forks:
https://github.com/jared-dykstra/create-react-app-buildpack
https://github.com/jared-dykstra/create-react-app-inner-buildpack

from create-react-app-inner-buildpack.

weyert avatar weyert commented on May 17, 2024

Ah yes, this might fix the issue when you use vendor spitting with CRA. Just got bitten by this today. The problem when do that it won't be able to find the file as main.*.js doesn't exist and then just ls just exists which causes the following:

Injecting runtime env into app
       bin
       boot
       build
       cache
       dev
       etc
       exec
       home
       lib
       lib64
       media
       mnt
       opt
       proc
       root
       run
       sbin
       srv
       start
       sys
       tmp
       usr
       var (from .profile.d/inject_react_app_env.sh)
       /app/.heroku/create-react-app/injectable_env.rb:27:in `read': No such file or directory @ rb_sysopen - app (Errno::ENOENT)

from create-react-app-inner-buildpack.

mars avatar mars commented on May 17, 2024

I'm considering adding a simple JS_RUNTIME_TARGET_BUNDLE env var to support overriding of the default bundle location.

This would support setting a special bundle location for the two situations mentioned so far:

  1. default bundle in a customized static.json root
  2. split bundle for the bundle containing @mars/heroku-js-runtime-env module

I don't see another graceful way to handle all the cases where the bundle is not at the expected location. Any other ideas?

from create-react-app-inner-buildpack.

mars avatar mars commented on May 17, 2024

I've added support for custom bundle location as a feature branch. Try it out with this buildpack branch setting:

heroku buildpacks:set https://github.com/mars/create-react-app-buildpack.git#custom-bundle-path

Then, set JS_RUNTIME_TARGET_BUNDLE to the bundle location.

See the branch's README custom bundle location for more detail on how to use it.

from create-react-app-inner-buildpack.

weyert avatar weyert commented on May 17, 2024

Thank you @mars. I will give it a try. Currently in the middle of going into production

from create-react-app-inner-buildpack.

mars avatar mars commented on May 17, 2024

Support for custom bundle location with JS_RUNTIME_TARGET_BUNDLE is now part of the buildpack.

from create-react-app-inner-buildpack.

Related Issues (5)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.