How can I access the environment of my ember application? My goal is to have a computed property called isStaging to check if the environment is staging
you don't need a computed property, but you can just do this:
import Component from '#ember/component';
import ENV from 'app-name/config/environment';
export default class extends Component {
isStaging = ENV.environment === 'staging';
}
// or if you're on the old syntax:
export default Component.extend({
isStaging: ENV.environment === 'staging'
});
This was the only way I could get environment detection to work
/config/environment.js
module.exports = function(environment) {
let ENV = {
...
EmberENV: {
FEATURES: {
...
DEVELOPMENT: environment === 'development',
TEST: environment === 'test',
PRODUCTION: environment === 'production'
},
...
}
},
Then to access the environment anywhere in the project
import Ember from 'ember';
if(Ember.ENV.FEATURES.DEVELOPMENT) {
// development
}
if(Ember.ENV.FEATURES.TEST) {
// test
}
if(Ember.ENV.FEATURES.PRODUCTION) {
// production
}
Related
How can we apply localization to ember-pikaday addon ?
I followed the steps described in their README but the months are still displayed in English. I've even open an issue but it has no responses yet.
In my app i do it by instance-initializer (settings for Polish language):
import Ember from 'ember';
import moment from 'moment';
export default {
name: 'setup-pikaday-i18n',
initialize: function(application) {
var i18n = Ember.Object.extend({
previousMonth: 'Poprzedni miesiąc',
nextMonth: 'Następny miesiąc',
months: ['Styczeń','Luty','Marzec','Kwiecień','Maj','Czerwiec','Lipiec','Sierpień','Wrzesień','Październik','Listopad','Grudzień'],
weekdays: moment.localeData()._weekdays,
weekdaysShort: moment.localeData()._weekdaysShort
});
application.register('pikaday-i18n:main', i18n, { singleton: true });
application.inject('component:pikaday-input', 'i18n', 'pikaday-i18n:main');
}
};
and ember-moment config is in config/environment.js:
let ENV = {
......
moment: {
includeLocales: ['pl']
},
.....
};
In my application, I use firebase to store and retrieve data.
But for testing purpose i dont want data come from server, i need to mock the data using mirage and test that mock data.
In my adapter/application.js, i use firebase adapater
import Ember from 'ember';
import FirebaseAdapter from 'emberfire/adapters/firebase';
const { inject } = Ember;
export default FirebaseAdapter.extend({
firebase: inject.service(),
});
but in case of testing i want to use mirage, so my question where i want to change the adapter to mirage??? Thanks in advance
In your config/environment.js this should do it.
if (environment === 'test') {
// Testem prefers this...
ENV.locationType = 'none';
ENV['ember-cli-mirage'] = {
enabled: true
}
// keep test console output quieter
ENV.APP.LOG_ACTIVE_GENERATION = false;
ENV.APP.LOG_VIEW_LOOKUPS = false;
ENV.APP.rootElement = '#ember-testing';
}
I had something similar if you want to have your adapter different configuration import config environment in to your adapter and then use ENV.host or other variable that you need to set different based on ENV in your case testing and development
if (environment === 'test') {
ENV.host = something
}
if (environment === 'development') {
ENV.host = something else
}
and your adapter example of active adapter change.
import ActiveModelAdapter from 'active-model-adapter';
import DataAdapterMixin from 'ember-simple-auth/mixins/data-adapter-mixin';
import config from '../config/environment';
export default ActiveModelAdapter.extend(DataAdapterMixin, {
namespace: 'api',
host: `${config.host}`,
authorizer: 'authorizer:custom'
});
I never used firebase so cant help you there but this is how you have different settings in your adapter based on ENV.
I would like to configure a URL differently in my ember app depending if the app is running in production or development mode. Is this possible to do by loading the endpoints into config/environment.js and accessing the value of the ENV object in a handlebars template? Maybe I have to expose the ENV value in a controller? Or is there some other mechanism for doing this?
Something like this:
// config/environment.js
if (environment === 'development') {
ENV.zzz.url = "http://www.reddit.com";
}
if (environment === 'production') {
ENV.zzz.url = "http://www.google.com";
}
// app/controllers/application.js
export default Ember.Controller.extend({
siteUrl: ENV.zzz.url
...
// somefile.hbs
Funspot
yes. you can do import config from 'app-name/config/environment';
and access it like config.zzz.url
Is there another way besides reading config file with
this.container.lookupFactory('config:environment').modulePrefix;
inside and object initializer? Seems a bit odd to do this
With ember 2.4.x (the LTS version which I recommend using), you can do the following:
import Ember from 'ember';
import layout from './template';
export default Ember.Component.extend({
layout,
magicKey: Ember.computed.reads('config.magic.key'),
});
This assumes that you have set the config/environment.js file as follows:
module.exports = function(environment) {
var ENV = {
/* .... */
APP: {
// Here you can pass flags/options to your application instance
// when it is created
},
magic: {
key: "something awesome"
},
};
return ENV;
};
EDIT: Adding how to get the config object below, to answer the question from #jcbvm.
For this to work, you will need to export the config in your app directory in your addon as follows: (in your addon_name/app/component/component_name/component.js )
import config from '../../config/environment';
export default component.extend({ config });
TL;DR
Is it possible to pass the options from the addon's index.js file to the addon's Ember application?
More detail
Ember CLI addon's allow you to pass options to an addon by setting options in your Brocfile.js.
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var app = new EmberApp({
myAddon: {
enabled: false // TODO - Change when CLoudfront is implemented
},
});
You can then access these options in the addon's index.js file like so:
module.exports = {
name: 'my-addon',
included: function(app) {
var options = app.options.myAddon;
}
}
However, what if I want to use these options in an Ember component or view or other class in the addon? For example, a component:
import Em from 'ember';
export default Em.Component.extend({
doSomething: function() {
if (this.get('options.enabled')) {
// Then do something
}
},
});
Is it possible to pass the options from the addon's index.js file to the addon's Ember application?
Please note, I'm aware you could just pass the argument to the component in the template but that's not the point of this question. Thanks.
I think what you're trying to accomplish is best implemented using config/environment.
You can either add your options to your addons config/environment.js file. This object will be merged with you applications config/environment.js.
module.exports = function(/* environment, appConfig */) {
return {
myaddon {
enabled: true
}
};
};
Or if you are feeling funky, you can override the default behaviour of the addons config hook in index.js to manually add the options. But the happy path should be considered adding it to config/environment.js
In your component you can then import the config with:
import config from '../config/environment';
If you also need the options to be added to your app instance. You can add the options under the APP property in config/environment.js. The content of the APP property are added to the app instance. In your addon's config/environment.js put:
module.exports = function(/* environment, appConfig */) {
return {
APP: {
// Here you can pass flags/options to your application instance
// when it is created
myaddon {
enabled: true
}
}
};
};