Now that we have a vanilla rails app installed locally, we need to customize it.
First are the gems.
Ruby Gems
Lets edit the gemfile. From the intial version, I removed sqlite3, coffee-rails, jquery, turbolinks, jbuilder, sdoc and web-console. I also removed debugger because it isn’t compatible with ruby 2 at the moment. jQuery is perfectly compatible with AngularJS, but we are going to keep it simple for this tutorial. I am using mysql2 as the database for this app.
[shell]
$ vi Gemfile
[/shell]
[raw]
source ‘https://rubygems.org’
# Default gems:
# Bundle edge Rails instead: gem ‘rails’, github: ‘rails/rails’
gem ‘rails’, ‘4.2.0’
# Use SCSS for stylesheets
gem ‘sass-rails’, ‘~> 5.0’
# Use Uglifier as compressor for JavaScript assets
gem ‘uglifier’, ‘>= 1.3.0’
group :development, :test do
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem ‘spring’
end
# Added gems:
gem ‘sprockets-rails’, ‘~> 2.3’
gem ‘mysql2’
gem ‘font-awesome-sass’
gem ‘angularjs-rails’, ‘~> 1.3.10’
gem ‘angular-ui-bootstrap-rails’, ‘~> 0.12.0’
gem ‘angularjs-file-upload-rails’
gem ‘angular_rails_csrf’
gem ‘bootstrap-sass’, ‘~> 3.3.4.1’
gem ‘underscore-rails’
[/raw]
Now we need to install the gems.
[shell]
$ cd /path/to/site
$ bundle install
[/shell]
Some gems need assets added to the asset pipeline.
Ruby Gem Javascript
[shell]
$ cd /path/to/site
$ vi app/assets/javascripts/application.js
[/shell]
You include javascript files into the asset pipeline by adding special comments into application.js. I removed turbolinks because I am going to use AngularJS. They can coexist, but not in my house. I also removed require_tree because it might include something I don’t want. This is just my preference.
[js]
// Default includes
// removed jquery
// removed jquery_ujs
// removed turbolinks
// removed require_tree .
// Custom includes
//= require angular
//= require angular-resource
//= require angular-route
//= require angular-sanitize
//= require angular-ui-bootstrap
//= require angular-ui-bootstrap-tpls
//= require angularjs-file-upload
//= require underscore
[/js]
Ruby Gem CSS
Similarly, you include stylesheets that accompany your gems (CSS, or better yet SASS files) by importing them in application.css.scss. The default is application.css, so lets change it to SASS. Use git to move it so it stays tracked in the repo (otherwise you have to remember to add the new file).
[shell]
$ cd /path/to/site
$ git mv app/assets/stylesheets/application.css app/assets/stylesheets/application.css.scss
$ vi app/assets/stylesheets/application.css.scss
[/shell]
[css]
// GEMS
@import “bootstrap”;
@import “font-awesome-sprockets”;
@import “font-awesome”;
[/css]
Start the server
Rails comes with a simple server that is accessible by the command line. Lets start it up and see if it works. (Before ruby 2, the command is just “rails s”
[shell]
$ cd /path/to/site
$ bin/rails server
[/shell]
Commit progress
If the server starts up, then this is a good time to save our work.
[shell]
$ cd /path/to/site
$ git add -u
$ git commit -m “Gems”
[/shell]
Setup the database
I am not going to go into detail for how to set up your database. That can be a series of posts in itself. I will just show you this one set: keep the configuration file (database.yml) out of version control. Edit the file to match the databases you will set up, make a copy, put the copy in source control, then put your passwords in the original and tell git to ignore it. For every environment you install the app, you need to remember to put the passwords in database.yml. It is best to keep this automated in a system like capistrano, but I am not going to cover that.
[shell]
$ cd /path/to/site
$ vi config/database.yml
[/shell]
[raw] development: adapter: mysql2 encoding: utf8 database: admin_tutorial_db username: *** database username here *** password: "*** database password here ***" host: 127.0.0.1 production: adapter: mysql2 encoding: utf8 database: admin_tutorial_db username: *** database username here *** password: "*** database password here ***" host: localhost [/raw]
Use git to rename the file, but not to copy it because we do not want it tracked.
[shell]
$ cd /path/to/site
$ git mv config/database.yml config/database.yml.sample
$ cp config/database.yml.sample config/database.yml
$ vi .gitignore
[/shell]
Add the part at the end that says to ignore database.yml:
[raw]
# Ignore bundler config.
/.bundle
# Ignore all logfiles and tempfiles.
/log/*
!/log/.keep
/tmp
# Ignore database config.
/config/database.yml
[/raw]
Now save our changes.
[shell]
$ git add -u
$ git commit -m “Database config”
[/shell]
Now we can add our passwords and it won’t be visible in the commit history.
[shell]
$ cd /path/to/site
$ vi config/database.yml
[/shell]
[raw] development: adapter: mysql2 encoding: utf8 database: admin_tutorial_db username: admintutorialsql password: "@er5GyD^wzIK2aRkpf#6Dje671$ecGx33ngXQRo2&jneufpgliZ&E8d81SBuxHfL" host: 127.0.0.1 production: adapter: mysql2 encoding: utf8 database: admin_tutorial_db username: admintutorialsql password: "*** database password here ***" host: localhost [/raw]
Once we have the database setup, open a browser and hit this URL: http://localhost:3000 and you should see the “Welcome aboard” screen for rails. You remove this screen by deleting public/index.html, but we will leave it for right now.
Lets push up our changes.
[shell]
$ cd /path/to/site
$ git push origin master
[/shell]