0

I'm working on a project where we decided to use Angular and Rails for front-end and back-end. I know Angular and the back-end guys know Rails, we don't want to mix this together. There are a lot of tutorials like this on how to set up this as a single page app, I don't want this.

  • Is it possible to create an API with rails that I can just call with Angular? If so, is there any tutorials on how to do this?
  • Wha'ts the benefits of creating a single page app and mixing Angular with Rails? From my front-end perspective this just seems confusing.

2 Answers 2

1

Actually I'm currently working on a project that uses both angular and rails. The following things are what I did and may help you.

Separate the front end and the back end into 2 projects

For the back end I use of course Rails.
For the front end, I use Middleman since I am a ruby guy :P
Another reason for choosing middleman is that it has environments just like rails.
But you or your team can also choose bower or browserify or whatever that generates STATIC assests.

P.S. I tried RequireJS but decided not to use it because of its complicated boilerplate code.

Use Active Model Serializers for JSON responses.

Both the back end and the front end speak JSON (except for file uploading and downloading), so this is an obvious choice.

Note that Rails application should not send redirects, nor should it render HTML.

For the front end, ngResource is, well, not bad for consuming JSON responses, but sometimes you need to wrap it in your own services (I made my own resources factory based on $resource)

Use Devise Token Auth to provide OAuth2 authentication (Optional)

Of course you can use traditional cookie based authentication.

If you decides providing OAuth2, then ng-token-auth is a default consumer for Devise token auth. Note that ng-token-auth does not work so well with angular-file-upload.

Use Rack CORS for CORS (Optional)

Since the front end and the back end are 2 separated projects, they can also be deployed to different domains. In this case, implementing cross-origin resource sharing (CORS) is a must. Rack CORS can help you with CORS, but you can also implement it on the reverse proxy / load balancer layer and choose not to use Rack CORS.

Sign up to request clarification or add additional context in comments.

Comments

1
  • I recommend to take a look at grape - https://github.com/ruby-grape/grape. It's a good way to create RESTfull APIs. It is really powerful, can generate swagger dynamic docs. Has a lot of useful addons - http://www.ruby-grape.org/projects/
  • I think the main benefit of hosting angular app in RoR is asset pipeline. It compiles/concatenates your assets automatically out of the box and you dont need to think about builds and gulp/grunt tasks. I developed a few apps that way.

Things that probably could help you with frontend part:

2 Comments

Thanks. Since you things related to rails that can help me on the front-end part. Is there any way the rails API can spit out some JSON that I can just go and collect with angular without having to know about gems and other rails stuff?
It depend on how RoR API would be developed =) It definitely should be RESTfull JSON API. I just pointed out how it could be done better. But if you are not planning to host your frontend inside RoR app all other things doesn't matter. You can use gulp or webpack to compile and compress your frontend.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.