RunnerRick/.sails-ember-bootstrap.md

## .sails-ember-bootstrap.md

      
    Raw
  

              .sails-ember-bootstrap.md
            
          
    #Prerequisites#

Sails.js (See https://github.com/balderdashy/sails)
Ember Tools (See https://github.com/rpflorence/ember-tools)
Twitter Bootstrap (See http://twitter.github.io/bootstrap/index.html)

#Steps#

Create a new Sails application via sails new <appName>.
Change your working directory to the root directory of the new Sails application via cd <appName>.
Create an Ember application with Ember Tools via create-ember.sh.
Unzip the Twitter Bootstrap package into ./bootstrap.
Copy the Twitter Bootstrap code to various locations via integrate-bootstrap.sh.
Modify ./views/layout.ejs.
Modify ./ember/js/config/app.js to require Bootstrap.
Build the Ember application via build-ember.sh.
Start the Sails application via sails lift.


## app.js
// require other, dependencies here, ie:
// require('./vendor/moment');

require('../vendor/jquery');
// Reference Twitter Bootstrap after jQuery.
require('../vendor/bootstrap.js');
require('../vendor/handlebars');
require('../vendor/ember');
require('../vendor/ember-data'); // delete if you don't want ember-data

var App = Ember.Application.create();
App.Store = require('./store'); // delete if you don't want ember-data

module.exports = App;

## build-ember.sh
# Build the ember application. Output is assets/js/application.js
# Since the application.js file is in the assets folder, Sails will combine/minify it with other files automatically.
# The reference to application.js is inserted into the HTML via the assets.js() call in layout-ember.ejs.

cd ember
ember build --out-file ../assets/js/application.js
cd ..

## create-ember.sh
# Create the Ember application inside the Sails application.

# This creates the Ember source files in ./ember.
# These files are not in ./public because they are source files--not output.

mkdir ember
cd ember

ember create

cd ..

# Back up the Home controller's view (generated from the Sails boilerplate).
mv views/home/index.ejs views/home/index.ejs.old

# Create an empty index.ejs file for the Home controller.
touch views/home/index.ejs

## integrate-bootstrap.sh
# Copy the Bootstrap JS files into the vendor directory.
cp -R bootstrap/js/*.js ember/js/vendor

# Remove the already-minified JS files. (Sails will handle this.)
rm ember/js/vendor/*.min.js

# Remove normalize.css (included by Sails).
# Normalize.css (or equivalent) is included in Bootstrap.
rm assets/mixins/normalize.css

# Copy the Bootstrap library to public.
cp -R bootstrap public/bootstrap

## layout.ejs.html
<!-- This file merges the HTML from layout.ejs (from the Sails boilerplate)
     and index.html (from the ember-tools boilerplate). -->

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Ember App</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<!-- Let the Bootstrap styles come before others. -->
	<link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.css">
	<%- assets.css() %>
</head>
<body>
	<%- body %>
  	<%- assets.js() %>
</body>
</html>
	// require other, dependencies here, ie:
	// require('./vendor/moment');

	require('../vendor/jquery');
	// Reference Twitter Bootstrap after jQuery.
	require('../vendor/bootstrap.js');
	require('../vendor/handlebars');
	require('../vendor/ember');
	require('../vendor/ember-data'); // delete if you don't want ember-data

	var App = Ember.Application.create();
	App.Store = require('./store'); // delete if you don't want ember-data

	module.exports = App;
	# Build the ember application. Output is assets/js/application.js
	# Since the application.js file is in the assets folder, Sails will combine/minify it with other files automatically.
	# The reference to application.js is inserted into the HTML via the assets.js() call in layout-ember.ejs.

	cd ember
	ember build --out-file ../assets/js/application.js
	cd ..
	# Create the Ember application inside the Sails application.

	# This creates the Ember source files in ./ember.
	# These files are not in ./public because they are source files--not output.

	mkdir ember
	cd ember

	ember create

	cd ..

	# Back up the Home controller's view (generated from the Sails boilerplate).
	mv views/home/index.ejs views/home/index.ejs.old

	# Create an empty index.ejs file for the Home controller.
	touch views/home/index.ejs
	# Copy the Bootstrap JS files into the vendor directory.
	cp -R bootstrap/js/*.js ember/js/vendor

	# Remove the already-minified JS files. (Sails will handle this.)
	rm ember/js/vendor/*.min.js

	# Remove normalize.css (included by Sails).
	# Normalize.css (or equivalent) is included in Bootstrap.
	rm assets/mixins/normalize.css

	# Copy the Bootstrap library to public.
	cp -R bootstrap public/bootstrap
	<!-- This file merges the HTML from layout.ejs (from the Sails boilerplate)
	and index.html (from the ember-tools boilerplate). -->

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Ember App</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<!-- Let the Bootstrap styles come before others. -->
	<link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.css">
	<%- assets.css() %>
	</head>
	<body>
	<%- body %>
	<%- assets.js() %>
	</body>
	</html>