Angular on Rails - Basic Setup and Deploy


angular+rails

How to setup Angular with Rails

There are a lot of way you can integrate Angular with Rails, a common way is put Angular inside the Asset pipeline. It’s easy to integrate that way but the code base is quite mess at the later point. Recently, I found a way to use Yeomen generator and rails-api to work as front-end and back-end together.
Here’s some Pros and Cons for this way:

Pros:
  • Separate struct and codebase for front-end and back-end
  • Get rid of unused rails component like erb view template
  • No more need to fresh for front-end change
Cons:
  • have to deal with csrf token
  • need to setup the proxy
  • hard to deploy



Back-end Part


1. Install Rails-api

1
gem install rails-api

2. Use rails-api to generate a app

1
rails-api my_app

3. Get into the project directory.

1
cd my_app

4. Setup the Database/Rspec

After you use rails-api to set up the back-end, the back-end part is done. But if you want to user other kind of database or test framwork, you can set it up by yourself, just like a normal rails app.


Front-end Part

The front end will be using Yeoman, a great front-end tool. So we need npm to install yeoman, if you dont have npm installed in your machine, in mac osx brew install npm.

5. Install Yeoman and Generator-angular

1
2
npm install -g yo
npm install -g generator-angular

6. Make a client file to let client-code live (but you can call what ever you want)

1
2
mkdir client
cd client

7. Generator the yeoman app

1
yo angular my_app

And after a lot of npm console output, your client app is good to go. Right now you can use grunt serve to make the yeoman app runing.

But you will find out it’s not the thing you want. Since it’s not communicate properly right now with the back-end. OK, let’s make them talk.


Connect the Front-end and back-end


8. Make Front-End public file

As you know, yeoman app dist is #{Rails.root}/client/dist, and Rails front-end is in #{Rails.root}/public.

So first of all, we need to set the grunt dist file to the Rails Public file.

1
2
3
4
5
// Configurable paths for the application
var appConfig = {
  app: require('./bower.json').appPath || 'app',
  dist: '../public'
};

But when you try to do a grunt build it will show the warning: Warning: Cannot delete files outside the current working directory. Use —force to continue.

So, after some search, I found a npm plugin called grunt-force. Install grunt-force first by npm install —save, then before your egisterTask, add this line grunt.loadNpmTasks('grunt-force'); Then on the build task setup, add a 'force:on'. So your build task is something like

1
2
3
4
grunt.registerTask('build', [
   'force:on',
   (the rest of your build task)
 ]);

If your still get a warning about compass, just try gem install compass


9. Setting up a proxy 9000 -> 3000

Then the yeoman app is listen for port 9000, and Rails is listen for port 3000(default), so we have to let the angular app(port 9000) call Rails app (port 3000). So we need to make the yeoman app know to call port 3000 when 9000 is called.

There’s a plugin called grunt-connect-proxy. npm install --save grunt-connect-proxy

Then go back to your grunt file#connect

1
2
3
4
5
6
7
8
9
10
11
12
13
connect: {
      options: {
        port: 9000,
        hostname: 'localhost',  # Change this to your server IP
        livereload: 35729
      },
      proxies: [{
        context: '/api',        # all the API call will be under localhost:3000/api
        host: 'localhost',
        port: 3000              # Your Rails port number
      }],
      (rest of the setting)
      }

OK, you’re good to go. Now when you’re calling localhost:9000/api/users/1, it will automatic get direct to localhost:3000/api/users/1. Then we make the frond-end and back-end can work together. The next big problem is deployment and make the authentication working. Please check for the part II for that.