How to use contentFor in ember-cli-build.js in another HTML file?

Ember CLI
1

Hello,

I would like to generate a “fallback.html” file when executing the “ember build” command. This file would be a static HTML file (like index.html) where I would like to reuse the same CSS from “index.html”.

I guess I have to use “broccoli-funnel” and “broccoli-merge-trees” but I have not managed to find a way to use contentFor in this another HTML file…

Thanks for your help,

2

I succeeded with the following code in my ember-cli-build.js (after reading the “ember-cli” code). Maybe it’s not the best but it works

const emberAppUtils = require('ember-cli/lib/utilities/ember-app-utils');
const { isExperimentEnabled } = require('ember-cli/lib/experiments');
const ConfigReplace = require('broccoli-config-replace');
const path = require('path');

const configReplacePatterns = emberAppUtils.configReplacePatterns;

...

const fallbackHTMLFile = new Funnel('app', {
	files: ['fallback.html'],
	destDir: '/'
});

const isModuleUnificationEnabled = isExperimentEnabled('MODULE_UNIFICATION') && !!app.trees.src;
const patterns = configReplacePatterns({
	addons: app.project.addons,
	autoRun: app.options.autoRun,
	storeConfigInMeta: app.options.storeConfigInMeta,
	isModuleUnification: isModuleUnificationEnabled,
});

const processedFallbackHTMLFile = new ConfigReplace(fallbackHTMLFile, app._defaultPackager.packageConfig(), {
	configPath: path.join(app.name || app.project.name(), 'config', 'environments', `${app.env}.json`),
	files: ['fallback.html'],
	patterns
});

In fallback.html, variables like {{rootURL}}, {{content-for ...}} are replaced :slight_smile:

3 Likes