This is a four-part series: Part 1, Part 2, Part 3, Part 4
This series will take us through building and structuring an application with an Ember front-end built with ember-cli and a Ruby on Rails backend. We’ll discuss project structure, testing, and deployment to Heroku.
During the course of this series I am going to re-build the Boston Ember website. (if it looks terrible that means I’m not done yet)
Getting setup with our tools
Let’s start by making sure all relevant dev tools are installed on our machine. I am using the following:
- Ruby 2.1.1
- Rails 4.2.0
- Node 0.12.0
- npm 2.7.0
- Postgres (only necessary because we are deploying to Heroku)
Versions at or above these versions should be OK for following along. Please refer elsewhere on how to install these tools on your development machine.
Next I will install ember-cli
npm install -g ember-cli
Confirm that you have ember-cli installed:
ember --version
You should see:
version: 0.2.0
Or a greater version.
Setting up our project
For this project we will keep our Rails and our Ember apps in separate directories with a top-level directory containing the two. We’ll have to do some project generating and renaming.
I first create a new top-level directory:
mkdir bostonember
cd bostonember
Now we’re going to generate our Rails project:
rails new bostonember -B -S -d postgresql
mv bostonember rails
Note how we renamed the directory the Rails project is in to rails. This
does not affect anything in that directory. If you do not have Postgres
on your machine omit -d postgresql
Now the ember project:
ember new bostonember --skip-git
mv bostonember ember
Now it should be obvious why we moved the Rails project. We should now have a structure like:
bostonember
|- ember
|- rails
Let’s confirm that our ember app runs:
cd ember
ember server
In your browser visit http://localhost:4200 and you should see “Welcome to Ember.js”
At this point you can put everything in your top level directory under version control:
git init
git add .
gc -m "Initial commit"
Let’s make some modifications to our Rails app.
rm -rf rails/app/assets
In rails/Gemfile remove the following:
- coffee-rails
- jquery-rails
- turbolinks
- jbuilder
Now everything related to the Asset Pipeline is completely removed.
Add the following to the Gemfile:
gem 'active_model_serializers', '0.9.3'
If you don’t have Postgres on your machine you can set this for Production only:
group :development, :test do
gem 'sqlite3'
end
group :production do
gem 'pg'
end
Run bundle install in your rails directory. Let’s commit our
changes:
git add -A
gc -m "Removed asset pipeline and added active_model_serializers in Rails"
That wraps up Part 1. In Part 2 will focus on Ember and creating some functionality in our app.
