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

I'm building something like this, but in node: https://github.com/martindale/maki

That's an awesome idea. I'll definitely check your stuff out.

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

Thanks! I'll check it out.

> 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

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.

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.

> 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-...

Slightly ruined by that dreadful blogger interface, but there you go.

I wrote about using Rails + AngularJS in a CORS way -- http://dojo4.com/blog/angularjs-service-rails-api

Hopefully it helps you!

>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?

> 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.

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.

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

"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."

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

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.

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.

Thanks!

No, not isomorphic.