So I have an Angular library with a service installed on my main project and I want to know if it's possible to retrieve a global url variable or a field of my config.json file I defined in my main project. Would be nice to know how too.
In the src/environments/ folder you can have an environment.ts file with settings variables and use it with
import { environment } from './../environments/environment';
Then any variable you have in the file will be available.
You can even have different files for each of your environments.
https://angular.io/guide/build
Related
Unfortunately, it's a pretty simple question, but I can't find the answer.
Don't have an access to environment variables in some file.
I use create-react-app (^16.11.0)
file .env in the root folder near package.json
variable declared as REACT_APP_API=http://localhost:4000
call variable as process.env.REACT_APP_API
the server has been restarted many times
I have an access to the variable in some folder but in another don't.
below link to files structure
workflow structure
Thanks a lot!
THE PROBLEM WAS FOUND!
As often happens, the reason is funny.
When typing process.env.REACT_APP_API, my IDE automaticlly added an import at the top of the file
import process from "process";
That's why i can't access to process.env. in one specific file.
Import removed, problem solved
I have a file in my Nuxt.js project that simply resides in the src directory. Therefore it is not in the convention of a Nuxt project. Therefore I understand that environment variables defined in the nuxt.config.js will not appear in the file placed in src.
However I'd still like to use environment variables in that mentioned file.
This is how I try to access the environment variable:
const GAMESERVER_URL = process.env.GAMESERVER_URL || 'http://localhost:1001'
Unfortunately it always falls back to the default value http://localhost:1001. I have another file used as Nuxt.js plugin that is referencing the very same environment variable with the exact same statement (above). The plugin file works fine and is using the environment variable correctly.
What are my options to also introduce the environment variables to my standalone file in the src directory?
In my ember-cli-build.js file I'm importing a vendor library called new-relic by using app.import('vendor/new-relic.js'), I would like to pass a parameter called env to the new-relic vendor file and use it in the new-relic.js file. I tried doing
app.import('vendor/new-relic.js', { env: 'production' });
When I try to console log env in the vendor file, it says undefined. Is there any way to pass the env to the vendor file?
When you app.import a vendor file, it does not get executed in the same node environment as ember-cli-build.js at build time, but rather on your user's browser at run time, so there is no way to pass the environment as a parameter.
However, Ember automatically makes the environment available in the browser in the following manner. This is how you can set it on the window object in an initializer:
import ENV from 'config/environment';
export function initialize() {
window.env = ENV.environment;
}
export default { initialize };
This will make the environment available on the window object as soon as your ember app boots. If your vendor file accesses it then, this will work.
However, this may not be early enough. You may need the env variable to be available as soon as the the new-relic.js file is read by the browser. In order to handle such a use case, you may need to use the contentFor hook in an addon. There is a nice addon already written for you to do this: ember-cli-content-for-config. With it, you can add this to your index.html:
<script>
window.env = '{{content-for 'config.environment'}}';
</script>
See the README for the addon here: https://github.com/bmac/ember-cli-content-for-config
You will also need to alter new-relic.js to look for the env variable in the global namespace (window object).
Using Gatsby with Ghost CMS requires a .ghost.json file containing my API keys. I'd like to push the repo to Github and don't want my keys in my repository. Hence the question: is it possible to use .env variables within json files?
By default, Gatsby looks for .env variables inside .env.development (or .env.production) when you exposes the:
require("dotenv").config({
path: `.env.${process.env.NODE_ENV}`,
})
Of course, you can change this behavior. If you want to keep your variables inside a .json file without pushing it, just add them to .gitignore and import them in the files you need (gatsby-config.js or whatever) using a require function. Using, for example: require('../../ghost.json').
So, I would recommend using the default configuration to avoid possible issues. You can keep your file pushed without API keys and move them to the .env local file and simply load the where you need by: process.env.YOUR_API_KEY_VARIABLE
For further information: https://www.gatsbyjs.org/docs/environment-variables/
i had build react app web page
with custom environment variables
the problem is when i build the script
and change the .env variables no thing change in the website !
.env file :
REACT_APP_SITENAME=TheSiteName App
After building a react app all code is static and can't be changed. I think the only solution to send some dynamic data to your react app is to either create a special file per system you running your app on and load this directly inside the index.html or create the content of this file on the fly.
So when you're using create-react-app in public/index.html add something like this:
<head>
...
<script src="https://www.example.com/envconfig.js" type="text/javascript">
</script>
...
</head>
This file should contain the environmental config, e.g.:
window.globalConfig = {
siteName: "The Sitename App"
}
The file can also be created on the fly by PHP, Java or any other backend service. Just make sure to answer as valid Javascript.
And in your React app at index.js, App.js or anywhere you can access this variable as it is global:
const appConfig = window.globalConfig || { siteName: process.env.REACT_APP_SITENAME}
With this you've got an fallback to the static env config if globalConfig is not available, likely in development.
Now you can use appConfig in any way and provide it via redux, context or property to your components.
Last thing to mention, you have to make sure that the config-file is loaded before executing all the React code. So the file should be loaded before all the created React files.
Quote from the docs:
The environment variables are embedded during the build time.
It isn't possible to apply environment changes as runtime.
Reference
Here is an example of how to use the environment at runtime:
CodeSandbox
here is an idea:
add a json file (e.a. config.json) with your configuration to the "public" folder. That file will be in the root of the build:
{
"name": "value" }
in your React code, create a static class with the variable you want to configure:
class Config {
static name= "[default value overwritten by the config]"; }
somewhere high in the startup of your React application, read the json and set the static variable:
fetch("config.json") .then((r) => r.json()) .then((data) =>{
Config.name=data.name; })
now you can use that config anywhere you need it :
Config.name
Note that any configuration you make will be vulnerable for public eyes, since the file can be opened directly with a URL. Also note that when deleting that json file, everything will still work with the default value. You could implement some check that the file must exist.