Skip to content

Commit

Permalink
Create the ember app and install bootstrap
Browse files Browse the repository at this point in the history
  • Loading branch information
zoltan-nz committed Sep 8, 2015
0 parents commit 822fb36
Show file tree
Hide file tree
Showing 33 changed files with 571 additions and 0 deletions.
4 changes: 4 additions & 0 deletions .bowerrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"directory": "bower_components",
"analytics": false
}
34 changes: 34 additions & 0 deletions .editorconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# editorconfig.org

root = true


[*]
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
indent_style = space
indent_size = 2

[*.js]
indent_style = space
indent_size = 2

[*.hbs]
insert_final_newline = false
indent_style = space
indent_size = 2

[*.css]
indent_style = space
indent_size = 2

[*.html]
indent_style = space
indent_size = 2

[*.{diff,md}]
trim_trailing_whitespace = false
9 changes: 9 additions & 0 deletions .ember-cli
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
/**
Ember CLI sends analytics information by default. The data is completely
anonymous, but there are times when you might want to disable this behavior.

Setting `disableAnalytics` to true will prevent any data from being sent.
*/
"disableAnalytics": false
}
17 changes: 17 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
# See http://help.github.com/ignore-files/ for more about ignoring files.

# compiled output
/dist
/tmp

# dependencies
/node_modules
/bower_components

# misc
/.sass-cache
/connect.lock
/coverage/*
/libpeerconnection.log
npm-debug.log
testem.log
32 changes: 32 additions & 0 deletions .jshintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
{
"predef": [
"document",
"window",
"-Promise"
],
"browser": true,
"boss": true,
"curly": true,
"debug": false,
"devel": true,
"eqeqeq": true,
"evil": true,
"forin": false,
"immed": false,
"laxbreak": false,
"newcap": true,
"noarg": true,
"noempty": false,
"nonew": false,
"nomen": false,
"onevar": false,
"plusplus": false,
"regexp": false,
"undef": true,
"sub": true,
"strict": false,
"white": false,
"eqnull": true,
"esnext": true,
"unused": true
}
23 changes: 23 additions & 0 deletions .travis.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
---
language: node_js
node_js:
- "0.12"

sudo: false

cache:
directories:
- node_modules

before_install:
- export PATH=/usr/local/phantomjs-2.0.0/bin:$PATH
- "npm config set spin false"
- "npm install -g npm@^2"

install:
- npm install -g bower
- npm install
- bower install

script:
- npm test
3 changes: 3 additions & 0 deletions .watchmanconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"ignore_dirs": ["tmp"]
}
109 changes: 109 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
# Library App

Ember.js 2.0 tutorial for absolute beginners.

## Prerequisites

* node.js 0.12.0 or newer

Suggested way to install node.js: https://github.com/creationix/nvm

* Ember Inspector Chrome Extension

Install Ember Inspector Chrome extension in your Chrome Browser: [Ember Inspector](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi?hl=en)

## Implementation log

### Install ember-cli

npm install -g ember-cli

### Create the app

ember new library-app

### Launch the app

ember server

### Update Ember.js and Ember-Data to 2.0

Update version number of `"ember"` and `"ember-data"` in `./bower.json`:

{
"name": "library-app",
"dependencies": {
"ember": "2.0",
//...
"ember-data": "2.0",
//...
}
}

Update version number of `"ember-data"` in `./package.json`:

{
"name": "library-app",
//..
"devDependencies": {
//..
"ember-data": "2.0",
//..
}
}

Run `npm update` and `bower update` in your console:

npm update
bower update

If you see something similar when you run `bower update`

Unable to find a suitable version for ember, please choose one:
1) ember#>=1.4 <2 which resolved to 1.13.10 and is required by ember-cli-shims#0.0.3, ember-load-initializers#0.1.5
2) ember#^2.0.0 which resolved to 2.0.2 and is required by ember-data#2.0.0
3) ember#2.0 which resolved to 2.0.2 and is required by library-app
4) ember#> 1.5.0-beta.3 which resolved to 2.0.2 and is required by ember-resolver#0.1.21

Prefix the choice with ! to persist it to bower.json

Select the number with `ember#2.0 which resolved to 2.0.2 and is required by library-app`, in this case the answer is `!3` and hit enter. (`2.0.2` could be different, because there could be newer version later.)

Launch or relaunch your application with `ember server` or with `ember s` and check the verision number in browser console.

### Turn on a couple of debugging options

You can find a list of debugging options in `./config/environment.js` file. Remove the comment sign as follow:

//..
if (environment === 'development') {
// ENV.APP.LOG_RESOLVER = true;
ENV.APP.LOG_ACTIVE_GENERATION = true;
ENV.APP.LOG_TRANSITIONS = true;
ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
ENV.APP.LOG_VIEW_LOOKUPS = true;
}
//..

Check your app and open the Console in Chrome. You will see a couple of extra information what Ember.js automatically doing.

### Add Sass and Bootstrap sass version to your app

Exit your `ember server` with `Ctrl+C` in your terminal.

Run the following two command in your terminal.

ember install ember-cli-sass
ember install ember-cli-bootstrap-sassy

You will see, that your `./package.json` and `./bower.json` are extended with a couple of lines.

Rename your `app.css` to `app.scss` with the following terminal command or you can use your editor to rename the `./app/styles/app.css` file:

mv app/styles/app.css app/styles/app.scss

Open `./app/styles/app.scss` file in your editor and add the following line:

@import "bootstrap";

Relaunch your app with `ember server`. You should see in the browser, that 'Welcome to Ember' uses Bootstrap default font.
18 changes: 18 additions & 0 deletions app/app.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import Ember from 'ember';
import Resolver from 'ember/resolver';
import loadInitializers from 'ember/load-initializers';
import config from './config/environment';

var App;

Ember.MODEL_FACTORY_INJECTIONS = true;

App = Ember.Application.extend({
modulePrefix: config.modulePrefix,
podModulePrefix: config.podModulePrefix,
Resolver: Resolver
});

loadInitializers(App, config.modulePrefix);

export default App;
Empty file added app/components/.gitkeep
Empty file.
Empty file added app/controllers/.gitkeep
Empty file.
Empty file added app/helpers/.gitkeep
Empty file.
25 changes: 25 additions & 0 deletions app/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>LibraryApp</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">

{{content-for 'head'}}

<link rel="stylesheet" href="assets/vendor.css">
<link rel="stylesheet" href="assets/library-app.css">

{{content-for 'head-footer'}}
</head>
<body>
{{content-for 'body'}}

<script src="assets/vendor.js"></script>
<script src="assets/library-app.js"></script>

{{content-for 'body-footer'}}
</body>
</html>
Empty file added app/models/.gitkeep
Empty file.
11 changes: 11 additions & 0 deletions app/router.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
location: config.locationType
});

Router.map(function() {
});

export default Router;
Empty file added app/routes/.gitkeep
Empty file.
1 change: 1 addition & 0 deletions app/styles/app.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@import "bootstrap";
3 changes: 3 additions & 0 deletions app/templates/application.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<h2 id="title">Welcome to Ember</h2>

{{outlet}}
Empty file.
20 changes: 20 additions & 0 deletions bower.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
{
"name": "library-app",
"dependencies": {
"ember": "2.0",
"ember-cli-shims": "ember-cli/ember-cli-shims#0.0.3",
"ember-cli-test-loader": "ember-cli-test-loader#0.1.3",
"ember-data": "2.0",
"ember-load-initializers": "ember-cli/ember-load-initializers#0.1.5",
"ember-qunit": "0.4.9",
"ember-qunit-notifications": "0.0.7",
"ember-resolver": "~0.1.18",
"jquery": "^1.11.3",
"loader.js": "ember-cli/loader.js#3.2.1",
"qunit": "~1.18.0",
"bootstrap-sass": "~3.3.5"
},
"resolutions": {
"ember": "2.0"
}
}
47 changes: 47 additions & 0 deletions config/environment.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
/* jshint node: true */

module.exports = function(environment) {
var ENV = {
modulePrefix: 'library-app',
environment: environment,
baseURL: '/',
locationType: 'auto',
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
}
};

if (environment === 'development') {
// ENV.APP.LOG_RESOLVER = true;
ENV.APP.LOG_ACTIVE_GENERATION = true;
ENV.APP.LOG_TRANSITIONS = true;
ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
ENV.APP.LOG_VIEW_LOOKUPS = true;
}

if (environment === 'test') {
// Testem prefers this...
ENV.baseURL = '/';
ENV.locationType = 'none';

// keep test console output quieter
ENV.APP.LOG_ACTIVE_GENERATION = false;
ENV.APP.LOG_VIEW_LOOKUPS = false;

ENV.APP.rootElement = '#ember-testing';
}

if (environment === 'production') {

}

return ENV;
};
23 changes: 23 additions & 0 deletions ember-cli-build.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
var app = new EmberApp(defaults, {
// Add options here
});

// Use `app.import` to add additional libraries to the generated
// output files.
//
// If you need to use different assets in different
// environments, specify an object as the first parameter. That
// object's keys should be the environment name and the values
// should be the asset to use in that environment.
//
// If the library that you are including contains AMD or ES6
// modules that you would like to import into your application
// please specify an object with the list of modules as keys
// along with the exports of each module as its value.

return app.toTree();
};
Loading

0 comments on commit 822fb36

Please sign in to comment.