Skip to content

Instantly share code, notes, and snippets.

@RunnerRick
Last active May 8, 2016 17:24
Show Gist options
  • Save RunnerRick/6025445 to your computer and use it in GitHub Desktop.
Save RunnerRick/6025445 to your computer and use it in GitHub Desktop.
How To Integrate Sails, Ember, and Twitter Bootstrap

#Prerequisites#

#Steps#

  1. Create a new Sails application via sails new <appName>.
  2. Change your working directory to the root directory of the new Sails application via cd <appName>.
  3. Create an Ember application with Ember Tools via create-ember.sh.
  4. Unzip the Twitter Bootstrap package into ./bootstrap.
  5. Copy the Twitter Bootstrap code to various locations via integrate-bootstrap.sh.
  6. Modify ./views/layout.ejs.
  7. Modify ./ember/js/config/app.js to require Bootstrap.
  8. Build the Ember application via build-ember.sh.
  9. Start the Sails application via sails lift.
// 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment