Solid: environment variables

[tehdarthvid]

How does one work with environment variables? Can it be done without a bundler?

[ryansolid]

Sorry if my answer is going to sound a bit open ended. It is just that specifically environment variables are outside of the scope of the library. The short answer is no more or less. But you have a few options.

1. Render them into the page in a script tag when serving. This probably only works if you have a webserver that is serving pages and dynamic rendering them. Less common in pure SPA.

2. Use a compiler/transpiler. Babel etc.. should have ways to do string replacement at build time without getting into the full config of a bundler.

3. Use a bundler like Webpack, Rollup, or Parcel. Obviously a bit more configuration. But CLI tools like Vue-Cli or Create Solid App make this easy for their specific library. With Create Solid you just put an .env file at the root of the file and should be good to go. But technically this is still using a bundler.

I hope that helps. I'm not sure if people have seen other ways? These are the only ways I'm aware of currently.

[tehdarthvid]

Thanks, appreciate it! :)

In my use case, I was porting over my personal website. It has the current git hash if the build on the page, the hash being an env var in a GitHubAction. I would also sometimes put the URLs of APIs in the env var.

Following the app creation steps in the README's Installation section, there was no bundler, and I couldn't find much info on possible build params/configurations. Looking at the Real World example, I saw rollup, which I do use for injecting env vars in Vue/Svelte. In Svelte, it seems the build experience intent was to use a bundler, so adding env vars via that is obvious. I was wondering what intended build experience for Solid is. There's not much info out there yet for me to make a guess. :)

Looking forward to how this evolves. :)

[ryansolid]

Yeah I realize I'm light on documentation. I explain the babel plugin but that is about it. Truthfully I just need to write guides as the README isn't the best place for all this information. It's also been pointed out to me now a few times I tend to make a lot of assumptions that I've started to refer to as React blinders. I basically assume everyone coming from using React and assume Solid works the same way. I tend to take using stuff like Rollup or Webpack for granted and point people at Create Solid App if they just want to try stuff.

Personally I really like rollup. But I write a lot of demos where CSS is already prehandled etc. rollup-plugin-postcss is pretty good for css. Webpack still has a leg up with dev server and it is the only place where Solid's Hot Module Replacement plugin works (but it's pretty basic and wipes out downstream components anyway). Parcel is cool too. All the CodeSandbox demos use it and it zero config more or less, but I've never used it in a substantial project (whereas Rollup is actually what I use at work).

So if I was to recommend anything today it would be Webpack.

EDIT:
It might just be the order of the README. If I move the Solid State Section under Solid Rendering it would flow better from an installation standpoint.

EDIT 2: Done

[tehdarthvid]

I basically assume everyone coming from using React and assume Solid works the same way. I tend to take using stuff like Rollup or Webpack for granted and point people at Create Solid App if they just want to try stuff.

Since you mentioned this, I went back to React (it's been a while) to see how they handle it these days. The React doc says this:

Note: You must create custom environment variables beginning with REACT_APP_. Any other variables except NODE_ENV will be ignored to avoid accidentally exposing a private key on the machine that could have the same name. ...

These environment variables will be defined for you on process.env. For example, having an environment variable named REACT_APP_NOT_SECRET_CODE will be exposed in your JS as process.env.REACT_APP_NOT_SECRET_CODE.

So, I tried making env vars as SOLID_APP_xxx and, lo and behold, they are available as process.env.SOLID_APP_xxx!

Not sure if this was intentional, but it works for what I need! :)

[ryansolid]

Oh yeah. Create Solid App is a fork of Create React App so it should mostly work the same. That's great. I have to admit I don't even remember all the secrets. I basically ported what made sense and then replaced React with Solid everywhere else. I know not the show of confidence one would hope for. But it was practical way to get CLI tools without having the resources behind those projects. One exception is I never ported ejection over as it was more complicated. So I'm sure that will come up at some point.