Skip to content
A fully decoupled editorial interface for Drupal 8 powered by Ember and JSON API -- [Created 2016-12-02 by prestonso aka via]
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Waterwheel Ecosystem

Ember-Drupal Waterwheel App

This is a sample app for demonstrating the integration of Ember and Drupal using JSON API. It demonstrates listing Article nodes, users, and taxonomy terms from the Drupal backend, in addition to editing, creating, and deleting Articles.

Fastboot is supported, for server-side rendering of the application.

Also check out our Ember addon at ember-drupal-waterwheel, which can help you easily add Drupal integration to a new or existing Ember app.


You will need the following things properly installed on your computer.


  • git clone this repository
  • cd ember-drupal-waterwheel-app
  • npm install
  • bower install

Drupal Site Configuration

  1. Your Drupal backend needs to have the JSON API and Simple OAuth contrib modules enabled. From your Drupal root, run:

    • composer require "drupal/jsonapi" "drupal/simple_oauth:~2.0" -o
    • drush en -y jsonapi simple_oauth
  2. Generate encryption keys for OAuth:

    • openssl genrsa -out private.key 2048
    • openssl rsa -in private.key -pubout > public.key
  3. On your Drupal site, browse to /admin/config/people/simple_oauth and enter the full paths to both encryption keys in the Simple OAuth Settings.

  4. Browse to /admin/config/people/simple_oauth/oauth2_client/add to create OAuth client settings for this app. For "Label", specify something like "Ember Waterwheel app". Leave all other settings at their defaults and click "Save". Copy the UUID from the list of OAuth clients and paste it into this application's config/environment.js at the location marked with a @todo. Also fill in the Drupal site's URL in that same file.

  5. CORS needs to be enabled on the Drupal site. Place/modify the following lines at the bottom of your sites/default/services.yml file (adjust path as needed for a Drupal multisite install):

  enabled: true
  # Specify allowed headers, like 'x-allowed-header'.
  allowedHeaders: ['Content-Type', 'Access-Control-Allow-Headers', 'Authorization']
  # Specify allowed request methods, specify ['*'] to allow all possible ones.
  allowedMethods: ['POST', 'GET', 'OPTIONS', 'PATCH', 'DELETE']
  # Configure requests allowed from specific origins.
  allowedOrigins: ['*']
  # Sets the Access-Control-Expose-Headers header.
  exposedHeaders: true
  # Sets the Access-Control-Max-Age header.
  maxAge: false
  # Sets the Access-Control-Allow-Credentials header.
  supportsCredentials: true

Ideally, the allowedOrigins setting should be changed to a list of permitted origins from which your app will be served, such as:

  allowedOrigins: ['localhost:4200', 'localhost:3000', '']

Running / Development

You can run the application using the Ember CLI:

or using Fastboot (server-side rendering):

Running Tests

  • ember test
  • ember test --server


  • ember build (development)
  • ember build --environment production (production)


Further Reading / Useful Links

You can’t perform that action at this time.