Skip to content

Instantly share code, notes, and snippets.

@colinyoung
Last active August 29, 2015 14:03
Show Gist options
  • Save colinyoung/7950786f453fb4965df0 to your computer and use it in GitHub Desktop.
Save colinyoung/7950786f453fb4965df0 to your computer and use it in GitHub Desktop.
Heavily tweaked, opinionated Rails template for Ember-Rails.
# 'Forked' from Ember.js' edge_template.rb by @colinyoung.com.
#
# This script is used with the Ruby on Rails' new project generator:
#
# rails new my_app -m http://emberjs.com/edge_template.rb
#
# For more information about the template API, please see the following Rails
# guide:
#
# http://edgeguides.rubyonrails.org/rails_application_templates.html
# Install required gems
gem "active_model_serializers"
gem "ember-rails", "~>0.14"
gem "ember-source", "~>1.1"
gem "rspec-rails", "~> 3.0.1", group: [:development, :test]
gem "autotest-rails", "~> 4.2.1", group: [:development, :test]
gem "rspec-autotest", :group => [:development, :test]
gem "teaspoon", "~> 0.8.0", group: [:development, :test]
run "bundle install"
# Configure the app to serve Ember.js and app assets from an AssetsController
generate :controller, "Assets", "index"
run "rm app/views/assets/index.html.erb"
file 'app/views/assets/index.html.erb', <<-CODE
<!DOCTYPE html>
<html>
<head>
<title>#{@app_name.titleize}</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= csrf_meta_tags %>
</head>
<body>
<%= javascript_include_tag "application" %>
</body>
</html>
CODE
remove_file 'app/assets/javascripts/templates/application.handlebars'
file 'app/assets/javascripts/templates/application.handlebars', <<-CODE
<div style="width: 600px; border: 6px solid #eee; margin: 0 auto; padding: 20px; text-align: center; font-family: sans-serif;">
<img src="http://emberjs.com/images/about/ember-productivity-sm.png" style="display: block; margin: 0 auto;">
<h1>Welcome to Ember.js!</h1>
<p>You're running an Ember.js app on top of Ruby on Rails. To get started, replace this content
(inside <code>app/assets/javascripts/templates/application.handlebars</code>) with your application's
HTML.</p>
</div>
CODE
run "rm -rf app/views/layouts"
route "root :to => 'assets#index'"
# Generate a default serializer that is compatible with ember-data
generate :serializer, "application", "--parent", "ActiveModel::Serializer"
inject_into_class "app/serializers/application_serializer.rb", 'ApplicationSerializer' do
" embed :ids, :include => true\n"
end
# run rspec install generation
run "bundle exec rails generate rspec:install"
run "bundle binstubs rspec-core"
run "bundle exec rails generate ember:bootstrap"
run "rm app/assets/javascripts/application.js" # provided by generate
# add javascript testing support with qunit and teaspoon
run "rails generate teaspoon:install --framework=qunit --coffee"
inject_into_file "test/javascripts/test_helper.coffee", after: 'require application' do <<-CODE
#{@app_name.classify}.setupForTesting()
#{@app_name.classify}.injectTestHelpers()
CODE
end
file "test/javascripts/welcome/welcome_test.coffee", <<-CODE
# add a failing default test
test "homepage has been modified", ->
visit("/").andThen ->
notEqual find(".ember-view h1").text(), "Welcome to Ember.js!", "You haven't modified your page from the defaults."
CODE
initializer "teaspoon_assets.rb", <<-CODE
Rails.application.config.assets.precompile += %w( teaspoon.css teaspoon-*.js qunit/*.js )
CODE
file "circle.yml", <<-CODE
test:
post:
- bundle exec teaspoon
CODE
git :init
# print some instructions
unless yes?("Ignore important notes and FAQs about this generator? (TIP: You might have to scroll up afterwards.) Hit 'Enter' to read, 'Y' to ignore (you cowboy).")
puts <<-README
A few quick notes:
Rspec
- Ember is installed at /app/assets/javascripts with a completely familiar layout.
- spec/ is for Rails specs- Model specs, Controller specs, and so on.
Qunit/Ember
- test/ is for Ember tests- add them as test/javascripts/my_test.coffee.
- Why separate spec and test? Because Qunit prefers to be in test/. I liked the separation anyway.
- Run specs with `bundle exec rspec`, like usual. Autotest is available - `bundle exec autotest`.
- Run Qunit tests with `bundle exec teaspoon` or by going to http://localhost:3000/teaspoon/default.
Continuous Integration
- A circle.yml file has already been added that runs both rspec and teaspoon specs.
Philosophy
- x DO NOT create views for your rails controllers.* All of that is in Ember.
- ✓ DO create Ember templates in app/assets/javascripts/templates.
* Yes, even Devise. It's outside the scope of this document, but this gem should be an excellent
starting place for Devise + Ember:
https://github.com/d-i/ember-devise-simple-auth
- x DO NOT redirect in rails controllers.
- ✓ DO think about adding `defaults: { format: :json }` when creating resources: http://stackoverflow.com/a/10682238
- ✓ DO think about using Yajl-ruby for much faster JSON rendering: https://github.com/rails/jbuilder#faster-json-backends
- x DO NOT write integration specs with Capybara in spec/.
- ✓ DO write Ember Qunit tests in test/javascripts/.
- x DO NOT write javascript files in vanilla JS.
- ✓ DO write javascript files in CoffeeScript (if you want to use EmberScript, let's discuss first).
How do I get started?
- Exactly how you would normally. You can generate and test rails models; you can add and test ember routes, controllers, etc...
README
end
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment