This addon is incompatible with + about ember-cli-dotenv

[jasonmit]

I have a fork going that moves the configuration out of ember-cli-build, which resolves this issue for now. https://github.com/jasonmit/ember-cli-dotenv

Readme diff summarizes the changes: jasonmit@b055555#diff-04c6e90faac2675aa89e2176d2eec7d8

@fivetanley feel free to fold these changes in if you want. Otherwise I'll continue to maintain the fork for others.

[kjhangiani]

@SergeAstapov @jasonmit thanks for the awesome work through this thread - was tracing a few subtle bugs for a while, finally realized it was dotenv, and stumbled on this thread. After upgrading and migrating, everything works again.

Appreciate all the hard work!

[fivetanley]

@SergeAstapov @jasonmit sorry for the delay, you both have publish rights on npm. thanks so much for your help

[SergeAstapov]

Thank you @fivetanley! Version 2.0 has been pushed to npm! 🎉

Thank you all for the help, feedback and patience!

[lolmaus]

@jeffrey008

1. In terminal:

   npm uninstall ember-cli-dotenv
   npm install -D dotenv lodash
   

2. In your ember-cli-build.js, do this:

   const dotenv = require ('dotenv')
   dotenv.config() // You can also provide the path to a specific dotenv file: dotenv.config({path: '.env.prod'})

   This will make env vars from your dotenv file available in the process.env.

3. In your config/environment.js, do this:

   const _ = require 'lodash'
   
   const ENV = {
     envVars: _.pick(process.env, [
       'BACKEND_URL',
       'GITHUB_API_KEY',
     ])
   }

4. Then in your app you can do this:

   import ENV from '<your-app-name>/config/environment'
   
   export default JSONAPIAdapter.extend({
     host: ENV.envVars.BACKEND_URL
   })

[jeanduplessis]

@SergeAstapov while I can confirm that the values from our .env file gets added to environment config, we were previously using process.env.KEY_NAME in environment.js to set variables in a structure that other addons might expect.

For example ember-intercom-api expects you to set the following:

ENV['ember-intercom-api'] = {
  appId: '[YOUR_APP_ID]'
};

and we were setting it as such:

ENV['ember-intercom-api'] = {
  appId: process.env.INTERCOM_APP_ID
};

Also we don't use .env files on our production server so we rely on accessing the info via process.env.XXX so that it works both during local development as well as on production.

[SergeAstapov]

@jeanduplessis for some reason ember build and ember s works differently:

1. define a variable SOME_VAR_NAME in .env like

SOME_VAR_NAME=jln4i7cl

2. install addon from SergeAstapov/ember-cli-dotenv#update-ember-cli
3. change config/environment.js like

ENV['APP_VAR_NAME'] = process.env.SOME_VAR_NAME;
console.log(process.env.SOME_VAR_NAME);

After these steps do ember build and you should see process.env.SOME_VAR_NAME variable value in meta tag in the dist/index.html file:

<meta name="dummy/config/environment" content="{ ... "APP_VAR_NAME": "jln4i7cl" ... }" />

And CLI console output would be:

undefined
jln4i7cl
jln4i7cl

If you then would do ember s CLI console output would be:

undefined
undefined
Proxying to https://example.com
Livereload server on http://localhost:35129
jln4i7cl

and you would not see process.env.SOME_VAR_NAME variable value in meta tag in the dist/index.html file until you do some change and app is re-build.

What is current addon behavior:

read .env file in config() hook of addon.
ember-cli <= 2.15 invoked config/environment.js file multiple times. Even after config() hook of this addon.
So as a result process.env variables from .env file would became available next time config/environment.js is included.
Change introduced in [email protected] reads config/environment.js once and prior to config() hook of any addon.

What was implemented in SergeAstapov/ember-cli-dotenv#update-ember-cli

read .env file in included() hook of addon
This change still does not seem to solve the issue completely.

What could be done else:

read .env file in init() hook of addon.
Problem would be that ember-cli-build.js is not invoked yet and we do not have access to neither dotEnv configuration options within ember-cli-build.js nor we do not know what is the environment name build is running in (like development, test or production).
This would allow us to read .env file in project root prior to ember-cli-build.js or config/environment.js file is included and executed so process.env would be available in config/environment.js.

But on the other hand this change would prevent anyone from using custom .env file path or have per environment .env files (which does not considered as best practice at all, see dotenv README.md).

Simple solution

Do not use process.env within config/environment.js
You can continue to use an addon with clientAllowedKeys as described in https://github.com/fivetanley/ember-cli-dotenv#what-is-ember-cli-dotenv.
This would work in simple use cases but would not allow you to put some variable from .env into nested object.

I can't see any better solution then what I have already implemented in SergeAstapov/ember-cli-dotenv#update-ember-cli. If anyone has any suggestions - would be glad to help.

Would be great to hear from @fivetanley who is original addon author.

[fivetanley]

@jasonmit I added you and @SergeAstapov as collaborators on this repo. a 2.x release sounds great. It sounds like you have solved the issues on your fork? Feel free to merge those in.

[jasonmit]

@oxodesign changes are in master and will be published soon.

[jamesdixon]

Has anyone gotten this updated version to work properly with ember-cli-deploy? I keep getting development variables rather than my other environments.

[lolmaus]

Tried running addon tests, but they fail with Uncaught TypeError: $ is not a function.

[lolmaus]

OK, I've figured it out. The problem is caused by this PR in ember-cli: ember-cli/ember-cli#7333

Before this PR, my app's environment.js and ember-cli-dotenv's config hook are executed multiple times alternately

After the PR, each is executed only once -- and environment.js goes first. The config hook is executed after env vars are passed into the app.

Looks like, this addon's index.js has to be updated in order for the logic to be executed in time.

[lolmaus]

Uhm... Turns out I don't need this addon. O-o

I replaced it with:

• ember-cli-build.js: dotenv.config({path})
• config/environment.js: envVars: _.pick(process.env, ['MY_ALLOWED_KEY'])

And it works correctly in [email protected].

[jeffrey008]

Hi @lolmaus can you be more specific about that? I am upgrading ember-cli to 2.16 and this starts breaking. :(
You said you don't need this addon and did some replacements. Please teach me

[rmachielse]

I think it would still be nice to fix this addon. Do you also notice the config is being corrected when you save the config/environment.js file (even without changes)? The application then reloads with correct values

[bradhaydon]

@rmachielse I am also experiencing the same problem. I would also greatly appreciate if someone would be able to fix this addon.

[sumeetattree]

I am facing the same issue as of ember-cli 2.16. env variables aren't picked up on their own. A temporary workaround is to save your environment.js while ember s is running. This should pick up the environment variables.

[SergeAstapov]

For [email protected]+ we should use clientAllowedKeys in ember-cli-build.js as described in docs:

Put a .env file in the root of your repository:

DROPBOX_KEY=YOURKEYGOESHERE
Next, put some configuration in your ember-cli-build.js. Starting in 0.2.0, client side keys must be explicitly allowed:

// ember-cli-build.js

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    dotEnv: {
      clientAllowedKeys: ['DROPBOX_KEY']
    }
  });

  return app.toTree();
};

This works fine and env variables listed in clientAllowedKeys are get populated in <app name>/config/environment.

Following not gonna work for [email protected]+

All keys in .env are currently injected into node’s process.env. These will be available in your config/environment.js file:

// config/environment.js
module.exports = function(environment){
  return {
    MY_OTHER_KEY: process.env.MY_OTHER_KEY
  }
};

@lolmaus could you please try following steps for your use case:

1. In your ember-cli-build.js, do this:

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    dotEnv: {
      clientAllowedKeys: ['BACKEND_URL', 'GITHUB_API_KEY']
    }
  });

  return app.toTree();
};

This will make env vars from your dotenv file available in the <your-app-name>/config/environment.

2. Then in your app:

import ENV from '<your-app-name>/config/environment'

export default JSONAPIAdapter.extend({
  host: ENV.BACKEND_URL
});

[SergeAstapov]

Failing build is addressed in #29

[sumeetattree]

@SergeAstapov I have tried making changes as you suggested. My ember-cli-build.js file:

...
let app = new EmberApp(defaults, {
    dotEnv: {
      clientAllowedKeys: ['API_HOST', 'ASSET_HOST', 'REDIS_URL', 'SOCKET_URL',
        'S3_BUCKET_NAME', 'AWS_REGION', 'AWS_ACCESS_KEY_ID', 'AWS_SECRET_ACCESS_KEY'],
      path: {
        development: '.env.development',
        'development-postbuild': '.env.development'
      }
    },    
    fingerprint: {
      prepend: process.env.ASSET_HOST,
      enabled: true
    },
...

Things to note:

• I am using fingerprinting as a part of ember-cli-deploy development workflow. That's what that development-postbuild key is for. I am just testing things out here.
• I do not have a main .env file. console.log(process.env) in ember-cli-build.js does not print any of the environment variables.
• None of the .env.* files are loaded.

Edit:
This issue:

I am facing the same issue as of ember-cli 2.16. env variables aren't picked up on their own. A temporary workaround is to save your environment.js while ember s is running. This should pick up the environment variables.

still persists

[SergeAstapov]

@sumeetattree are you able to access any of variables listed in clientAllowedKeys within your Ember app code? e.g. in some adapter like

import ENV from '<your-app-name>/config/environment'

export default JSONAPIAdapter.extend({
  host: ENV.API_HOST
});

I actually was not using process.env within ember-cli-build.js file and I'm not sure it's supposed to work that way. Was it working for you for ember-cli <= 2.15?

[sumeetattree]

@SergeAstapov

@sumeetattree are you able to access any of variables listed in clientAllowedKeys within your Ember app code? e.g. in some adapter like

After running ember s for the first time, no.

import config from '../config/environment.js;
console.log(config);
// This returns a config object without any of the environment variables.

Only after I hit save in environment.js after ember s and wait for the server to reload is when I see the environment variables. If I refresh the browser without waiting for the server to auto reload I am back to square one. And then you have to repeat the process.

I actually was not using process.env in ember-cli-build.js file and I'm not sure it's supposed to work that way. Was it working for you for ember-cli <= 2.15?

Yes this was working for ember-cli <= 2.15.

[jamesdixon]

I was able to use @lolmaus fix, but unfortunately, it causes problems with ember-cli-deploy. ember-cli-deploy has built-in .env support and will pick the correct .env file based on the configuration. Unfortunately, adding the dotenv.config() statements manually seems to choose the default .env file regardless.

A fix is needed for this package. I'm going to look into it.

[jamesdixon]

@SergeAstapov I tried your fix with clientAllowedKeys and no go. I've been using the addon up until 2.16 without clientAllowedKeys with no problem. I actually prefer not having to use that key to selectively import keys.

[SergeAstapov]

@jamesdixon @jeanduplessis seems I do have a fix - as some extra caching has been implemented for Ember CLI, file .env should be read from file system at earlier stage.

Added fix to #29 that allows to access process.env.INTERCOM_APP_ID from within /config/environment.

Could @jamesdixon @jeanduplessis you try it via npm install SergeAstapov/ember-cli-dotenv#update-ember-cli --save-dev?

[jamesdixon]

@SergeAstapov thank you! I'll give it a shot

[jamesdixon]

@SergeAstapov unfortunately, this oddly still doesn't work for me.

If I do a console.log(ENV) in the last line of my environment.js file right before the return, I can see the keys I've allowed in `clientAllowedKeys' being made available, but they're still undefined when accessing them through my app...

Any thoughts?

[jamesdixon]

@SergeAstapov i actually just reverted to the latest version of the original addon and am still seeing the behavior i mentioned above. that said, was your branch up to date or maybe just had no affect overall?

I did add a logging statement to my environment.js file to log the API_URL variable and see that it attempt to output it 3 times. I'm not sure if this is just Ember cycling through environemnts, but wanted to mention it.

API_URL: undefined
API_URL: undefined
Livereload server on https://localhost:7020
API_URL: https://localhost:3001

[jamesdixon]

If I log out the contents of my environment within the app, none of the keys I have set that reference an environment variable are present.

[SergeAstapov]

@jamesdixon could you ping me in Slack? The same user name (sergeastapov) as on github.

I wonder if I missing anything - it works fine for me and dummy app config seems to pass the test with no issues.

Just FYI I'm not an addon maintainer, just was working on brining FastBoot support and at the same time Ember CLI was out and brought this issue.

[jamesdixon]

@SergeAstapov ember slack channel?

Regarding the dummy app config, have you tried accessing IN_PROCESS_ENV in the code somewhere (not just in the test)?

[jeanduplessis]

@SergeAstapov unfortunately the fix on your branch isn't working for me.

Here's the output from logging a process.env variable in config/environment.js:

1.2.0

$ ember s
undefined
undefined
undefined
Livereload server on https://localhost:7020
undefined

SergeAstapov/ember-cli-dotenv#update-ember-cli

$ ember s
undefined
undefined
undefined
Livereload server on https://localhost:7020
jln4i7cl

While the value is eventually set, when running your branch with the fix, unfortunately it doesn't seem to be set by the time Ember reads the values to write it to the meta tag on the index.html page.

[jeanduplessis]

@SergeAstapov thanks for all your effort on this. I'm likely going to have to consider some alternative approaches to dealing with our specific requirements. I think that in the light of your findings and improvements this issue can likely be closed off - maybe a note in the README file about not relying on process.env.XXX will suffice.

[fivetanley]

@SergeAstapov I think that sounds fine. Maybe we should recommend using dotenv directly in either ember-cli-build.js or config/environment.js as an alternative to using this addon in the README?

Would you or @lolmaus like commit bit/npm rights on this addon? I'm not actively using/working on it anymore.

[SergeAstapov]

@fivetanley sounds good to me, would be glad to help!

Approach suggested by @jasonmit with dotenv.js config file in project root seems solves the issue.

@jasonmit was you able to access env name within init hook of addon? this.env on line #26 evaluates to undefined for me, as a result it does not support per environment config files.

[jasonmit]

@SergeAstapov I just released 2.0.1 to resolve this. Thanks for pointing that out.

[oxodesign]

@jasonmit @SergeAstapov will you create a pull request and fix the issue here as well?

[jeanduplessis]

PS: just to let you know I'm running master and its working beautifully. Thanks @jasonmit

[bravo-kernel]

Good job people, a new release would be more than welcome.

[jasonmit]

@fivetanley can you grant @SergeAstapov and myself npm access so we can cut a release?

[lolmaus]

I suggest that we move dotenv.js into the config/ subdir.

[lolmaus]

When I run ember t -s, the dotenv.js function receives "development" as the argument, I expect "test".

[jeanduplessis]

@lolmaus I'm also getting development instead of test. Explicitly setting the environment with --environment=test seems to work for now.

[SergeAstapov]

Hi @lolmaus @jeanduplessis! Thanks for feedback!
I've addressed these in #37 and #38.

[oxodesign]

I have a addon that does set an key back to env. the code is:

config: function(env, baseConfig) {
    return {mySpecialKey: "test"}};
}

Installed ember-cli-dotenv from master, did npm cache clean and npm install, when run ember s on my app I could not get access to mySpecialKey, while the app was running if I changed "config/dotenv.js" looks like the configuration reloades and I can use mySpecialKey.

What can I do in this case?

[oxodesign]

I was using included()-function on the addon. Moved the logic over to init() and it worked :)

[SergeAstapov]

@fivetanley can you grant @jasonmit and myself npm access so we can cut a release?