html(lang='en')
  head
    title Publish
    meta(name='viewport', content='width=device-width, initial-scale=1')
    base(href='/')
    link(rel='icon' href='/assets/images/favicon.png')

    if locals.dist
      script(src='/publish.min.js')
    else
      script(src='/jspm_packages/system.js')
      script(src='/config/systemjs.config.js')
      script.
        var readyForMainLoad;
        if (location.origin.match(/localhost|\.dev/)) {
          System.trace = true;
          readyForMainLoad = System.import('capaj/systemjs-hot-reloader').then((HotReloader) => {
            hr = new HotReloader.default('http://localhost:3000');

            // reload same-named components when css changes
            hr.on('change', (fileName) => {
              if (console['clear']) console['clear']();
              console.log(`---- hot-reloaded ${fileName} ----`);
              if (fileName.match(/app\.component/)) {
                hr.hotReload('app/app.component.ts');
              } else if (fileName.match(/storyedit\.forms/)) {
                hr.hotReload('app/storyedit/directives/edit.component.ts');
              } else if (fileName.match(/\.css$/)) {
                hr.hotReload(fileName.replace(/\.css$/, '.ts'));
              }
            });
          });
        }
        Promise.resolve(readyForMainLoad).then(() => {
          System.import('app/main').then(null, console.error.bind(console));
        });

  body
    script
      = locals.config
    publish-app

html(lang='en')
  head
    title Publish
    meta(name='viewport', content='width=device-width, initial-scale=1')
    base(href='/')
    link(rel='icon' href='/assets/images/favicon.png')

    if locals.dist
      script(src='/publish.min.js')
    else
      script(src='/jspm_packages/system.js')
      script(src='/config/systemjs.config.js')
      script.
        var readyForMainLoad;
        if (location.origin.match(/localhost|\.dev|\.docker/)) {
          System.trace = true;
          readyForMainLoad = System.import('capaj/systemjs-hot-reloader').then((HotReloader) => {
            hr = new HotReloader.default(location.origin);

            // reload same-named components when css changes
            hr.on('change', (fileName) => {
              if (console['clear']) console['clear']();
              console.log(`---- hot-reloaded ${fileName} ----`);
              if (fileName.match(/app\.component/)) {
                hr.hotReload('app/app.component.ts');
              } else if (fileName.match(/storyedit\.forms/)) {
                hr.hotReload('app/storyedit/directives/edit.component.ts');
              } else if (fileName.match(/\.css$/)) {
                hr.hotReload(fileName.replace(/\.css$/, '.ts'));
              }
            });
          });
        }
        Promise.resolve(readyForMainLoad).then(() => {
          System.import('app/main').then(null, console.error.bind(console));
        });

  body
    script
      = locals.config
    publish-app

Allow .docker, use whatever the browser location is for hot reload
Allow .docker, use whatever the browser location is for hot reload
