Why does ember-cli build with wrong host?

Question

I am currently at the state of deploying one of my ember applications to a server with Ubuntu LTS + Apache/Nginx configuration.

However, it seems that the build process is doing something wrong maybe due to missing information from my side.

My configuration looks like the following:

// config/environment.js
/* jshint node: true */

module.exports = function (environment) {
  var ENV = {
    modulePrefix: 'app-name',
    environment: environment,
    baseURL: '/',
    locationType: 'auto',
    bingMapsApiKey: null,
    EmberENV: {
      FEATURES: {
        // Here you can enable experimental features on an ember canary build
        // e.g. 'with-controller': true
      }
    },
    contentSecurityPolicy: {
      'default-src': "'none'",
      'script-src': "'self' 'unsafe-inline' 'unsafe-eval'",
      'font-src': "'self'",
      'connect-src': "'self'",
      'img-src': "'self'",
      'report-uri': "'localhost'",
      'style-src': "'self' 'unsafe-inline'",
      'frame-src': "'none'"
    },
    APP: {
      // Here you can pass flags/options to your application instance
      // when it is created
    }
  };

  if (environment === 'development') {
    //ENV.APP.LOG_RESOLVER = true;
    //ENV.APP.LOG_ACTIVE_GENERATION = true;
    //ENV.APP.LOG_TRANSITIONS = true;
    //ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
    //ENV.APP.LOG_VIEW_LOOKUPS = true;
    ENV.bingMapsApiKey = process.env.BING_MAPS_API_KEY;
  }

  if (environment === 'test') {
    // Testem prefers this...
    ENV.baseURL = '/';
    ENV.locationType = 'none';

    // keep test console output quieter
    ENV.APP.LOG_ACTIVE_GENERATION = false;
    ENV.APP.LOG_VIEW_LOOKUPS = false;

    ENV.APP.rootElement = '#ember-testing';
  }

  if (environment === 'production') {
    ENV.bingMapsApiKey = process.env.BING_MAPS_API_KEY;
  }

  return ENV;
};

// ember-cli-build.js
/*jshint node:true*/
/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app')
var Funnel = require('broccoli-funnel')

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    // Add options here
  });

  var CesiumAsset = new Funnel('vendor/cesium/')

  app.import('vendor/cesium/Cesium/Cesium.js')
  app.import('vendor/cesium/Cesium/Widgets/widgets.css')

  // Use `app.import` to add additional libraries to the generated
  // output files.
  //
  // If you need to use different assets in different
  // environments, specify an object as the first parameter. That
  // object's keys should be the environment name and the values
  // should be the asset to use in that environment.
  //
  // If the library that you are including contains AMD or ES6
  // modules that you would like to import into your application
  // please specify an object with the list of modules as keys
  // along with the exports of each module as its value.
  return app.toTree(CesiumAsset)
};

It seems that the app is linked to localhost:4200 since I get errors like the following ones:

Mixed Content: The page at 'https://social-journey.com/' was loaded over HTTPS, but requested an insecure image 'http://localhost:4200/Cesium/Widgets/Images/ImageryProviders/bingAerial.png'. This content should also be served over HTTPS.

Image from origin 'http://localhost:4200' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://social-journey.com' is therefore not allowed access.

Does anyone see a missing configuration?

Thank you in advance.

Answer 1

I have finally found out that it is not an ember problem.

The third-party component cesium.js which I have integrated into my ember project needs an base url.

This base url was set statically in the index.html:

// app/index.html
<script type="text/javascript">
  var CESIUM_BASE_URL = "http://localhost:4200/Cesium";
</script>

However, I found this npm module which enables loading of variables from the environments.js configuration file.

So finally my solution looks like this:

// app/index.html
<script>
  var CESIUM_BASE_URL = '{{content-for 'config.CESIUM_BASE_URL'}}';
</script>

// config/environment.js
  ...
  if (environment === 'development') {
    ENV.CESIUM_BASE_URL = "http://localhost:4200/Cesium";
  }


  if (environment === 'production') {
    ENV.CESIUM_BASE_URL = "https://domain/Cesium";
  }
  ...