Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
ember-app-shell
Advanced tools
Readme
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.
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.
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.
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.
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.
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
},
// enabled: false (if you want to disable it. You can also pass `APP_SHELL_DISABLED=true` when running `ember serve`)
}
});
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 }
ember server
fails to startIf 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 https://github.com/GoogleChrome/chrome-launcher/issues/6 and https://github.com/GoogleChrome/lighthouse/issues/2726).
DockYard, Inc. © 2017
FAQs
The default blueprint for ember-cli addons.
The npm package ember-app-shell receives a total of 17 weekly downloads. As such, ember-app-shell popularity was classified as not popular.
We found that ember-app-shell demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers 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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.