Clarify build output & Vue example

README.md

@@ -10,10 +10,14 @@ Usage
 
 🚧 **Work in progress** 🚧
 
-A Heroku app uses this buildpack + an [npm module](https://github.com/mars/heroku-js-runtime-env).
+A Heroku app uses this buildpack + an [npm module](https://github.com/mars/heroku-js-runtime-env). 
+
+`RUNTIME_JS_`-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).
 
 ### with Vue
 
+⚠️ Vue's `npm run dev` mode does pass arbitrary env vars instead requiring settings in `config/dev.env.js`. So, dev mode seems to be broken. (Help?)
+
 ✏️ *Replace `$APP_NAME` with your app's unique name.*
 
 ```bash
@@ -25,20 +29,29 @@ git add .
 git commit -m '🌱 create Vue app'
 heroku create $APP_NAME
 heroku buildpacks:add https://github.com/mars/heroku-js-runtime-env-buildpack
+heroku config:set JS_RUNTIME_TARGET_BUNDLE=/app/dist/static/js/vendor.*.js
 heroku buildpacks:add heroku/nodejs
 heroku buildpacks:add https://github.com/heroku/heroku-buildpack-static
 
 # Serve it with static site buildpack
 echo '{ "root": "dist/" }' > static.json
 git add static.json
 git commit -m 'Serve it with static site buildpack'
+```
 
-# Add Heroku build hook to `package.json`
+Add Heroku build hook to `package.json`. Merge the following `"heroku-postbuild"` property into the existing `"scripts"` section:
+
+```json
 {
   "scripts": {
     "heroku-postbuild": "npm run build"
   }
 }
+```
+
+Then, commit this change:
+
+```
 git add package.json
 git commit -m 'Add Heroku build hook to `package.json`'
 ```
@@ -61,6 +74,23 @@ export default {
 </script>
 ```
 
+Then, commit this code & deploy the app:
+
+```bash
+git add src/components/HelloWorld.vue
+git commit -m 'Implement runtimeEnv() in a component'
+git push heroku master
+
+heroku open
+```
+
+Once deployed, you can set the `RUNTIME_JS_MESSAGE` var to see the new value take effect immediately after the app restarts:
+
+```bash
+heroku config:set JS_RUNTIME_MESSAGE=🌈
+heroku open
+```
+
 Background
 -----------
 Normally 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).

bin/compile

@@ -15,22 +15,21 @@ CACHE_DIR=$2
 ENV_DIR=$3
 BP_DIR=`cd $(dirname $0); cd ..; pwd`
 
-echo '-----> Enabling runtime environment variables'
 cd $BUILD_DIR
 
 # The following destination files are explicit dependencies in
 # .profile.d/inject_js_runtime_env.sh
 #
 # Keep any path or name changes in-sync.
 
+echo "       installing /app/.heroku-js-runtime-env/injectable_env.rb"
 lib_dir="$BUILD_DIR/.heroku-js-runtime-env"
 mkdir -p "$lib_dir"
 cp "$BP_DIR/lib/injectable_env.rb" "$lib_dir/"
-echo "       installed /app/.heroku-js-runtime-env/injectable_env.rb"
 
+echo "       installing /app/.profile.d/zzzzz_inject_js_runtime_env.sh"
 profile_d_dir="$BUILD_DIR/.profile.d"
 mkdir -p "$profile_d_dir"
 # Prepend "zzzzz_" to force sort so it's the last profile script to run.
 # This helps to it to see env changes made by other profile scripts.
 cp "$BP_DIR/.profile.d/inject_js_runtime_env.sh" "$profile_d_dir/zzzzz_inject_js_runtime_env.sh"
-echo "       installed /app/.profile.d/zzzzz_inject_js_runtime_env.sh"