In this guide we will cover how to connect Ember to a Ruby on Rails backend by building a simple form that will save in our database. This guide assumes you already have Ember installed as well as Rails.
$ ember -v
ember-cli: 3.12.1
node: 12.13.0
os: linux x64
$ ruby -v
ruby 2.6.1p33 (2019-01-30 revision 66950) [x86_64-linux]
$ rails -v
Rails 6.0.2.1
Rails
First let’s create our rails project. In your terminal cd into your code or project directory and run this command to create a new api rails project:
rails new ember-form-api --api --database=postgresql
Now cd into ember-form-api and add the jsonapi-resources gem to the bottom of the Gemfile:
gem 'jsonapi-resources'
and then run
bundle install
Update the app/controllers/application_controller.rb file
class ApplicationController < ActionController::API
include JSONAPI::ActsAsResourceController
end
Then create our first (and only) model
rails g model beverage name:string
and create and migrate the db:
bundle exec rake db:create
bundle exec rake db:migrate
Create a beverage controller and resource
rails g controller beverages
rails g jsonapi:resource beverage
Edit the resource:
class BeverageResource < JSONAPI::Resource
attributes :name
end
Create a route for the new resource:
#config/routes.rb
Rails.application.routes.draw do
jsonapi_resources :beverages
end
Now start the rails server
bundle exec rails s
and in a new terminal you can use curl to verify that things are working
curl -X POST -i http://localhost:3000/beverages \
-H "Accept: application/vnd.api+json" \
-H "Content-Type:application/vnd.api+json" \
-d '{"data": {"type":"beverages", "attributes":{"name":"Vanilla Coke Zero"}}}'
HTTP/1.1 201 Created
You can also check the database to see that our favorite beverages are in fact saved:
psql ember_form_api_development
psql (10.10 (Ubuntu 10.10-1.pgdg18.04+1))
Type "help" for help.
ember_form_api_development=# select * from beverages;
id | name | created_at | updated_at
----+-------------------+----------------------------+----------------------------
1 | Vanilla Coke Zero | 2019-12-29 14:23:22.915447 | 2019-12-29 14:23:22.915447
2 | Hot Chocolate | 2019-12-29 14:26:11.741619 | 2019-12-29 14:26:11.741619
(2 rows)
Ember 3.12.1
Open a new terminal to your code directory and create a new ember app:
ember new ember-form
cd into the ember-form directory and run the following command to create our beverage model:
ember g model beverage name:string
Edit the app/templates/application.hbs file so that it no longer has the welcome template:
<h2>What is your favorite beverage?</h2>
{{input value=name}}
<button {{action "save"}}>Submit</button>
{{#if savedMessage}}
<div>{{savedMessage}}</div>
{{/if}}
{{#each errors as |error|}}
<span>{{error.message}}</span>
{{/each}}
Now let’s create an application.js controller and add the save() action:
//app/controller/application.js
import Controller from '@ember/controller';
export default Controller.extend({
actions: {
save() {
this.set('savedMessage', null);
this.set('errors', null);
const beverage = this.store.createRecord('beverage', { name: this.name });
beverage.save()
.then(() => {
this.set('savedMessage', 'saved!');
this.set('name', '');
})
.catch(() => {
this.set('errors', beverage.get('errors'));
});
}
}
});
Now start your ember server with:
ember server --proxy http://localhost:3000
and try out your new form!
