DEV Community


Discussion on: Hide environment variables in your StencilJS project

huluvu424242 profile image
Huluvu424242 • Edited

Hello, nice article but I am looking for a way to replace vars at delivery stage. In common I use an config.txt file with placeholders in an docker container. At launch a shell script in the container replaced the placeholders depends on environment vars of container. In the container an nginx deliver the dist folder of webcomponent.

This method does not work for stencil because my config.txt was embedded into the compilat and renamed.

Currently workaround is to filter all *.js files of dist folder and replace the placeholder. In my mind this could be harmeful.
Do you have an idea to solve this problem?



daviddalbusco profile image
David Dal Busco Author

Is it like one config for many components or just one? if just one, maybe you can add a Prop() to it an use it to inject the configuration according the environment where it is used?

Alternatively, maybe read the configuration with a fetch from your component assuming that your configuration is present in the dist folder and that the path is know?

Just spontaneous idea, not sure it fits well your use case though, let me know!