Is there an agreed upon way to have environment variables in the application ?

[esperancaJS]

In Angular-CLI they have a very straightforward way: https://github.com/angular/angular-cli/wiki/stories-application-environments

Before implementing my own solution I would like to be sure there isn't already a way that most people are using and agreeing upon.

[lukeed]

You can add whatever you want via DefinePlugin:

// preact.config.js
const webpack = require('webpack');

module.exports = function (config) {
  config.plugins.push(
    new webpack.DefinePlugin({
      SECRET: JSON.stringify('my-secret'),
      PASSWORD: JSON.stringify('my-password')
    });
  );
}

A lot of people also choose to use dotenv since they're already familiar with it.

We're not opinionated on what you do because (1) it's a really personal choice and (2) there are lots and lots of options out there. 😄

[ForsakenHarmony]

does dotenv work with webpack?

[joshuataylor]

I've been using https://github.com/robinvdvleuten/preact-cli-plugin-env-vars to great success.

[esperancaJS]

I will just say that I'm not super happy with using .env variables for FE development.
Since in the FE there are no secrets anyway and when a new developer jumps on a FE project running npm i and npm start should get him started, while with .env variables he also has to go arround asking people for the .env files and updating them manually latter on when any url changes

[joshuataylor]

I like using env values to separate production and development URLs, or test with custom URLs. For example, I can build an environment for a PR and override the URL of our API to specialised staging URL for the PR.

It has its uses, and yes, agreed that there are no secrets in the frontend land.