ember-app

Baseline setup for Ember application with the tools I use most.

Assumptions

The following should already be installed:

# Install Homebrew or some other OS-specific package manager
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

brew install node         # install node and npm
npm install -g ember-cli  # Ember CLI 
npm install -g bower      # Bower Components

Once this repo is cloned locally, run the following:

npm install                 # Install npm dependencies
bower install               # install bower dependencies
ember serve                 # start the app
open http://localhost:4200  # view the app 

Included Addons and Example Usages

Below is a list of addons included in this setup.

ember-browserify: https://github.com/ef4/ember-browserify

Example

1. Install an npm module: npm i -D my-cool-module
2. In app, import module: import MyCoolModule from "npm:my-cool-module"

ember-cli-fastboot: https://github.com/ember-fastboot/ember-cli-fastboot

from:

run: ember fastboot --serve-assets view: localhost:3000

ember-cli-post-css: https://github.com/jeffjewiss/ember-cli-postcss

Example

install autoprefixer npm i --save-dev autoprefixer

configure in ember-cli-build.js

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

module.exports = function (defaults) {
  var app = new EmberApp(defaults, {
    postcssOptions: {
      compile: {
        enabled: false
      },
      filter: {
        enabled: true,
        plugins: [
          {
            module: autoprefixer,
            options: {
              browsers: ['last 2 version']
            }
          }
        ]
      }
    }
  });
  return app.toTree();
};

ember-cli-sass-pods: https://github.com/justtal/ember-cli-sass-pods

Example

Generate styles for foo route and foo-bar components

ember g style foo
ember g style components/foo-bar

ember-link-action: https://github.com/Kuzirashi/ember-link-action

Example

Add action to link-to

{{#link-to 'other-route' invokeAction=(action 'testAction' param1 param2)}}
  Link to other route
{{/link-to}}

ember-remarkable: https://github.com/johnotander/ember-remarkable

Example

Common options

{{md-text
  text        = "# Markdown text!"  /* required */
  typographer = true                /* include fancy typography */
  linkify     = false               /* auto-link urls */
  html        = true                /* don't escape html in markdown */
}}

ember-router-scroll: https://github.com/dollarshaveclub/ember-router-scroll

Example

app/router.js

import RouterScroll from 'ember-router-scroll'

//...

const Router = Ember.Router.extend(RouterScroll, { 
    //...
};

config/environment.js

/* jshint node: true */

module.exports = function(environment) {
  var ENV = {
    // ...
    locationType: 'router-scroll'
    historySupportMiddleware: true,
    // ...
  }
  
  // ...

  return ENV;
};

eqcss: https://github.com/eqcss/eqcss

This is already included in the didTransition() for every route.

Example

app/pods/foo/route.js

import Ember from 'ember';

const { EQCSS } = window;

export default Ember.Route.extend({
  didTransition() {
    EQCSS.apply(); // forces update of DOM and EQCSS
  }
});