Integrating Ruby on Rails and Angular

Let’s say I have a Rails app that I want to use to serve as a JSON API for an Angular app. How should I set it up?

Considerations

  • until the teams working on this project are big enough to want to split into “client” and “server” teams, I want one codebase because it’s
    • simpler to keep in sync
    • easier to work on the front-end and back-ends simultaneously
  • For initial simplicity, Rails should serve both the client and API code
  • For later simplicity, breaking out the client from the server should be easy so they should be minimally coupled now

Steps

  1. get a Rails app, e.g. via “rails new blog”
  2. turn off the Rails asset pipeline so the only html/js is that generated by the Angular application
    1. edit /config/application.rb
    2. add this line within the “class Application” block in
      • config.assets.enabled = false
  3. add the Angular application to the Rails codebase
    1. cd /app/assets/javascripts
    2. brunch new https://github.com/sanfordredlich/angular-brunch-seed-modularized.git my_app_name
    3. cd my_app_name
    4. bower install
  4. make your new Angular app send its output to the rails “public” folder
    1. edit config.coffee
    2. change “public: ‘_public'” to “public: ‘../../../../public'”
  5. generate the Angular code, which will output to the Rails /public folder
    1. ./scripts/development.sh
  6. start the rails server
    1. cd ../../../..
    2. rails server

Done, enjoy!

 

Advertisements
Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: