ember-cli-multi-html-output

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`.

1.0.1

latest

Source

npm

Version published: 6 years ago

Maintainers: 1

Created: 8 years ago

Source

ember-cli-multi-html-output

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.

Installation

ember install ember-cli-multi-html-output -D

Usage

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.

Keywords

ember-addon

FAQs

What is ember-cli-multi-html-output?

Is ember-cli-multi-html-output well maintained?

Package last updated on 21 Feb 2019

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.

Install