8 ms·

How to Wire Up Ruby on Rails and AngularJS as a Single-Page Application

109 points by jasonswett 12y ago

ch4s3 12y ago
This is a pretty good tutorial, that seems to be poorly covered in the body of recent(ish) blogs.
- jasonswett 12y ago
  Thanks!
davedx 12y ago
Nice writeup. I tried to do the same thing a few months back and gave up. How did you handle getting your browser to talk to a server running on a different port? (Cross-origin requests). I have to say though, Rails used to be known for "convention over configuration", but when I've tried to use it lately I've found it becomes almost as complicated as configuring enterprise Java projects.
- jasonswett 12y ago
  I didn't have to do anything special to allow CORS, and now that I think of it I'm not sure why, because it's been necessary on other SPA projects I've been involved with. Maybe because both servers are localhost. That would be a good thing for me to figure out and include in the post. I'm kind of learning all this in public.
  - deleted 12y ago
    [deleted]
- tragic 12y ago
  > How did you handle getting your browser to talk to a server running on a different port? (Cross-origin requests) Having run such things on entirely different servers, never mind localhost ports, what I needed to do was set the Access-Control-Allow-Origin http header in the rails controller (same principle applies to other frameworks). One simple guide is here: http://madhukaudantha.blogspot.co.uk/2011/05/access-control-allow-origin-in-rails.html http://madhukaudantha.blogspot.co.uk/2011/05/access-control-... Slightly ruined by that dreadful blogger interface, but there you go.
- mbell 12y ago
  > How did you handle getting your browser to talk to a server running on a different port? (Cross-origin requests). He's using grunt-connect-proxy to proxy the API requests through the grunt server so there are no CORS requests in this setup.
- patrickread 12y ago
  > How did you handle getting your browser to talk to a server running on a different port? (Cross-origin requests). https://github.com/cyu/rack-cors https://github.com/cyu/rack-cors I used that gem recently, and it fixed my issue. Just added the dev, prod hostnames explicitly in the origins list in my application.rb.
- cmpb 12y ago
  You could just run the api on /api via an nginx proxy, that way it uses the same domain. I.e. catch all the traffic coming in to /api and route it to the proxy for you rails app.
- miles_matthias 12y ago
  I wrote about using Rails + AngularJS in a CORS way -- http://dojo4.com/blog/angularjs-service-rails-api http://dojo4.com/blog/angularjs-service-rails-api Hopefully it helps you!
- aantix 12y ago
  >I have to say though, Rails used to be known for "convention over configuration", but when I've tried to use it lately >I've found it becomes almost as complicated as configuring enterprise Java projects. Do you have any specific examples of where you were having troubles?
mbell 12y ago
Great write up! I wrote a bit[0] awhile back about setting html5mode routing with rails and angular using a similar setup which may be a useful addon to this article. [0] http://mbell697.github.io/2014/02/04/yeoman-angular-rails-html5mode/ http://mbell697.github.io/2014/02/04/yeoman-angular-rails-ht...
- jasonswett 12y ago
  Thanks! I'll check it out.
weatherlight 12y ago
Why RAILS::API instead of something like rabl?
- jasonswett 12y ago
  Hmm. Unless I'm crazy, RABL is a totally different thing for a different purpose. RABL is a tool (as is the analogous JBuilder, the default JSON-rendering-thingy for full-blown Rails) whereas Rails::API is a framework.
- mbell 12y ago
  Rails-api is a gem that configures rails in a more lean and mean fashion for API usage, it doesn't handle the json serialization. Mostly rails-api disables a lot of default rails features/middlewares that aren't needed when you're only building an API. For json serialization you may want to look at Active Model Serializers[0], I found it much easier to work with than rabl, and it's also written by the rails-api group. [0] https://github.com/rails-api/active_model_serializers https://github.com/rails-api/active_model_serializers
  - steveklabnik 12y ago
    AMS maintainer here, I'm making a big announcement about it soon. That said, you're correct, AMS <-> RABL is the right comparison, not Rails-API <-> RABL.
    - JustinAiken 12y ago
      Where is this AMS announcement going to be? I'd like to watch, since I use AMS extensively (thanks for the great project!)
      - steveklabnik 12y ago
        It'll be on the rails-api-core mailing list: https://groups.google.com/forum/#!forum/rails-api-core https://groups.google.com/forum/#!forum/rails-api-core
jesalg 12y ago
Nice work! I've put up a similar (but much simpler) demo and blog post: https://github.com/jesalg/RADD https://github.com/jesalg/RADD
- jasonswett 12y ago
  Nice. I think your Angular/Devise work will probably end up being helpful for me.
kclay 12y ago
Fyi promise unraveling has been deprecated after Angular 1.2. So it should be Group.query().then(function(groups){ $scope.groups = groups; })
- donmack 12y ago
  Do you have a link to any discussion on that? It looks like the docs still suggest the method used in the blog post: https://docs.angularjs.org/api/ngResource/service/$resource https://docs.angularjs.org/api/ngResource/service/$resource "It is important to realize that invoking a $resource object method immediately returns an empty reference [...] Once the data is returned from the server the existing reference is populated with the actual data. This is a useful trick since usually the resource is assigned to a model which is then rendered by the view. [...] This means that in most cases one never has to write a callback function for the action methods."
  - bronson 12y ago
    https://github.com/angular/angular.js/commit/fa6e411da26824a5bae55f37ce7dbb859653276d https://github.com/angular/angular.js/commit/fa6e411da26824a... https://github.com/angular/angular.js/commit/5dc35b527b3c99f6544b8cb52e93c6510d3ac577 https://github.com/angular/angular.js/commit/5dc35b527b3c99f... http://blog.angularjs.org/2013/12/angularjs-13-new-release-approaches.html http://blog.angularjs.org/2013/12/angularjs-13-new-release-a...
    - donmack 12y ago
      Thanks. Okay, that makes sense. The $resource usage described still works in version 1.2.19, with no promise unwrapping options set. I could be wrong, but I think it is because the $resource returns a reference to an empty object that has values copied into it when the call completes. The actual promise is a property named $promise on the returned object. Example: http://jsfiddle.net/92zmG/7/ http://jsfiddle.net/92zmG/7/
ewoutkleinsmann 12y ago
We (10KB) have built our own CMS combining Rails and AngularJS. Our main goal for our CMS was to turn every website made with it in a Single-Page Application, but at the same time maintain support for server-side rendering. We loved the combination of Rails and AngularJS, but we didn't like that we had to write a lot of stuff twice (ie. Rails routes & Angular routes, Rails controllers & Angular controllers). Therefore we have written quite some glue code to automatically generate AngularJS code from our Rails code. I have been wanting to make a full write-up of all our experience in combining Angular & Rails for a while now, but didn't get to it yet. I did write-up a quick and dirty way to automatically generate Angular Resources from you Rails controllers, though. (http://10kb.nl/blog/automatically-generate-angular-resources-for-your-rails-api http://10kb.nl/blog/automatically-generate-angular-resources...) And, if anyone has any questions about combining Rails & Angular feel free to shoot me an e-mail.
- jasonswett 12y ago
  That's an awesome idea. I'll definitely check your stuff out.
- martindale 12y ago
  I'm building something like this, but in node: https://github.com/martindale/maki https://github.com/martindale/maki
tcopeland 12y ago
I wrote up a guide to this along the lines of "here are things I didn't do when doing my first Rails / AngularJS app": http://thomasleecopeland.com/2014/03/12/doing-a-rails-angular-mvp.html http://thomasleecopeland.com/2014/03/12/doing-a-rails-angula...
lynndylanhurley 12y ago
I've been using a similar setup for some time now. The most significant obstacle for me was user authentication. For anyone else who needs to add auth support to Angular + Rails: https://github.com/lynndylanhurley/ng-token-auth https://github.com/lynndylanhurley/ng-token-auth https://github.com/lynndylanhurley/devise_token_auth https://github.com/lynndylanhurley/devise_token_auth
arxpoetica 12y ago
Is this an isomorphic set up? Or does the front end do ALL templating?
- jasonswett 12y ago
  No, not isomorphic.
klochner 12y ago
Why is grunt needed? Is it because he's using Rails::API? Most setups I've seen just let Rails serve the templates.
- devNoise 12y ago
  grunt is the build tool for the Angular.js side of things. It is doing a lot of other html front end stuff to make the SPA. Also grunt has a watch process that see code changes, it will then compile them and have the server get the browser to reload content to get the new version. When this gets deployed to your production server, you will probably use the same server process that handles the Rails requests. grunt is for development only.

109 points by jasonswett 12y ago

ch4s3 12y ago

This is a pretty good tutorial, that seems to be poorly covered in the body of recent(ish) blogs.

jasonswett 12y ago
Thanks!

davedx 12y ago

Nice writeup. I tried to do the same thing a few months back and gave up. How did you handle getting your browser to talk to a server running on a different port? (Cross-origin requests). I have to say though, Rails used to be known for "convention over configuration", but when I've tried to use it lately I've found it becomes almost as complicated as configuring enterprise Java projects.

jasonswett 12y ago
I didn't have to do anything special to allow CORS, and now that I think of it I'm not sure why, because it's been necessary on other SPA projects I've been involved with. Maybe because both servers are localhost. That would be a good thing for me to figure out and include in the post. I'm kind of learning all this in public.
- deleted 12y ago
  [deleted]
tragic 12y ago
> How did you handle getting your browser to talk to a server running on a different port? (Cross-origin requests) Having run such things on entirely different servers, never mind localhost ports, what I needed to do was set the Access-Control-Allow-Origin http header in the rails controller (same principle applies to other frameworks). One simple guide is here: http://madhukaudantha.blogspot.co.uk/2011/05/access-control-allow-origin-in-rails.html http://madhukaudantha.blogspot.co.uk/2011/05/access-control-... Slightly ruined by that dreadful blogger interface, but there you go.
mbell 12y ago
> How did you handle getting your browser to talk to a server running on a different port? (Cross-origin requests). He's using grunt-connect-proxy to proxy the API requests through the grunt server so there are no CORS requests in this setup.
patrickread 12y ago
> How did you handle getting your browser to talk to a server running on a different port? (Cross-origin requests). https://github.com/cyu/rack-cors https://github.com/cyu/rack-cors I used that gem recently, and it fixed my issue. Just added the dev, prod hostnames explicitly in the origins list in my application.rb.
cmpb 12y ago
You could just run the api on /api via an nginx proxy, that way it uses the same domain. I.e. catch all the traffic coming in to /api and route it to the proxy for you rails app.
miles_matthias 12y ago
I wrote about using Rails + AngularJS in a CORS way -- http://dojo4.com/blog/angularjs-service-rails-api http://dojo4.com/blog/angularjs-service-rails-api Hopefully it helps you!
aantix 12y ago
>I have to say though, Rails used to be known for "convention over configuration", but when I've tried to use it lately >I've found it becomes almost as complicated as configuring enterprise Java projects. Do you have any specific examples of where you were having troubles?

mbell 12y ago

Great write up! I wrote a bit[0] awhile back about setting html5mode routing with rails and angular using a similar setup which may be a useful addon to this article. [0] http://mbell697.github.io/2014/02/04/yeoman-angular-rails-html5mode/ http://mbell697.github.io/2014/02/04/yeoman-angular-rails-ht...

jasonswett 12y ago
Thanks! I'll check it out.

weatherlight 12y ago

Why RAILS::API instead of something like rabl?

jasonswett 12y ago
Hmm. Unless I'm crazy, RABL is a totally different thing for a different purpose. RABL is a tool (as is the analogous JBuilder, the default JSON-rendering-thingy for full-blown Rails) whereas Rails::API is a framework.
mbell 12y ago
Rails-api is a gem that configures rails in a more lean and mean fashion for API usage, it doesn't handle the json serialization. Mostly rails-api disables a lot of default rails features/middlewares that aren't needed when you're only building an API. For json serialization you may want to look at Active Model Serializers[0], I found it much easier to work with than rabl, and it's also written by the rails-api group. [0] https://github.com/rails-api/active_model_serializers https://github.com/rails-api/active_model_serializers
- steveklabnik 12y ago
  AMS maintainer here, I'm making a big announcement about it soon. That said, you're correct, AMS <-> RABL is the right comparison, not Rails-API <-> RABL.
  - JustinAiken 12y ago
    Where is this AMS announcement going to be? I'd like to watch, since I use AMS extensively (thanks for the great project!)
    - steveklabnik 12y ago
      It'll be on the rails-api-core mailing list: https://groups.google.com/forum/#!forum/rails-api-core https://groups.google.com/forum/#!forum/rails-api-core

jesalg 12y ago

Nice work! I've put up a similar (but much simpler) demo and blog post: https://github.com/jesalg/RADD https://github.com/jesalg/RADD

jasonswett 12y ago
Nice. I think your Angular/Devise work will probably end up being helpful for me.

kclay 12y ago

Fyi promise unraveling has been deprecated after Angular 1.2. So it should be Group.query().then(function(groups){ $scope.groups = groups; })

donmack 12y ago
Do you have a link to any discussion on that? It looks like the docs still suggest the method used in the blog post: https://docs.angularjs.org/api/ngResource/service/$resource https://docs.angularjs.org/api/ngResource/service/$resource "It is important to realize that invoking a $resource object method immediately returns an empty reference [...] Once the data is returned from the server the existing reference is populated with the actual data. This is a useful trick since usually the resource is assigned to a model which is then rendered by the view. [...] This means that in most cases one never has to write a callback function for the action methods."
- bronson 12y ago
  https://github.com/angular/angular.js/commit/fa6e411da26824a5bae55f37ce7dbb859653276d https://github.com/angular/angular.js/commit/fa6e411da26824a... https://github.com/angular/angular.js/commit/5dc35b527b3c99f6544b8cb52e93c6510d3ac577 https://github.com/angular/angular.js/commit/5dc35b527b3c99f... http://blog.angularjs.org/2013/12/angularjs-13-new-release-approaches.html http://blog.angularjs.org/2013/12/angularjs-13-new-release-a...
  - donmack 12y ago
    Thanks. Okay, that makes sense. The $resource usage described still works in version 1.2.19, with no promise unwrapping options set. I could be wrong, but I think it is because the $resource returns a reference to an empty object that has values copied into it when the call completes. The actual promise is a property named $promise on the returned object. Example: http://jsfiddle.net/92zmG/7/ http://jsfiddle.net/92zmG/7/

ewoutkleinsmann 12y ago

We (10KB) have built our own CMS combining Rails and AngularJS. Our main goal for our CMS was to turn every website made with it in a Single-Page Application, but at the same time maintain support for server-side rendering. We loved the combination of Rails and AngularJS, but we didn't like that we had to write a lot of stuff twice (ie. Rails routes & Angular routes, Rails controllers & Angular controllers). Therefore we have written quite some glue code to automatically generate AngularJS code from our Rails code. I have been wanting to make a full write-up of all our experience in combining Angular & Rails for a while now, but didn't get to it yet. I did write-up a quick and dirty way to automatically generate Angular Resources from you Rails controllers, though. (http://10kb.nl/blog/automatically-generate-angular-resources-for-your-rails-api http://10kb.nl/blog/automatically-generate-angular-resources...) And, if anyone has any questions about combining Rails & Angular feel free to shoot me an e-mail.

jasonswett 12y ago
That's an awesome idea. I'll definitely check your stuff out.
martindale 12y ago
I'm building something like this, but in node: https://github.com/martindale/maki https://github.com/martindale/maki

tcopeland 12y ago

I wrote up a guide to this along the lines of "here are things I didn't do when doing my first Rails / AngularJS app": http://thomasleecopeland.com/2014/03/12/doing-a-rails-angular-mvp.html http://thomasleecopeland.com/2014/03/12/doing-a-rails-angula...

lynndylanhurley 12y ago

I've been using a similar setup for some time now. The most significant obstacle for me was user authentication. For anyone else who needs to add auth support to Angular + Rails: https://github.com/lynndylanhurley/ng-token-auth https://github.com/lynndylanhurley/ng-token-auth https://github.com/lynndylanhurley/devise_token_auth https://github.com/lynndylanhurley/devise_token_auth

arxpoetica 12y ago

Is this an isomorphic set up? Or does the front end do ALL templating?

jasonswett 12y ago
No, not isomorphic.

klochner 12y ago

Why is grunt needed? Is it because he's using Rails::API? Most setups I've seen just let Rails serve the templates.

devNoise 12y ago
grunt is the build tool for the Angular.js side of things. It is doing a lot of other html front end stuff to make the SPA. Also grunt has a watch process that see code changes, it will then compile them and have the server get the browser to reload content to get the new version. When this gets deployed to your production server, you will probably use the same server process that handles the Rails requests. grunt is for development only.