How to use global variables in Ember app, specifically in index.html?

Question

I would like to directly modify the index.html of my Ember app using command line variables passed in. So I can set them under 'ENV' in my environment.js file, and then I can access them in some of my .js files by importing ENV. However, in my index.html file, these variables don't show up even though the "rootURL" variable does. For example, if I set rootURL: "/blah" and var1: "/blah2" in ENV, then if I have something like a href={{rootURL}} and a href = {{var1}} , then the first link works while the second doesn't.

So I'm assuming that {{rootURL}} doesn't come directly from the ENV variable, but I can't find where it comes from. I was trying to do something similar with variables in my 'app.js' but I'm confused about this line: import config from './config/environment'; What exactly does this import? I can't find anything named "config" in environment.js. Is it possible to set global variables in that file (app.js)?

Answer 1

I'm using ember-cli-inline-content to use variable in my index, so I can change some urls depending the environment (production or dev) for assets like that:

<link rel="stylesheet" href="{{content-for 'ASSETS_BASE_URL'}}/xxx/yyy/assets/vendor.css">

in my ember-cli-build.js file:

if (app.env === 'development') {
  app.options.inlineContent = {
    ASSETS_BASE_URL: {
      content: 'http://lvh.me:8080'
    }
  };
}

if (app.env === 'production') {
  app.options.inlineContent = {
    ASSETS_BASE_URL: {
      content: 'https://assets.mydomain.com'
    }
  };
}