Skip to main content

In this series of tutorials, we will go through the process of creating a cross-platform mobile app using a headless Drupal 8 backend with a REST API. The app will have native UI and navigation, ie, on iOS it will look and feel like a native iOS app, same for android. Various steps use *nix or OSX command-line instructions.

Enable the necessary modules: views, views_ui, jdrupal, restui, restful webservices, serialization.

drush en jdrupal -y; drush en restui -y;

The dependencies will be installed along with the above.

To configure REST, go to /admin/config/services/rest and ensure the appropriate endpoints are configured as such:

Screenshot of rest configurations


We will be authenticating our app via cookies.

Configure user permissions:

Screenshot of user permissions

In order for the backend and external frontend to be able to share cookies which sit on different sub-domains, we need to tell Drupal it's ok to do so.

Update sites/default/settings.php:

$settings['trusted_host_patterns'] = array(

*Important note: Base domain needs at least 1 dot '.' in the domain name or cookies will not work, i found out the hard way!

Update sites/default/services.yml:

cp sites/default/ sites/default/services.yml


cookie_domain: '.mysite.local' 

Update Frontpage view:

Our app will contain a simple page listing all published nodes, similar to the default Drupal homepge.

Go to: /admin/structure/views/view/frontpage

Add ‘REST export’ display, give it the path ‘front’. Save.

Add headers to host site. 

The Drupal CORS module can be used to aid this, or add the following to services.yml:

    enabled: true
    # Specify allowed headers, like 'x-allowed-header'.
    allowedHeaders: ['Content-Type', 'X-CSRF-Token']
    # Specify allowed request methods, specify ['*'] to allow all possible ones.
    allowedMethods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS', 'PATCH']
    # 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

To allow cross-domain authentication, you must specify the domains that this site will send cookies to. Wildcards won't work.

For more information on this topic, to ask questions, or to find out how we might be able to help you.

Please feel free to email:



Want to join our team?

Copyright © City Web Consultants Ltd. 2017. All Rights Reserved
Company number: 27234161

Want to start something?

Fantastic! We'd love to hear from you, whethere it's a pitch, an idea or just saying hello!

Feel free to get in touch.


Drop us an email?


Or give us a call?

+44 (0) 191 691 1296


Playing hard to get? We'll contact you