Loading assets (images, ...) depending on environment

Ember CLI
1

It is possible to include assets in ember CLI, and you can simply wrap them in an if-statement to include them depending on the environment. However, it is only possible to load these assets from bower_components/ or vendor/, as far as I know.

Is there a way to include assets like images depending on the environment?

As an example: I have an image assets/img/logo.png, and depending on the environment in the build process I want this image to be either logo_1.png or logo_2.png.

We have an ember app which is deployed on different servers with slightly different settings (like the API base URL), and different branding, and I have found no way to achieve this so far.

2

For people landing here, maybe you should look at Different robots.txt for production and staging

3

Yes use treeForPublic in your own deploy plugin.

4

Or if you want to use it without an addon:

'use strict';

const EmberApp = require('ember-cli/lib/broccoli/ember-app');
const stew = require('broccoli-stew');

module.exports = (defaults) => {
  const ENV = require('./config/environment')(process.env.EMBER_ENV);

  const app = new EmberApp(defaults, {
    // Your options...
  });

  // Make sure the correct robots.txt is there
  let tree = app.toTree();
  if (ENV.environment === 'production') {
    tree = stew.rm(tree, 'logo_2.png');
    tree = stew.rename(tree, 'logo_1.png', 'logo.png');
  } else {
    tree = stew.rm(tree, 'logo_1.png');
    tree = stew.rename(tree, 'logo_2.png', 'logo.png');
  }
  return tree;
};

So if you use this you can add two files logo_1.png and logo_2.png and it will rename the one you want to logo.png and removes the other one.

And of course you need to install broccoli-stew by running npm install broccoli-stew --save-dev in the terminal.