Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

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


A fully decoupled editorial interface for Drupal 8 powered by Ember and JSON API -- [Created 2016-12-02 by prestonso aka via]




No releases published


No packages published