.env vars in the front-end are not working

[c3ho]

What happened:
We can't use any of the .env vars in the front-end code. We have the following code in gatsby-config.js which should enable us to do so though

require('dotenv').config({
  path: path.join(__dirname, '../../', '.env'),
});

What should have happened:
Be able to use .env vars in front-end code
How to reproduce it (as precise as possible):

Anything else we need to know?:

Environment:

• OS: Windows 10
• Browser: Chrome

[humphd]

You have to expose these via sitemetadata, and I already have hooks and class-based ways to get it via Gatsby's GraphQL. See my changes in https://github.com/Seneca-CDOT/telescope/pull/690/files for an example. Just read in env vars at build time, like I do with telescopeUrl, and then expose them in the sitemetadata. Then you can get them in your components in the frontend.

[c3ho]

I was checking your code, your comment at the top file made it seem like it was only for components would it work in the gatsby-config file?

[humphd]

Specifically:

• https://github.com/Seneca-CDOT/telescope/pull/690/files#diff-aee52c9fc82b6dcbac2c81273c1cd19d
• https://github.com/Seneca-CDOT/telescope/pull/690/files#diff-c58aeb5861602d759237496b8c98a456

And my discussion of how this works in #690 (comment).

[humphd]

The gatsby-config file can read env vars at build time, yes. That's how I do the telescopeUrl.

[c3ho]

Solved