Tag Archives: javascript

Bower integration with your Rails 4 app

by about , ,

First take a look to this post making a basic NodeJS installation on Ubuntu. You will need npm and bower installed.

If you want more details about this process take a look to this post.

Configure Bower to place libraries in our vendor directory’.bowerrc’:

{
 "directory": "vendor/assets/components"
}

Asset pipeline should know where to locate these libraries in order to process them. so write in your ‘config/application.rb’:

config.assets.paths << Rails.root.join('vendor', 'assets', 'components')

With `bower init` you would create ‘bower.json’ file which should have the following aspect:

{
  name: 'BowerAndRails',
  version: '0.0.1',
  authors: [
    'Syl <nop@nope.com>'
  ],
  description: 'Tutorial about Bower and Rails',
  license: 'MIT',
  homepage: 'http://mycoolhomepage.com',
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'test',
    'tests'
  ],
  "dependencies": {
    "intl-tel-input": "~6.0.6"
  }
}

With the command `bower install` all dependencies will be installed at ‘vendor/assets/components’.

After that you can import the files in your assets. At ‘application.js’:

//= require intl-tel-input
//= require intl-tel-input/lib/libphonenumber/build/utils

At ‘application.sass’:

@import intl-tel-input/src/css/intlTelInput
.iti-flag
  background-image: url('intl-tel-input/build/img/flags.png')

On `rails s` assets will be taken from bower components.

Integrating in Capistrano flow

Add `gem ‘capistrano-bower’` to your Gemfile. And call the library from your Capfile: `require ‘capistrano/bower’`.

Then you can call the action in deploy command. At `config/deploy.rb` :

namespace :deploy do
  before :compile_assets, 'bower:install'
end

 

Basic NodeJS installation for Ubuntu

by about , ,

NodeJS installation for Ubuntu 14.04

Some packages needed for binary builds:

sudo apt-get update
sudo apt-get install build-essential libssl-dev

First install NVM (Node Version Manager) for your OS. Mine is Ubuntu so:

curl https://raw.githubusercontent.com/creationix/nvm/v0.16.1/install.sh | sh

Now install node last version (today is v0.12.0):

nvm install -s v0.12.0
nvm alias default v0.12.0

This will take a while because you are compiling sources (-s option)

Installing Bower

Bower allows you to install and manage the dependencies of a lot of JS libraries found in its marketplace:

npm install -g bower

Boostrap AngularJS project with Yeoman

by about , ,

First take a look to this post making a basic NodeJS installation on Ubuntu. You will need npm and bower installed.

Installing Yeoman

Install all tools needed:

npm install -g grunt grunt-cli yo generator-karma generator-angular

Create Angular project

cd myapp
yo angular myapp
gem install compass
bower install grunt-svgmin grunt-contrib-jshint -S
grunt serve

WebStorm

Download it from Jetbrains-Webstorm site.

tar xvf WebStorm-9.0.3.tar.gz