How to specify which .env file to use for build scripts?

[juniorforlife]

Hello I'm new to Solid and I can't figure out how to use .env.staging and .env.production for the build scripts.
In React I do something like this which relies on a third-party library:

"scripts": {
    "start": "env-cmd -f .env.staging react-scripts start",
    "build-stg": "env-cmd -f .env.staging react-scripts build",
    "build-prod": "env-cmd -f .env.production react-scripts build",
  },

Since Solid Start is a meta framework, I assume we have this supported out of the box?

[atk]

Solid Start is based on vite, which in this case does the heavy lifting for us: https://vitejs.dev/guide/env-and-mode.html#env-files

[juniorforlife]

I have a env.staging file with SERVER_API_KEY=123 and access it using process.env.SERVER_API_KEY but it's undefined. Are there any extra steps I need to do?

[atk]

Only env variables starting with VITE_ will be exposed.

[juniorforlife]

then how do we use env on the server side? The SERVER_* syntax I gave above is from this PR
#585

[atk]

There you can usually rely on process.env.SERVER_...

[Antebios]

The Build command is "solid-start build" and DEV command is "solid-start dev". Looking at "node_modules/solid-start/bin.cjs" it does NOT accept the "--mode" argument.

Build takes:
.command("build")
.option("-r --root", "Root directory")
.option("-c, --config", "Vite config file")

Dev takes:
.command("dev")
.describe("Start a development server")
.option("-o, --open", "Open a browser tab", false)
.option("-r --root", "Root directory")
.option("-c, --config", "Vite config file")
.option("-i,--inspect", "Node inspector", false)
.option("-p, --port", "Port to start server on")

Nowhere do either take Vite's "mode" argument. Should we replace Solid-Start's scripts macro and use "vite build --mode dev" command instead?

[eztinkerdreams]

I have same question. If I want to run solid-start dev --mode=production i.e. use my .env.production.local file How would I do this? This is an app in vercel I would like to run the app locally and use production scoped dependencies like the production KV store etc...

[AlexErrant]

There's an example of env vars used with vercel here https://github.com/nextauthjs/solid-start-auth-example

Shameless plug, if for anyone using Cloudflare Workers, I made an example here https://github.com/AlexErrant/SolidStart_AuthJs_CloudflareWorkers

To join the above discussion, I would advise against storing sensitive information in VITE_ prefixed vars. Those vars are for non-sensitive stuff like "this is my staging domain" or "staging env has an orange header". Sensitive env vars should be runtime only! I.e. they should NOT be bundled into your Vite build - unless you like storing API keys in plain text to be pushed around to deployment servers...

Let me be clear - there are (at least) two things being discussed: "How to specify which .env file to use for build scripts?" to which the answer is "use VITE prefixed env vars" and use Vite "modes", see this for details, and a second discussion regarding SERVER_API_KEY=123 which should definitely not be VITE_ prefixed. You should NOT stick sensitive info in your build! Those should be injected by your runtime: Cloudflare Workers, Vercel, etc. So, go to Vercel/Cloudflare and change your env vars there. Those env vars should not be related to your build.

For Cloudflare Workers, if you're running locally, you're using "Miniflare", so refer to that documentation on how to load an env file. https://miniflare.dev/core/variables-secrets For vercel, looks like local env vars are discussed here https://vercel.com/docs/projects/environment-variables#development-environment-variables

[eztinkerdreams]

Hi @AlexErrant Thanks for responding. Great info, and I was fully aware of all this, none of which answers my question, or this which are pretty specific.

[eztinkerdreams]

I was able to essentially get what I needed by adding a new script target and using vite dev --mode=production instead of solid-start dev The documentation mentions that vite preview should essentially do the same thing, however I couldn't get vite preview to work. Things are not working exactly as I would expect, I'm still having issues with css bundles/post-css not working using --node=production but I've got things working for my needs now

[AlexErrant]

none of which answers my question

My bad - that's what I get for shooting from the hip. It's never occurred to me to try to run a prod build locally... I'm relatively new to this whole webdev thing 😳 So, I have no answer to your question. Glad to see you've found a workaround though.

If you don't mind elaborating - why would you run a prod build locally? Is it to like, make sure that minification/sourcemaps/buildvars are working?