Changing the template source directory

Ember CLI
1

Hi there.

I’m currently in the process of upgrading our Ember app from Ember version 2.18 to the most recent version.

Our app is using different templates for desktop or mobile based on a build flag. We change the app’s template directory in ember-cli-build.js, but our current approach doesn’t seem to work anymore.

The app is currently on Ember CLI version 3.4.4, but I also tried the same with a completely new Ember app using Ember CLI version 3.18.0.

Here’s the ember-cli-build.js, reduced to the bare minimum that reproduces the problem:

'use strict';

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

const path = require('path');
const { UnwatchedDir } = require('broccoli-source');

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
  });

  const mobileTemplates = new UnwatchedDir(path.join(__dirname, 'app/templates/mobile'));

  app.options.trees.templates = mobileTemplates;

  return app.toTree();
};

When starting the app, the screen just stays white, not rendering anything.

Any pointers what I’m doing wrong here? Is there a new way to achieve this?

2

I think you can achieve this by directly manipulating app.options.trees.app instead of app.options.trees.templates.

Assuming you are trying to replace everything in app/templates with everything in app/templates/mobile, it would be something like this:

const mergeTrees = require("broccoli-merge-trees");
const Funnel = require("broccoli-funnel");
const EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
  });

  let appTree = app.options.trees.app;
  app.options.trees.app = mergeTrees([
    new Funnel(appTree, { exclude: ["templates"] }),
    new Funnel(appTree, { srcDir: 'templates/mobile', destDir: 'templates' })
  ]);

  return app.toTree();
};

I think the reason that separately manipulating the templates tree doesn’t work is that templates and components don’t really live in separate places anymore in modern Ember, and changes were made in the build pipeline to bring them all together.