Stale runtime config (cache-control header)

[StevePavlin]

Hello! I'm wondering the support for heroku release phase: https://devcenter.heroku.com/articles/release-phase

What I'm trying to do it rebuild the react app after changing a REACT_APP env var or promoting from staging -> production, so I have:

release: npm run build (performs react-scripts build)

Doing this rebuilds the app but doesn't seem to change the variable on the app. I've also tried the runtime configuration with no success. I have to re-deploy with github for the changes to work. Is there something I'm missing in the release command?

Thanks.

[mars]

Hi @StevePavlin,

This buildpack already supports what you’re trying to accomplish.

See: Runtime config with Environment Variables

[StevePavlin]

Hi @mars

Thanks for your message. This is what I've tried:

import runtimeEnv from '@mars/heroku-js-runtime-env';


class App extends Component {

  render() {

    // Load the env object.
    const env = runtimeEnv();

    return (
            <div>
              test var: {env.REACT_APP_TEST}
           </div>
       )
    }
}

Once I change the env variable on heroku from ex. TEST to test1, heroku says deployed and restarts the dyno, but the variable doesn't change. Any idea?

[mars]

This runtime configuration technique is well-founded, works for many folks including myself, so there must be something else causing this not to work:

• Is the app really using this buildpack? What is output from heroku buildpacks?
• Is the code deployed from the intended branch? Are you using master? If not deploy requires specifying source branch, like other in git push heroku other:master.
• What is full output of the build log?
• What is output into heroku logs -t as the app starts up?

[mars]

Also,

• How did you install the js-runtime module?
• Did you commit the package.json & package-lock.json with those updates?

[StevePavlin]

Hi @mars , thanks for the support. The issue was actually having a cache control header on javascript resources in static.json:

    "**.js": {
      "Cache-Control": "public, max-age=31536000"
    }

If anyone else is having this issue, make sure the bundle isn't being served from cache!

[mars]

Wow, great detective work on that ✨

Was the problematic cache control header something you added, or was it from the buildpack default?

If it’s from the default, then I will address it as a bug to fix 🙇‍♂️💜

[StevePavlin]

This is my static.json:

{
  "root": "build/",
  "routes": {
    "/**": "index.html"
  },
  "headers": {
    "/": {
      "Cache-Control": "no-store, no-cache"
    },
    "**.js": {
      "Cache-Control": "public, max-age=31536000"
    },
    "**.css": {
      "Cache-Control": "public, max-age=31536000"
    }
  }
}

These properties are not default, I believe I added them a while ago to fix a routing issue I had. It may be worth to add a small note in the docs to ensure your bundle isn't being served from cache and to check the static.json for the Cache-Control header.

It also may be a good future feature to increment a ?v= querystring to the bundle filename that gets incremented every restart to cachebust the bundle somewhere here: https://github.com/mars/create-react-app-inner-buildpack/blob/master/lib/injectable_env.rb

[stephenjwatkins]

We've hit caching issues as well, and agree with @StevePavlin's thought about adding some kind of cachebust on the filename at restart when the env changes.

Essentially, if you open a freshly built app in the browser, then change the env vars and revisit the page, the changes don't take effect since the static files are (rightfully) cached. Opening an incognito window will surface the app with the changed vars.