{"id":15350156,"url":"https://github.com/mars/heroku-js-runtime-env-buildpack","last_synced_at":"2025-07-05T21:36:05.045Z","repository":{"id":139297974,"uuid":"125249128","full_name":"mars/heroku-js-runtime-env-buildpack","owner":"mars","description":"🔬🚧 Research towards generalization of \"JS Runtime Env\" from create-react-app-buildpack","archived":false,"fork":false,"pushed_at":"2018-03-15T23:57:57.000Z","size":31,"stargazers_count":3,"open_issues_count":4,"forks_count":9,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-15T04:35:30.460Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mars.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-03-14T17:25:23.000Z","updated_at":"2020-09-26T02:22:41.000Z","dependencies_parsed_at":null,"dependency_job_id":"13ba2d03-2e90-41d9-b098-e2b37aecd5df","html_url":"https://github.com/mars/heroku-js-runtime-env-buildpack","commit_stats":{"total_commits":15,"total_committers":2,"mean_commits":7.5,"dds":"0.19999999999999996","last_synced_commit":"1811e8c8fb56961aac530690fee96454e0412301"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/mars/heroku-js-runtime-env-buildpack","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mars%2Fheroku-js-runtime-env-buildpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mars%2Fheroku-js-runtime-env-buildpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mars%2Fheroku-js-runtime-env-buildpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mars%2Fheroku-js-runtime-env-buildpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mars","download_url":"https://codeload.github.com/mars/heroku-js-runtime-env-buildpack/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mars%2Fheroku-js-runtime-env-buildpack/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263810781,"owners_count":23515208,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-01T11:57:45.134Z","updated_at":"2025-07-05T21:36:04.992Z","avatar_url":"https://github.com/mars.png","language":"Ruby","funding_links":[],"categories":[],"sub_categories":[],"readme":"Heroku JS Runtime Env Buildpack\n===============================\nUse runtime environment variables in bundled/minified javascript apps.\n\n[![Build Status](https://travis-ci.org/mars/heroku-js-runtime-env-buildpack.svg?branch=master)](https://travis-ci.org/mars/heroku-js-runtime-env-buildpack)\n[![npm Module](https://img.shields.io/npm/v/@mars/heroku-js-runtime-env.svg)](https://www.npmjs.com/package/@mars/heroku-js-runtime-env)\n\n🔬🚧 **This is a reasearch project.** Results so far indicate that it's not generalizing to different JS frameworks as gracefully as one might hope.\n\nUsage\n-----\n\nA Heroku app uses this buildpack + an [npm module](https://github.com/mars/heroku-js-runtime-env). \n\n`JS_RUNTIME_TARGET_BUNDLE` must be set to the path glob pattern for the javascript bundle containing the [heroku-js-runtime-env](https://github.com/mars/heroku-js-runtime-env). For example:\n\n* create-react-app: `JS_RUNTIME_TARGET_BUNDLE=/app/build/index.*.js`\n* ember-cli ([example](#user-content-with-ember)): `JS_RUNTIME_TARGET_BUNDLE=/app/dist/assets/vendor-*.js`\n* vue-cli with webpack ([example](#user-content-with-vue)): `JS_RUNTIME_TARGET_BUNDLE=/app/dist/static/js/vendor.*.js`\n\n`JS_RUNTIME_`-prefixed environment variables will be made available in the running Heroku app via npm module [heroku-js-runtime-env](https://github.com/mars/heroku-js-runtime-env).\n\n\n### with Vue\n\n[Example Vue app](https://github.com/mars/example-vue-with-heroku-js-runtime-env), created in this experiment.\n\n⚠️ Vue's `npm run dev` mode does not pass arbitrary env vars instead requiring settings in `config/dev.env.js`. So, dev mode seems to be broken. (Help?)\n\n✏️ *Replace `$APP_NAME` with your app's unique name.*\n\n```bash\nnpm install -g vue-cli\nvue init webpack $APP_NAME\ncd $APP_NAME\ngit init\ngit add .\ngit commit -m '🌱 create Vue app'\nheroku create $APP_NAME\nheroku buildpacks:add https://github.com/mars/heroku-js-runtime-env-buildpack\nheroku config:set JS_RUNTIME_TARGET_BUNDLE=/app/dist/static/js/vendor.*.js\nheroku buildpacks:add heroku/nodejs\nheroku buildpacks:add https://github.com/heroku/heroku-buildpack-static\n\n# Serve it with static site buildpack\necho '{ \"root\": \"dist/\" }' \u003e static.json\ngit add static.json\ngit commit -m 'Serve it with static site buildpack'\n```\n\nAdd Heroku build hook to `package.json`. Merge the following `\"heroku-postbuild\"` property into the existing `\"scripts\"` section:\n\n```json\n{\n  \"scripts\": {\n    \"heroku-postbuild\": \"npm run build\"\n  }\n}\n```\n\nThen, commit this change:\n\n```\ngit add package.json\ngit commit -m 'Add Heroku build hook to `package.json`'\n```\n\nIn the Vue component `src/components/HelloWorld.vue`:\n\n```\n\u003cscript\u003e\nimport runtimeEnv from '@mars/heroku-js-runtime-env'\n\nexport default {\n  name: 'HelloWorld',\n  data () {\n    const env = runtimeEnv()\n    return {\n      msg: env.JS_RUNTIME_MESSAGE || 'JS_RUNTIME_MESSAGE is empty. Here’s a donut instead: 🍩'\n    }\n  }\n}\n\u003c/script\u003e\n```\n\nThen, install the npm module, commit, and deploy the app:\n\n```bash\nnpm install @mars/heroku-js-runtime-env --save\ngit add .\ngit commit -m 'Implement runtimeEnv() in a component'\ngit push heroku master\n\nheroku open\n```\n\nOnce deployed, you can set the `JS_RUNTIME_MESSAGE` var to see the new value take effect immediately after the app restarts:\n\n```bash\nheroku config:set JS_RUNTIME_MESSAGE=🌈\nheroku open\n```\n\n### with Ember\n\n⚠️ **Not working with Ember.** The bundle file integrity check fails, because this technique changes the bundle:\n\n\u003e Failed to find a valid digest in the 'integrity' attribute for resource 'https://example-ember-runtime-env.herokuapp.com/assets/vendor-05f75ec213143035d715ab3c640a3ff4.js' with computed SHA-256 integrity 'oSQ3RCkKyfwVgWjG0HDlTzDFreoQnTQCUCqJoiOJEMs='. The resource has been blocked.\n\n[Example Ember app](https://github.com/mars/example-ember-with-heroku-js-runtime-env), created in this experiment.\n\n✏️ *Replace `$APP_NAME` with your app's unique name.*\n\n```bash\nnpm install -g ember-cli\nember new $APP_NAME\ncd $APP_NAME\nheroku create $APP_NAME\nheroku buildpacks:add https://github.com/mars/heroku-js-runtime-env-buildpack\nheroku config:set JS_RUNTIME_TARGET_BUNDLE=/app/dist/assets/vendor-*.js\nheroku buildpacks:add heroku/nodejs\nheroku buildpacks:add https://github.com/heroku/heroku-buildpack-static\n\n# Serve it with static site buildpack\necho '{ \"root\": \"dist/\" }' \u003e static.json\ngit add static.json\ngit commit -m 'Serve it with static site buildpack'\n```\n\nAdd Heroku build hook to `package.json`. Merge the following `\"heroku-postbuild\"` property into the existing `\"scripts\"` section:\n\n```json\n{\n  \"scripts\": {\n    \"heroku-postbuild\": \"ember build --environment=production\"\n  }\n}\n```\n\nThen, commit this change:\n\n```\ngit add package.json\ngit commit -m 'Add Heroku build hook to `package.json`'\n```\n\nCreate a component that uses JS Runtime Env:\n\n```bash\nnpm install --save-dev ember-browserify\nnpm install --save @mars/heroku-js-runtime-env\nember generate component runtime-env\n```\n\n\nEdit the component `app/components/runtime-env.js` to contain:\n\n```\nimport Component from '@ember/component';\nimport { computed } from '@ember/object';\nimport runtimeEnv from 'npm:@mars/heroku-js-runtime-env';\n\nexport default Component.extend({\n  message: computed(function() {\n    const env = runtimeEnv();\n    return env.RUNTIME_JS_MESSAGE || 'RUNTIME_JS_MESSAGE is empty. Here’s a donut instead: 🍩';\n  })\n});\n```\n\nEdit the component template `app/templates/components/runtime-env.hbs` to contain:\n\n```\n\u003ch2\u003e{{message}}\u003c/h2\u003e\n{{yield}}\n```\n\nEdit the application template `app/templates/components/runtime-env.hbs` to contain:\n\n```\n{{runtime-env}}\n\n{{!-- The following component displays Ember's default welcome message. --}}\n{{welcome-page}}\n{{!-- Feel free to remove this! --}}\n\n{{outlet}}\n```\n\nThen, commit and deploy the app:\n\n```bash\ngit add .\ngit commit -m 'Implement runtimeEnv() in a component'\ngit push heroku master\n\nheroku open\n```\n\nOnce deployed, you would ideally set the `RUNTIME_JS_MESSAGE` var to see the new value take effect immediately after the app restarts:\n\n```bash\nheroku config:set JS_RUNTIME_MESSAGE=🌈\nheroku open\n```\n\n⚠️ **Not working with Ember.** The bundle file integrity check fails, because this technique changes the bundle:\n\n\u003e Failed to find a valid digest in the 'integrity' attribute for resource 'https://example-ember-runtime-env.herokuapp.com/assets/vendor-05f75ec213143035d715ab3c640a3ff4.js' with computed SHA-256 integrity 'oSQ3RCkKyfwVgWjG0HDlTzDFreoQnTQCUCqJoiOJEMs='. The resource has been blocked.\n\n\nBackground\n-----------\nNormally javascript apps are compiled into a bundle before being deployed. During this build phase, environment variables may be embedded in the javascript bundle, such as with [Webpack DefinePlugin](https://webpack.github.io/docs/list-of-plugins.html#defineplugin).\n\nWhen hosting on a [12-factor](https://12factor.net) platform like [Heroku](https://www.heroku.com), these embedded values may go stale when setting new [config vars](https://devcenter.heroku.com/articles/config-vars) or promoting through a [pipeline](https://devcenter.heroku.com/articles/pipelines).\n\nOriginally developed as part of [create-react-app-buildpack](https://github.com/mars/create-react-app-buildpack), this buildpack aims to solve this problem in a generalized way.\n\nHow Does It Work?\n-----------------\nWhen developing a JavaScript app, use the [npm module](https://www.npmjs.com/package/@mars/heroku-js-runtime-env) to access runtime environment variables in client-side code.\n\nThen, each time the app starts-up on Heroku, a [`.profile.d` script](.profile.d/inject_js_runtime_env.sh) (installed from the buildpack) is executed which fills in a [JSON placeholder](https://github.com/mars/heroku-js-runtime-env/blob/master/index.js#L15) (with a `REACT_APP_` legacy name) in the JavaScript bundle with the runtime environment variables. The result is 🍃fresh runtime environment variables in the production javascript bundle without recompiling.\n\n\nDevelopment\n-----------\nThe program which performs the bundle injection is written in Ruby 2.3.1, the version included in the Heroku-16 stack.\n\n```bash\ngem install bundler\nbundle install\n\nbundle exec rake\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmars%2Fheroku-js-runtime-env-buildpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmars%2Fheroku-js-runtime-env-buildpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmars%2Fheroku-js-runtime-env-buildpack/lists"}