A simple Ember form that saves to a Rails backend

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!