Here is how to get started with adding ember-cli-rails to your rails app.
We are going to assuming you have a rails app like this one. It’s just a base rails app with one model, Post, that has title and body fields.
Install ember-cli-rails and ams
Add these lines to your Gemfile and run bundle install.
First generate new ember app inside of the directory your rails application lives in. We’re going to call ours “frontend”
Next we need to run this command:
This will create the initializer file for ember-cli-rails
Add the line to your rails routes file…
Visit “/” and now ember is rendering!
Setting up the ember routes
Now we can set up the routing on the ember side of the app.
You can create the model, route and template in ember by using
ember g resource as follows.
I made the path for the posts route “/”, just for convenience.
Add the model hook to the post route to hit the rails app for the json data.
By default ember uses and expects the server to return json formatted according to the JSONAPI spec.
JSONAPI uses kebab-case (dash-case) instead of snake_case. Rails doesn’t expect json to be formatted this way, so we can use the active-model-adapter ember addon to transform our json payloads.
Create this initializer to have Active Model Serializers render json in JSONAPI format.
Install the addon.
Create this adapter.
We need to create a serializer for to tell Active Model Serializers what json to render for Posts.
body attributes to the serializer.
Make the index action for the PostsController in rails look like this:
Visit localhost:3000, you won’t see anything on the page but if you use the Ember Inspector you can see that the data has loaded.
You can fill out the posts.hbs template to view the data.
Create form to save new posts
Lets create a form to save the posts now.
We can create a component to keep the form actions and template in.
Add to the posts.hbs template to render it.
We haven’t added anything to the post-form template yet, so let’s add the input elements and submit button.
When the user clicks the save button the save action will be called in the post-form component. We still have to write that action so let’s do that now. We inject the store as a service to access ember data’s store.
post.save() is when our rails app will be hit with a POST with the payload.
Right now the payload looks like this.
If you’ve worked with rails before you know that rails controllers expect something that looks more like this:
First of all, rails does not understand the
application/vnd.api+json mime type
out of the box. If you try to debug the controller and inspect the parameters
you’ll just see an empty hash. We we should add this code to
We can change our
post_params method in our posts controller to parse the
JSONAPI formatted parameters correctly.
only option for
jsonapi_parse works similar to the whitelist in rails’
strong parameters, disallowing any parameters that are not explicitly listed to
Now the form should be working correctly.
Build failing with warnings
Ember cli rails seems to treats warnings as errors sometimes, halting the process and your app won’t be served. You can try to fix the warnings to make the build finish properly.
Build completes successfully, but rails server is hanging
Check if the file frontend/tmp/build.lock exists. It might be leftover from a previous build and was not deleted for whatever reason, so you might try deleting it to see if that brings the app back to life.