Built to last; Build with Ember

#01. Wildcard Route for 404

// app/router.js
Router.map(function() {
  // other routes
  this.route('page-not-found', { path: '/*wildcard' });
});
// app/templates/page-not-found.hbs
Page Not Found
{{outlet}}

#02. Helper Method

// app/helpers/increment.js
import Ember from "ember";

export function increment(integer){
  return ++integer;
}

export default Ember.Helper.helper(increment);
// app/templates/index.hbs
{{#each model as |contact index|}}
    #{{increment index}}. {{contact.title}}
{{/each}}

#03. Load a model within a Route

// app/routes/post.js
import Ember from 'ember';

var articles = [{
  id: 1,
  title: 'FirstPost',
  content: 'First Post'
}, {
  id: 2,
  title: 'About',
  content: 'About Splash'
}, {
  id: 5,
  title: 'Contact',
  content: 'You can reach us too!'
}];

export default Ember.Route.extend({
  model: function(params) {
    var index = params.post_id -1;
    return articles[index];
  }
});
// app/templates/post.hbs
Id:: {{model.id}}
title: {{model.title}}
body: {{model.content}}

Port an Ember App to Cordova

1. Pre-Requisites

1.1. Ember Cli
$sudo npm install -g ember-cli

1.2. Cordova
$sudo npm install -g cordova

1.3. Also consider
Git, Node.js (with NPM), Bower, Ember CLI, PhantomJS

2. create ember project

$ember new labs

3. include ember-cordova-cli in package.json

DevDependencies
“ember-cli-cordova”: “0.0.15”,

4. alter config/environment.js

modulePrefix: ‘hello’,
environment: environment,
baseURL: ‘/’,
locationType: ‘hash’,
EmberENV: {
FEATURES: {
// Here you can enable experimental features on an ember canary build
// e.g. ‘with-controller’: true
}
},

APP: {
// Here you can pass flags/options to your application instance
// when it is created
},

cordova: {
rebuildOnChange: false,
emulate: false
}

5. Generate Cordova Proj (reverse domain name)

sudo ember generate cordova-init com.hamzeen.hello –platform=android

6. Open Existing Proj

ember cordova:prepare

7. Open iOS Porject in Xcode

ember cordova:open

8. Build for target platform

$sudo ember cordova:build –environment=production –platform=android

9. Additional

9.1. full access
$chmod 777 -R /dir

9.2. To modify npmrc for proxies and npm registry
$vi ~/.npmrc

10. Live debug

visit this url on chrome
chrome://inspect/#devices

Reference:

introduction:

ember-cli-cordova
https://github.com/poetic/ember-cli-cordova

for iOS
http://dreamingin.codes/article/merging-ember-cli-cordova-and-make-it-emulate-ios-live/

http://lelandbatey.com/posts/2015/02/ember-and-cordova

Deploying an ember app made with Firebase Adapter

I got an Ember.js project named “hello-hamzeen” which I did to explore “Ember.js” where I chose to use Firebase as the Adapter. Here is the world’s most succinct deployment instructions ever! 🙂

 

1. If you don’t have firebase tools

$ sudo npm install -g firebase-tools

2. Otherwise, if you want to get it updated

$ sudo npm update -g firebase-tools

3. Login to your firebase account from terminal

$ sudo firebase login

Note: Upon successful login you should see something similar to the following url open up in your browser,
https://www.firebase.com/login/confirm.html?ticket=1cf04b3f-383a-4ba6-9124-71ff6f7bc9ae

 


Now to the meat of it, initialize and deploy to firebaseapp.com. Run the following from your project directory,

4. Initialize

When prompted select our project and type in the public folder you want to use. Typically this is ‘dist’ for Ember apps,
$ sudo firebase init

5. Deploy your project to firebaseapp.com

$ sudo firebase deploy

Mine can be found at, https://hello-hamzeen.firebaseapp.com
Cheers!

Build Watchman from Source

Watchman doesn’t need introduction if you have done Compass, Susy or Sass. Simply put it’s a node module; an observer for picking up any changes in the filesystem at a specified location to afterwards, trigger an action based on it. Typically it is sued to transpile your .scss files into .css files. For some reason I’m unable to install it via npm command. So I got around to write the instructions to build it from its source.


$ git clone https://github.com/facebook/watchman.git
$ cd watchman
$ git checkout v4.5.0 # for the latest stable version
$ ./autogen.sh
$ ./configure
$ make
$ sudo make install