Doc Site: Environment variable flag

[samrichca]

Problem

I was adding for a feature flag for the Documentation section, and discovered that using a simple localStorage flag isn't appropriate in this case:

1. Gatsby uses server-side rendering and doesn't know what window.localStorage is because window doesn't exist on the server. Window is not defined gatsbyjs/gatsby#309
2. Using a localStorage flag on componentDidMount or other hacks will probably not create a seamless experience, and could be complicated to remove later.
3. I would like to prevent Documentation from being built & deployed on https://overture.bio, without holding back prod-safe changes.

Solution

Gatsby and Netlify have built-in support for environment variables.

https://docs.netlify.com/configure-builds/environment-variables/
https://www.gatsbyjs.com/docs/environment-variables/

Proposal

• Add a GATSBY_DOCS env variable.
• Use this flag to show/hide links to Docs, and if possible, prevent Docs from being built.
• GATSBY_DOCS=true when...
  • netlify deploy (i.e. creating Netlify links for QA)
  • GATSBY_DOCS=true gatsby build && gatsby serve (local)
• GATSBY_DOCS=false when...
  • Netlify automatically builds/deploys the master branch and/or PRs against master
  • netlify deploy --prod (i.e. deploying to overture.bio)
  • overture.bio
  • gatsby build && gatsby serve (local)

[samrichca]

work remaining: need to test this on netlify

[samrichca]

the objective here is to make sure feature flags (for documentation) & secrets (for algolia search) work as expected in netlify's 3 standard contexts.

check the browser console in these links - no UI changes made in this branch.

example console log for branch deploy:

SHOW_DOCS (feature flag) expecting 'true' on QA, 'false' on prod
> true 
NODE_ENV (Gatsby environment) expecting 'production'
> production 
GATSBY_LOCAL_TEST (checking .env file for local secrets)
expecting 'local' when built locally, 'undefined' when built by netlify
> local

• production: (pretending to be overture.bio)
  • https://5f7cc3d704cac12c50f05d1f--overture.netlify.app/
  • GATSBY_LOCAL_TEST=local
  • SHOW_DOCS=false
  • note: I built this one locally and deployed it to a draft URL because I don't want to deploy this to the overture.bio site.
• deploy preview: (PR on master)
  • https://5f7cc5caea62b10008574a01--overture.netlify.app/
  • GATSBY_LOCAL_TEST=undefined
  • SHOW_DOCS=false
• QA/branch deploy version: (what I would send to Brandon to test)
  • https://5f7cc064dca5262acf19d531--overture.netlify.app/
  • GATSBY_LOCAL_TEST=local
  • SHOW_DOCS=true

---

PR: overture-stack/website#80

[b-f-chan]

Tested all 3 links above:

• Console logs show the correct flags and values in all 3 scenarios
• HOWEVER, ISSUE: In final QA scenario, the doc menu doesn't actually appear even though SHOW_DOCS is set to true

Need to check with @samrichca if this is intentional or a bug. Even if intentional, this does not allow me to test that the flag actually suppresses the doc menu (or not)

[samrichca]

@b-f-chan no menu visible on this branch, it sounds like you got the right result!

[b-f-chan]

Confirmed with @samrichca, since intentional, we'll test actual megamenu visibility in #46

This ticket is verified, can be closed