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 https://github.com/acquia/ember-drupal-waterwheel-appthis repository
Drupal Site Configuration
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
Generate encryption keys for OAuth:
openssl genrsa -out private.key 2048
openssl rsa -in private.key -pubout > public.key
On your Drupal site, browse to
/admin/config/people/simple_oauthand enter the full paths to both encryption keys in the Simple OAuth Settings.
/admin/config/people/simple_oauth/oauth2_client/addto 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.jsat the location marked with a @todo. Also fill in the Drupal site's URL in that same file.
CORS needs to be enabled on the Drupal site. Place/modify the following lines at the bottom of your
sites/default/services.ymlfile (adjust path as needed for a Drupal multisite install):
cors.config: 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
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', 'yourbackendsite.com']
Running / Development
You can run the application using the Ember CLI:
- Visit your app at http://localhost:4200.
or using Fastboot (server-side rendering):
ember fastboot --serve-assets
- Visit your app at http://localhost:3000.
ember test --server
ember build --environment production(production)