Ember client - OurDigitalWorld/supplejack-ember GitHub Wiki

Creating a Supplejack Client in Ember.js

For this project, we decided to create a client application for our Supplejack Docker instance using Ember.js, which is an opinionated MVC platform built on Node.js. We chose this framework because it’s architecturally similar to Rails, which is the framework Supplejack’s API is constructed in, but because Ember.js uses JavaScript instead of Ruby, it’s better suited to front-end environments, which need to operate in JavaScript to begin with. Finally, the convention-over-configuration paradigm adopted by Ember.js (similar to that of Rails), tends to lead to more sustainable development practices.

Step 1: Installing dependencies

Ember.js depends on Node.js and npm. To install these, in the terminal:

$ sudo apt-get install python-software-properties
$ curl -sL https://deb.nodesource.com/setup_7.x | sudo -E bash -
$ sudo apt-get install nodejs

Step 2: Install Ember.js

Once npm is installed, you can install Ember.js and Bower easily from the terminal:

$ sudo npm install -g ember-cli
$ sudo npm install -g bower

Step 3: Create Ember.js client

In this case, you can clone the client from GitHub:

$ cd /home/[username]/Documents/supplejack
$ git clone https://github.com/OurDigitalWorld/supplejack-ember
$ cd supplejack-client
$ npm install
$ bower install
$ ember server

At this point, you will have an Ember.js client running at http://localhost:4200. However, at this point, the client won’t be able to communicate with the Supplejack API, because the Supplejack API needs to be configured to receive cross-origin requests from Ember.js.

Step 4: Configuring Supplejack Docker with a Cross-Origin Resource Sharing (CORS) Mechanism.

To configure Supplejack Docker with a CORS mechanism, we’ll utilize the rack-cors gem. To install this, edit the following files:

In /supplejack_docker/api/Gemfile, add the following line of code: gem 'rack-cors', require: 'rack/cors'

In /supplejack_docker/api/config/environments/development.rb, add the following code just before the end at the bottom of the file.

config.middleware.insert_before 0, "Rack::Cors" do
  allow do
    origins 'localhost:4200', '127.0.0.1:4200'
    resource '*', :headers => :any, :methods => [:get, :post, :options]
  end
end

After editing these two files, start up Supplejack, if you have not already done so, and then in a new terminal window, enter the following:

$ eval $(docker-machine env supplejack-docker)
$ docker-compose stop api
$ docker-compose build api
$ docker-compose up api

At this point, Supplejack will be able to approve XMLHttpRequests (XHR) sent by the Ember.js client, allowing Supplejack and the client to communicate!

Step 5: Configuring Ember.js to communicate with Supplejack

Ember.js uses a utility called Ember Data to communicate with APIs through XHR requests. Configuring Ember.js to communicate with Supplejack will involve working with two specific files--an adapter to find the Supplejack API, and a serializer to interpret requests and responses sent to and from the API.

If you’re using the pre-built Ember.js client downloaded from GitHub, all you need to do to ensure that you can communicate successfully with Supplejack is to ensure that Ember’s adapter is pointing to the correct host. First, determine the IP at which your Supplejack instance is being hosted at. To do this, make sure your supplejack server is running, and then open a new terminal window (CTRL + SHIFT + T), then enter the following:

$ eval $(docker-machine env supplejack-docker)
$ echo $DOCKER_HOST

The console should return something like: tcp://192.168.99.100:2376

Make a note of the IP address returned. In this example, the IP address returned was 192.168.99.100.

Next, in the file manager, go to your work directory, and open supplejack-client/app/adapters/application.js import DS from 'ember-data';

export default DS.RESTAdapter.extend({
  host: 'http://192.168.99.100:3000',
  });

Ensure that the host IP address matches the IP address you made note of previously. However, the protocol will be http instead of tcp, and the port will be 3000. Now you should have an operational client!

Step 6: Matching your Ember model to your Supplejack schema

The final step of creating a working client is to ensure that your Ember Data model matches the schema that Supplejack will be serving.

WORK IN PROGRESS