Propose window.env as an option to have environment variables

[abdonrd]

Hi team!

Could it make sense to add something like this to modern-web as a plugin?

https://github.com/IBM/pwa-lit-template/compare/archive/dotenv#diff-83720d8f4eb7cdd15edc66184c9d2694dec62a5e92098b2ed5cd623dae3dfb0bR24-R41

I mean, a copy of process.env (from nodejs) to window.env (to browser).

Maybe a good option would be a rollup plugin that injects a variables object in window.env?
To be able to share it between the @web/dev-server and the build process.

Related info:

• Modern Web: https://modern-web.dev/docs/dev-server/writing-plugins/examples/#environment-variables
• Vue: https://cli.vuejs.org/guide/mode-and-env.html
• React: https://create-react-app.dev/docs/advanced-configuration/
• Angular: https://angular.io/guide/build#configuring-application-environments

[stephenwade]

In my project, I use @rollup/plugin-replace to have different behavior in development than in production. I think you could do a similar thing by using that plugin with @web/dev-server-rollup to replace something in your code with a value from process.env.

https://gitlab.com/stephenwade/festival/-/blob/f0d3196c57455eb593234b9dd2da9fd9451b829d/src/actions/setsData.js#L7-16
https://gitlab.com/stephenwade/festival/-/blob/f0d3196c57455eb593234b9dd2da9fd9451b829d/rollup.config.js#L20-22

[johnthad]

Neat! Do you have a similar trick for changing which index.html is rolled up? Specifically I want to change the <base> element. In dev I use <base href="/" />. However in prod the app is most often deployed under a Tomcat app, so after npm run build I must edit dist/index.html to href="/myrestapi/myappname/"`.

[abdonrd]

@stephenwade thanks for sharing! We have something similar right now:
https://github.com/IBM/pwa-lit-template#environment-configuration
But we change a path of the file in the build step.

[stephenwade]

@johnthad You could probably use the following plugin config:

replace({
  '<base href="/" />': '<base href="/myrestapi/myappname/" />',
})

[johnthad]

I found a solution: https://github.com/Cordobo/rollup-plugin-replace-html-vars

replaceHtmlVars({
  files: 'index.html',
  from: 'base href="/"',
  to: 'base href="/myrestapi/myappname/"',
}),

Since this edit takes place before index.html is copied to dist, I added && git restore index.html to my build script:

"build": "rimraf dist && rollup -c rollup.config.js && git restore index.html"

[abdonrd]

For now, we have updated the environment configuration like this:

https://github.com/IBM/pwa-lit-template#environment-configuration

[LarsDenBakker]

I think we could follow a similar convention as snowpack, using import.meta.env. https://www.snowpack.dev/reference/configuration#environment-variables This would need to be a rollup plugin, so that you can use it during build and dev.

[abdonrd]

Interesting! Vite is doing the same:

https://github.com/vitejs/vite/tree/master/#modes-and-environment-variables