The env variable in start is ... interesting!

[ImSingee]

Imagine you have these .env files:

# .env
VITE_TEST=233
TEST=666

#.env.development
VITE_TEST=233-DEV
TEST=666-DEV

Then run your start project in dev mode.

For the following component:

function Home() {
  return (
    <div>
      <div>VITE_TEST: {import.meta.env.VITE_TEST}</div>
      <div>TEST: {import.meta.env.TEST}</div>
    </div>
  );
}

Yes, it will be

VITE_TEST: 233-DEV
TEST:

But can you guess the following output from the api route?

import { json } from "@tanstack/react-start";
import { createAPIFileRoute } from "@tanstack/react-start/api";

export const APIRoute = createAPIFileRoute("/api/test")({
  GET: () => {
    return json({
      env: {
        "import.meta.env": {
          VITE_TEST: `${import.meta.env.VITE_TEST}`,
          TEST: `${import.meta.env.TEST}`,
        },
        "process.env": {
          TEST: `${process.env.TEST}`,
          VITE_TEST: `${process.env.VITE_TEST}`,
        },
      },
    });
  },
});

Show answer

{
  "message": {
    "import.meta.env": {
      "VITE_TEST": "233-DEV",
      "TEST": "undefined"
    },
    "process.env": {
      "TEST": "666",
      "VITE_TEST": "233"
    }
  }
}

Did you guess it right?

---

Now, change your VITE_TEST to anything else (like oh-my-god) in .env.development (do not restart dev server - just see how hot-update works)

Can you guess what's the new output?

Show answer

For the first one (component):

VITE_TEST: 233
TEST:

And for the second one (api):

{
  "env": {
    "import.meta.env": {
      "VITE_TEST": "233",
      "TEST": "undefined"
    },
    "process.env": {
      "TEST": "666",
      "VITE_TEST": "233"
    }
  }
}

Yes, the .env.development is ignored now!