-
Notifications
You must be signed in to change notification settings - Fork 10.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Non-built env #1527
Comments
Either way could work but
So you want to have all the data for each environment built in? You could just put this data in a JSON or YAML file and require it in. Then infer the environment by what the hostname is e.g. staging.example.com vs example.com. |
No, not quite built in. I want it at run time. So not part of the build. Something that I ship alongside that gets read in by running scripts. Something like env.json and then the runtime react components can make use of those values just like all the other Gatsby data sources. That way, my built sites are portable and don't have environment specifics baked in. Which means I wouldn't have to build per environment. Just build once and use a different .json file per environment. |
If I can modify that config with things like JSON transforms, etc... Maybe. |
Gatsby is setup with a json-loader. Perhaps just require the env.json file wherever you need it? |
Won't that still constitute including it at build time? |
Gatsby is a static site builder ;-) If you really want to load it completely at run-time, you could just put the env file in the static folder and do an ajax request for it https://www.gatsbyjs.org/docs/adding-images-fonts-files/#using-the-static-folder Or store the env data somewhere else and load it from there. |
@atrauzzi I needed to get some environment variables into the react frontend at runtime. Couldn't figure out how to insert them into
In gatsby v1.3.0, the variable definitions in I think the more "gatsby" way of doing it would be to use |
I understand that the generated site is static, but you still might want some values during early bootstrap to allow for minor variances. The generated site itself would remain unmodified. If I use ajax requests to accomplish this, I might be too late in the bootstrap for some things? |
@atrauzzi it'd be possible to use ajax to load in environmental variables. You'd be adding those as globals into webpack? You can use https://www.gatsbyjs.org/docs/node-apis/#modifyWebpackConfig for this. |
Well, the only question would be, do I have to rebuild the site to update those values with this approach?
It's just a small file that gets sourced for environment specific values, but very early on during bootstrap. And it's something I can swap in and out with different values to configure the static site. The trick though is that the environment variables would be loaded at run time, not bundled in. Would |
@KyleAMathews - facebook/create-react-app#578 - A similar example in terms of what I'd like to be able to do here. I wonder if it already exists in the ecosystem, Gatsby just needs it put together as a plugin? Maybe a The gist of it is that bundling environment variables at build time is usually done with the intention of abiding by 12factor conventions. While doing this seems to accomplish the objective, it isn't 100% accurate and might be a bit of a collective misunderstanding. To really get the best out of 12factor, your build artifact should be able to be promoted through the various environments without requiring modification. Digging a little further: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/webpack.config.js#L47 I'm wondering if this is causing an odd thing inside of my built JS. Seems like everywhere |
@atrauzzi thank you very much for having raised those interesting questions. Please, may I ask you what did you end up to? |
At present I haven't been able to come up with a solution. I think the idea of .env might not be the right way of expressing what I was after -- even though conceptually it's quite similar. What I want is application configuration, so at that point, I'd just have to make my app responsible for issuing a network request to some well-known path relative to the current page to fetch information. Hard to say, I think there's still worthwhile thought/discussion on this. But expressing it as "env" may not do the idea justice as env is really more about stuff happening during the webpack & bootstrapping and operation of gatsby. |
Thanks @atrauzzi ! |
There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications we're clearing out old issues as many of them have already been resolved with the latest updates. This issue is being closed because there hasn't been any activity for at least 60 days. Feel free to open a new one or this one if you'd like to throw in a thing or two 😄 👍 |
Recent environment support is great, although I'm wondering if there could be a way for Gatsby to include an externally provided environment-like configuration at run time that's available early in the bootstrap.
Rationale for this is that once a site is built, the environment data is baked in. If I'm building on a build server and then publishing to an environment in two different steps, I might want to use that same build artifact for all the different environments rather than rebuilding each time.
Examples of the kind of information I'm thinking of are publishable client ids, trusted hostnames and depending on application, tenant/white label parameters.
Only question in my mind is whether something like this belongs in graphql or in a simulated node process.env.
The text was updated successfully, but these errors were encountered: