Issues with Ember/Rails

Questions
1

Hey everyone! I’m new to Ember and I’ve enjoyed learning from the tutorial/guides from the main emberjs.com

However, when it comes to trying to connect Rails and Ember, I’ve never seemed to figure out the way how. I’ve tried several resources and to no avail.

I’m not sure if it could be due to the ember version, the syntax from the tutorials looked different from what the generators created.

I’m using Rails 6 and when I type ember -v I get these results:

ember-cli: 3.15.1 node: 10.13.0 os: darwin x64

Any tips would be greatly appreciated, and if you need more info - such as my code in both the Rails/Ember side - I’d be more than glad to share that

Thanks!

1 Like
2

I’m assuming you’re using Ember Data? If so usually the biggest problem getting front-end and back-end synced is with the adapter/serializer setup you’re using (on the Ember side). When you add an adapter and serializer to your project you most likely (I’m making another assumption here, that you’re using standard Rails serialization) want to use the active model adapter. This should ensure Ember Data accepts/builds the URLs and payloads that Rails expects.

3

Thanks for the reply Dan.

I was following this tutorial, and I did serialize the data as the author suggested.

However, when I went to my ember inspector to view my data tab - it was the only one I couldn’t click on, so that was another reason for this thread.

I’ll check out that adapter and hope to report my issue has been resolved

4

Still having issues so I decided to share my code to see if anyone could see what could be an issue. I tried to follow the documentation and couldn’t find an answer to why I can’t open my data tab in ember inspector

API https://github.com/evanmedrano/appointment-tracker-api

FRONT https://github.com/evanmedrano/appointment-tracker-front

Thanks again

5

Ah ok well that does look like you’re using JSON API, so maybe I made a bad assumption there. In that case you’d want to extend the JSON API adapter and serializer. Could you post some sample output from your API? And are you getting any console errors on the browser side of things?

6

I’m not too sure what may have happened, but I’m now having issues connecting to the rails server. I’m getting error messages galore

But as for any console errors at localhost:4200, I get none.

I wouldn’t mind trying out your assumption - so if I were to use the active model adapter - what would some other key components would be necessary?

Or is JSON API not a bad choice? I may have to restart from scratch to figure out how to connect the two.

7

I assumed Active Model because that’s usually the Rails default, but JSON API is probably preferable. It supports some really nice features depending on implementation, and requires less customization for Ember to work with it.

If you’re in local dev mode you’d want to proxy your ember app to your dev server if you’re not already e.g. ember s --proxy http://127.0.0.1:3000 which tells ember server to proxy all ajax requests to localhost:3000 so if your rails server was listening on port 3000 the requests would be properly routed.

Then debugging the frontend/backend interaction just means checking that the front-end makes the right requests in the “requests” console. Checking your rails output to make sure it receives the requests, and there are no errors, and then checking the javascript console to make sure there are no serialization errors on the ember side.

1 Like
8

Thanks for the help Dan!

I used the proxy tip as well as used jsonapi-resources on the back end with ember-data - and finally got them to render the data!

I have a long way to go before becoming comfortable with Ember, but I’m glad to get over this hurdle, thanks again

1 Like
9

Awesome! Glad you got it working. There’s a lot to learn but hopefully it gets a lot more fun now that you’ve got front to back communication down! And always feel free to post any questions here or in Discord :grin: