Giter Club home page Giter Club logo

ember-app-shell's Introduction

ember-app-shell

ember-app-shell is built and maintained by DockYard, contact us for expert Ember.js consulting.

Renders an App Shell based on your actual running Ember.js application using Headless Chrome! It also inlines the relevant minimal CSS using the Critical tool.

How does this work?

Near the end of Ember CLI's build process, this addon loads your app in a Headless Chrome session and takes the rendered HTML and replaces index.html with the output of the /app-shell route. This way you are able to serve some static html before Ember boots up in the browser, but not having to maintain that manually in the index.html file.

See The App Shell Model on Google's Developer website for more information about what an App Shell is.

This addon is intended to be used with Ember Service Worker and the ember-service-worker-index addon.

Installation

ember install ember-app-shell

You also need to make sure that every environment that will build your app runs Google Chrome (Canary).

See the README of the chrome-launcher NPM package for more details on how to install Chrome on CI environments.

Getting Started

This addon will visit /app-shell by default when the Ember app is built by Ember CLI, so we need to make sure that route exists. The easiest way is to generate one using Ember CLI:

ember generate route app-shell

Now let's assume your application.hbs and app-shell.hbs look like the following:

{{! application.hbs}}
<header>
  <h1>My App's Name</h1>
  <img src="/assets/images/logo.png" alt="My App's Name Logo">
</header>

<main>
  {{outlet}}
</main>
{{! app-shell.hbs}}
<div class="page-loading-spinner">
  <img class="loading-spinner" src="/assets/images/loading-spinner.gif" alt="loading...">
</div>

Then after building (e.g. ember build) the built index.html file (e.g. dist/index.html) will contain:

<div id="ember377" class="ember-view">
  <header>
    <h1>My App's Name</h1>
    <img src="/assets/images/logo.png" alt="My App's Name Logo">
  </header>

  <main>
    <div id="ember422" class="ember-view">
      <div class="page-loading-spinner">
        <img class="loading-spinner" src="/assets/images/loading-spinner.gif" alt="loading...">
      </div>
    </div>
  </main>
</div>

If you now open up your app in the browser, you'll see the app shell content until the Ember.js app renders.

Configuration

There are multiple things you can configure, here's an example of how it can look like:

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

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    'ember-app-shell': {
      visitPath: '/my-app-shell',
      outputFile: 'my-app-shell.html',
      // https://peter.sh/experiments/chromium-command-line-switches/
      chromeFlags: [],
      // https://github.com/addyosmani/critical#options
      criticalCSSOptions: {
        width: 1300,
        height: 900
      }
    }
  });

  return app.toTree();
};

visitPath

This determines which route in your application is used to render the app shell. If you have your router configured with locationType: 'hash' then you might need to set visitPath: '/#/app-shell'.

Default: /app-shell.

outputFile

This determines where the App Shell file is written to in your build. Specifying index.html will overwrite the existing index.html.

Default: index.html

chromeFlags

Flags passed to chrome by chrome-launcher.

Default: []

criticalCSSOptions

The options passed to the critical module.

Default: { minify: true }

Export application global

To properly ensure app rendering of the app shell this addon makes use of Ember's visit API. To do this in all environments you must configure your app to export its application global for all environments. By default, Ember does not do this in production. Read more about exporting your application's global.

Troubleshooting

ember server fails to start

If ember server results in a long idle time followed by an error similar to this, try enabling adding --no-sandbox to the chromeFlags option.

Error: connect ECONNREFUSED 127.0.0.1:44625
    at Object._errnoException (util.js:1021:11)
    at _exceptionWithHostPort (util.js:1043:20)
    at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1175:14)

This may be needed on certain UNIX systems, which need this flag as a workaround to get chrome headless running (see GoogleChrome/chrome-launcher#6 and GoogleChrome/lighthouse#2726).

Legal

DockYard, Inc. © 2017

@dockyard

Licensed under the MIT license

ember-app-shell's People

Contributors

bcardarella avatar ember-tomster avatar tchak avatar topaxi avatar xiphiasuvella avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.