Stencil: Stencil ENV support

[danbucholtz]

When building an app with Stencil, it would be terrific if there was a way to differentiate between environments. In @ionic/app-scripts, we use process.env.IONIC_ENV set to dev or prod. It would be awesome to support this in Stencil too.

Real world use case:
I am implementing an app where I need to hit one endpoint for dev, and another for prod.

https://dev.tacotime.com/tacos and https://tacotime.com/tacos for example.

Thanks,
Dan

[cjorasch]

There are times where it is useful to de-couple the build mode (dev or prod) from the configuration of the client app (dev or prod endpoints). For example, there are times where you want to to a production build with minification, etc. but still use the dev endpoint.

We have used an approach where there are several appConfig json files in a config folder. These are named dev, stage, prod, test, etc. Each of the files specifies client settings related to that configuration. For example, endpoints, local storage prefix keys, logging settings, options flags. During our build process we copy a config file to a known location where it can be imported into client code but it would be great if the Stencil build process provided a standard approach for this type of configuration.

[jthoms1]

I think this is a documentation issue. We currently set process.env.NODE_ENV to development or production depending whether this is dev mode or being built for a production release. You should then be able to add a simple check in an if statement.

let endpoint: string;

if (process.env.NODE_ENV === 'production') {
  endpoint = 'https://tacotime.com/tacos'
} else {
  endpoint = 'https://dev.tacotime.com/tacos';
}

[danbucholtz]

Perfect, thanks @jthoms1! I did not know that was being set.

Thanks,
Dan

[cjorasch]

When I access process.env at runtime I always get an empty object. This happens with both production and dev builds. Is there something else I need to do to access this information?

npm start

// From component
console.log(process.env)

// Console output
{}

[danbucholtz]

I chatted with @jthoms1 offline about this one. It has to be in a very specific format:

if (process.env.NODE_ENV === 'production') {

} else {

}

I would propose that the TS Transform used to do this just transforms process.env.NODE_ENV 'production' or 'dev' instead of looking for (process.env.NODE_ENV === 'production').

What do you think, @jthoms1?

Thanks,
Dan

[cjorasch]

I do not get a value in production either.

nom run build
nom run serve

// component.ts
console.log('NODE_ENV', process.env.NODE_ENV);

// output
NODE_ENV undefined

[danbucholtz]

@cjorasch,

You literally have to use the following code.

if (process.env.NODE_ENV === 'production') {

} else {

}

It has to be that exact format. No fancy ? statements or anything.

This feature should be revisited IMO so process.env.NODE_ENV is replaced with production or dev. The TS Transform would be simpler and the solution would scale better.

Thanks,
Dan

[cjorasch]

Now I get it. I didn't realize if was parsed during the build process vs. a runtime value. I don't think that is anywhere in the docs. Works fine now.

Thanks for the clarification.

[DominicBoettger]

Sorry to have to ask again.
Am I correct that it only supports production and development?

We have a 3-tier staging process
dev, staging, production and I want to define the API urls for the different stages.

Is this possible?

If I understand it correctly it creates the process.env.NODE_ENV during compiletime and adds production to it if it's a production build.

[MoAsmar]

I have same case as @DominicBoettger
any ideas ?

[danbucholtz]

Yeah this should really be revisited. The implementation is not very robust as is.

Thanks,
Dan

[DominicBoettger]

I though about dotenv but came to the point that i want to adjust the variables during compiletime not during runtime. So a injector to the compile process like it's done in angular would be great.

[simonhaenisch]

If I understand it correctly (also tried quickly), process.env is available within stencil.config.ts because that is executed at build time in the node process... so I could define different globalScripts depending on an environment variable... however I'm not sure whether the global script is a good place for the env setup? Would be nicer if there was an extra option for an additional file/files I could specify to inject into the bundle, so I can properly pollute the global scope 🤤

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Stencil, please create a new issue and ensure the template is fully filled out.

Thank you for using Stencil!