What are best practices for using dotenv with elm-pages?

[shahnhogan]

HI! I was able to create somewhat of a "loader" by passing in a viteConfig in the elm-pages.config.mjs. I'm curious what others in the community have tried.

import dotenv from "dotenv";
dotenv.config();

const viteConfig = defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), "");
  const envVariables = Object.entries(env).reduce((acc, [key, value]) => {
    acc[`process.env.${key}`] = JSON.stringify(value);
    return acc;
  }, {});

  return {
    define: envVariables,
  };
});

export default {
  vite: viteConfig,
  ...
}

[dillonkearns]

Hello @shahnhogan, thanks for starting the discussion!

I believe just calling dotenv.config() is sufficient. I don't think that passing those env variables to vite is necessary since elm-pages isn't accessing environment variables through Vite, it is accessing them through directly through NodeJS.

One user came up with this solution, which looks like the same idea:

https://github.com/dillonkearns/elm-pages-3-alpha-starter/pull/12/files

[shahnhogan]

That is definitely simpler! 🤣