Import config/environment in application

[topaxi]

Is there a way to import config/environment.js in a glimmer application? I haven't found a way yet.

[pittst3r]

@topaxi What are you trying to do? Define your own module config?

[topaxi]

I want a way to define global configuration variables like API endpoints or production / development URLs, disabling Logging in production etc.

I've done these things in Ember.js with the config/environment.js file and as it exists in glimmer applications too, I assumed it would work the same way.

[rmzr7]

I'm curious about this too

[rootwizzy]

I also was wondering about the correct way to go about this. I have tried looking this up and the methods used in a standard ember-cli application do not work.

Here is the scenario I think which is same that @topaxi is going for.

Setting up an ENV variable inside the config/envrionment.js where you have access to the node.js process.env grabbing a token saved in your local system.

// app/config/environment.js

'use strict';

module.exports = function(environment) {
  let ENV = {
    modulePrefix: 'foo-app',
    environment: environment,
  };

  ENV.token = process.env['API_TOKEN']

  return ENV;
};

Then wanting to take said ENV variable inside a component inside your app. Normally (in ember-cli) you would simply import your config file via import ENV from 'config/environment' but this doesn't work out of the box in glimmer at the moment.

// app/src/ui/components/foo-component/component.js

import Component, { tracked } from '@glimmer/component';
import ENV from 'config/environemt'

export default class FooComponent extends Component {

  ...

  fooBarToken =  ENV.token

  ...

};

The error thrown has to do with unable to resolve the path

Error: Could not resolve 'config/environment' from /home/$USER/foo-app/tmp/rollup_with_dependencies-cache_path-yRN2N01e.tmp/ui/components/foo-component/component.js
    at Error (native)
    at /home/$USER/foo-app/node_modules/rollup-plugin-node-resolve/dist/rollup-plugin-node-resolve.cjs.js:85:23
...

Adjusting the path to a relative path that points directly to the file throws errors because it is trying to import the node module as an es6 module

// app/src/ui/components/foo-component/component.js
import ENV from '../../../../config/environment'

export default class FooComponent extends Component {
};

throws

Error: 'default' is not exported by config/environment.js
...

I am sure there is probably a way about grabbing these ENV variables without too many band-aids and would appreciate any help on how to go about this as well.

[rmzr7]

What happens if you enable commonJS module imports as the readme.md for this project says?

[tschoartschi]

I'm also interested in this issue. Does anyone have a working solution?

UPDATE: I created a plugin which tries to include the environment.js like module-map.js and it kind of works but I think the file is created too late this is probably why I get the following error Cannot find module '../config/environment'. during build time. On runtime everything works fine. If this solution goes in the right direction I could provide some code (if the core team needs help).

[artzte]

I'm not seeing the config/environment.js in the broccoli tree. there is an environment subdirectory with a development.js in it.

[rwjblue]

We should absolutely fix this. It shouldn't be too much work to fix I think...

[tschoartschi]

@artzte if you need a "hack" solution, I can give you my code. @rwjblue would be great to have some "official" solution 😄

[hoodwink73]

I am using rollup-replace-plugin.

// ember-cli-build.js
  'use strict';

const GlimmerApp = require('@glimmer/application-pipeline').GlimmerApp;
const replace = require('rollup-plugin-replace');

module.exports = function(defaults) {
  let app = new GlimmerApp(defaults, {
    // Add options here
    rollup: {
      plugins: [
        replace({
          ENVIRONMENT: JSON.stringify('process.env.NODE_ENV')
        })
      ]
    }
  });

  return app.toTree();
};

Then using ENVIRONMENT token wherever I need to check against the environment. Is this a good enough hack for now?

[tschoartschi]

as requested by @hoodwink73 on the glimmer slack channel, I created a repo with my hack. You can find it here: https://github.com/tschoartschi/glimmer-env-hack

But it's really a hack. For detailed explanations check the README.md of the repo

[tschoartschi]

@rwjblue there are several "solutions", "suggestions" and "hacks" to this problem. What should be the common approach to use the environment.js? I think it would be great if everyone could rely on a "standard" way to use it.

[chadian]

Just wanted to leave a bit from my experiments. It looks like importing is working through some configuration changes.

// ember-cli-build.js
let app = new GlimmerApp(defaults, {
    storeConfigInMeta: true
});

// config.environment.js
module.exports = function(environment) {
  let ENV = {
    modulePrefix: 'my-app', // make sure this is set. The generated meta tag needs it for look up.
    environment,

    // specify your keys
    SOME_KEY: process.env.KEY_VALUE
  };

  return ENV;
};

// in some component, looks like it has to be relative?
// importing from `"my-app/config/environment"` did not work
import env from "../../../../config/environment";

Source:
https://github.com/glimmerjs/glimmer-application-pipeline/blob/master/lib/broccoli/glimmer-app.ts#L517-L540

If this is "official" then I think we could close this, and I could open a PR up for the Glimmer guides. Hope this at least helps the next person to come along. Cheers!

[givanse]

Even though there are other solutions in this thread, importing config/environment.js should just work. It also covers the case for importing a library from node_modules.