Rails 5, Angular, Heroku, Bower, Postgres

Recently, I’ve integrated a Html Admin Template to my rails application. I wanted it to be Rails Way, fast, reliable, easy to update. Since I’m kinda new to Rails, it took my whole day. After making the system work, I wanted to share it with everyone as a reference.

How it works?

Basically, we are going to use, Rails 5, Bower for frontend dependencies and Heroku for deploying. We will add our dependencies with bower pointing to vendor/assets directory, then we will precompile them for production.

We will use bower for frontend dependencies, git for version control and heroku for deploying. Application will have Angular support, but once you set up system, you can add any dependency easily like React. We will also need heroku toolbelt.

$ git --versionversion 1.9.1

$ rails -vRails 5.0.0.rc1

$ npm -vv2.5.1

$ node -vv0.12.0

$ bower -v1.7.9

$ heroku --versionheroku-toolbelt 3.43.2heroku-cli 5.2.9

I assume you have already installed rails 5, npm, node, git, heroku toolbelt so I start with bower.

$ npm install -g bower

Then we can start new rails project.

$ rails new project --skip-turbolinks --skip-spring

$ cd project

After we created our project we cd into it and initialize git repository and npm for package.json. We will only have bower as dependency for npm. By initializing npm package.json in our application directory, we will be able to tell heroku to execute npm package and install bower. Once we have bower installed, we will easily integrate our dependencies into Rails app.

$ git init

$ npm init

After we type npm init, command line will ask easy questions for you. I don’t see it necessarilly to explain each of them. You can give your project a name and skip other questions by pressing enter. In the last step, it will ask you is this ok? press enter and create your package.json file.

After completing setup, you need to see file looks like this;

{“name”: “project”,“version”: “1.0.0”,“description”: “This README would normally document whatever steps are necessary to get the application up and running.”,“main”: “index.js”,“directories”: {“test”: “test”},“scripts”: {“test”: “echo \”Error: no test specified\” && exit 1"},“author”: “”,“license”: “ISC”}

Then we will install bower as our dependency.

$ npm install bower --save

We added ‘ — save’ because we want it to be saved to package.json file, not temporarily. Once we have installed bower with -save tag, our package.json file now should look like this;

{“name”: “project”,“version”: “1.0.0”,“description”: “This README would normally document whatever steps are necessary to get the application up and running.”,“main”: “index.js”,“directories”: {“test”: “test”},“scripts”: {“test”: “echo \”Error: no test specified\” && exit 1"},“author”: “”,“license”: “ISC”,“dependencies”: {“bower”: “^1.7.9”}}

When we deploy to heroku, first our application will be treated as node application. It will install bower for us, then it will go on to ruby application.

Now we can init bower.json

$ bower init

You can again, just press enter and skip questions. Once you initialized bower file, it should look like this;

{“name”: “project”,“description”: “This README would normally document whatever steps are necessary to get the application up and running.”,“main”: “index.js”,“authors”: [“MrWilhelm <[email protected]>”],“license”: “ISC”,“homepage”: “”,“ignore”: [“**/.*”,“node_modules”,“bower_components”,“vendor/assets/bower_components”,“test”,“tests”],“dependencies”: {

}}

After installing bower as dependency with npm, now we need to customize our bower installation. Because when we install bower, It will automatically install dependencies to “node_modules/bower” directory. We would’t want this for a rails application since we want them to be installed “vendor/assets” directory.

We will create “.bowerrc” file on the root directory of our application. Then we will add this line;

{“directory”: “vendor/assets/bower_components”}

Now bower can install our dependencies to our rails application.

Next we are going to install our dependencies with bower. We are going to install “Bootstrap, Jquery, AngularJS” as our dependencies.

$ bower install bootstrap-sass-official --save

Again we are adding “ — save” so it will be saved to “bower.json”. When we want to install bootstrap, it will automagically install jquery for us. Now we can install angular.

$ bower install angular --save

Now we have dependency system working for us.

We are going to get help from rails-assets.org, this is how they explain it;

Rails Assets is the frictionless proxy between Bundler and Bower.

It automatically converts the packaged components into gems that are easily droppable into your asset pipeline and stay up to date.

When we install our dependencies with bower, it creates bower.json file for us. Rails-assets.org will check our bower.json file for dependencies, and install them for us as rails gem.

We are going to add rails-assets.org to our gemfile as source and then we will add our dependencies to our gemfile.

We need to add ‘rails-assets-BOWER_PACKAGE_NAME’ to our gemfile. For example;

gem 'rails-assets-bootstrap-sass-official'

As you can see we are just adding bower package name to the end of ‘rails-assets-’.

source 'https://rails-assets.org' dogem 'rails-assets-bootstrap-sass-official'gem 'rails-assets-angular'end

Then ‘bundle install’

Fetching gem metadata from https://rails-assets.org/...Installing rails-assets-jquery 2.2.4...Using rails-assets-bootstrap-sass-official 3.3.6...Using rails-assets-angular 1.5.5...

Then we can require our dependencies at “application.js” and “application.css” files.

app/assets/javascripts/application.js

//= require bootstrap//= require angular

Now application.css file

app/assets/stylesheets/application.css

*= require bootstrap

We will create test controller so we can test our dependencies are working.

$ rails g controller test index

This will create necessary controller and views for us. Now we need to edit our route file.

root 'test#index'

Now we have test page. We will test both bootstrap and angular in same page. For this we will use bootstrap grid system buttons, so we can see that bootstrap works. Also we will create simple Angular application to see things are working or not.

views/test/index.html.erb

<div class=”row”><div class=”col-md-6"><h2>Angular Initial Test:</h2><article ng-app=”test<div class="row"><div class="col-md-6"><h2>Angular Initial Test:</h2><article ng-app="test"><header><h3 ng-init="name">Hello, {{name}}</h1></header><section><form class="form-inline"><div class="form-group"><label for="name">Name</label><input class="form-control"type="text"name="name"placeholder="Enter your name"autofocusng-model="name"></div></form></section></article><br /><br /><a class="btn btn-success"> This is test for bootstrap </a></div></div>

Now we have test view. Then we will initialize angular application. We will use exactly one line of code.

app/assets/javascripts/test.js

angular.module('test', []);

Yeahh ! It works like a charm.

Now its time to deploy to Heroku!

I will write this part some later on. You can also contribute to this article by sending me mail, if I am wrong, there is mistake or just explanation, anything. Get in touch: [email protected]