ember-cli-multi-html-output
Advanced tools
This addon lets you, at the end of the application build, override and/or duplicate and then patch the generated `index.html`, with values you configure in the application options. The values replace placeholders set into `app/index.html`.
Ember CLI is designed to build one single .html file which is a compiled version of the app/index.html file.
Sometimes, because of running the same instance of the application under different domains and/or under several environments (e.g. development, staging, production), you need some texts, scripts ids... to be set for the targeted domain/environment.
This addon lets you, at the end of the application build, override and/or duplicate and then patch the generated index.html, with values you configure in the application options.
The values replace placeholders set into app/index.html.
ember install ember-cli-multi-html-output -D
In your app's ember-cli-build.js, define multiIndex options on your app instance as such:
const app = new EmberApp(defaults, {
multiIndex : {
defaults: {
'LOCALE_LANGUAGE': 'de',
'LOCALE_COUNTRY': 'DE',
'LOCALE_TLD': 'de'
'SOME_TEXT': {
'default': 'Some default text for dev'
}
},
targets: [
{
outputPath: 'index.html',
macros: {
'PAGE_TITLE': {
'default': 'My dev german app',
'production': 'My prod german app',
},
'SOME_TEXT': {
'production': 'Some text for german prod'
}
}
},
{
outputPath: 'index-fr.html',
macros: {
'LOCALE_LANGUAGE': 'fr',
'LOCALE_COUNTRY': 'FR',
'LOCALE_TLD': 'fr',
'PAGE_TITLE': {
'default': 'My dev french app',
'production': 'My prod french app',
},
'SOME_TEXT': {
'default': 'Some text for french dev'
'production': 'Some text for french prod'
}
}
}
]
}
});
In your app's app/index.html
<!DOCTYPE html>
<html lang="LOCALE_LANGUAGE">
<head>
<title>PAGE_TITLE</title>
</head>
<body data-language="LOCALE_LANGUAGE" data-country="LOCALE_COUNTRY" data-tld="LOCALE_TLD">
<p>SOME_TEXT</p>
</body>
</html>
You end up after build -env production with:
In dist/index.html:
<!DOCTYPE html>
<html lang="de">
<head>
<title>My prod german app</title>
</head>
<body data-language="de" data-country="DE" data-tld="de">
<p>Some default text for german prod</p>
</body>
</html>
In dist/index-fr.html:
<!DOCTYPE html>
<html lang="fr">
<head>
<title>My prod french app</title>
</head>
<body data-language="fr" data-country="FR" data-tld="fr">
<p>Some default text for french prod</p>
</body>
</html>
The index-fr.html for build -env development look like below:
<!DOCTYPE html>
<html lang="fr">
<head>
<title>My dev french app</title>
</head>
<body data-language="fr" data-country="FR" data-tld="fr">
<p>Some default text for french dev</p>
</body>
</html>
ember build -env DESIRED_ENVIRONMENT should be generating the different
targets (i.e index.html, index-fr.html) in the /dist folder.
FAQs
This addon lets you, at the end of the application build, override and/or duplicate and then patch the generated `index.html`, with values you configure in the application options. The values replace placeholders set into `app/index.html`.
We found that ember-cli-multi-html-output demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.