Use code generation for putting environment variables into a ts file

[AndKiel]

If you don't like loaders or putting ENV on the window that's mentioned in the official docs, you can easily use code generation (ts-morph or native API) to create a config file that exports a constant with your values.

For code generation, I had to create a separate tsconfig file and override module to commonjs. Otherwise, I was getting various errors about file extension or imports.

// tsconfig.codegen.json
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "module": "commonjs"
  }
}

A simple script using ts-node could look like this:

// package.json
{
  // ...
  "scripts": {
    "codegen:config": "ts-node --project tsconfig.codegen.json app/code-generation/config.ts",
    // ...
  "devDependencies": {
    "ts-morph": "13.0.3",
    "ts-node": "10.5.0",
    // ...
}

With the script being:

// app/code-generation/config.ts
import { Project, VariableDeclarationKind, Writers } from "ts-morph";

void (async () => {
  const project = new Project();
  project.addSourceFilesAtPaths("app/__generated__/**/*.ts");

  const configFile = project.createSourceFile("app/__generated__/config.ts");
  configFile.addVariableStatement({
    declarationKind: VariableDeclarationKind.Const,
    declarations: [
      {
        name: "config",
        initializer: Writers.object({
          MY_API_URL: `new URL("${process.env.MY_API_URL}"),`,
        }),
      },
    ],
    isExported: true,
  });

  await project.save();
})();

we would get the following file:

// app/__generated__/config.ts
export const config = {
        MY_API_URL: new URL("a value from process.env.MY_API_URL"),
    };

I hope it can help anyone struggling with using environment variables in remix.