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 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.


Potential architectures

For testing/deploying in browsers there are considerations to bear in mind, most notably the dreaded CORS! Because our app will be authenticating with the Drupal backend to login, create content etc, we need an effective way to do so. There are a couple of different options D8 gives you out-of-the-box, Basic Authentication (basically passing the username & password with each request) or session cookies. As I feel it would be bad UX or insecure to either expect the user to enter their login credentials for each request or store their credentials locally, i've opted for cookie based authentication.

The next question is 'where to host the app code?'. There are 2 options, the app code can reside within the Drupal root directory, or anywhere else outside the root

Within the Drupal root:

drupal root/
├── core/
├── modules
├── sites
├── themes
├── modules
├── app
│   ├── hooks
│   ├── platforms
│   ├── www
│       └──  index.html
...

App address: http://mysite.local/app/www/index.html

 

Advantages: No cross domain issues (CORS) as the app sits within the host domain.

Disadvantage: Restricted on where you can deploy your app code.


Outside the Drupal root:

App

├── app
│   ├── hooks
│   ├── platforms
│   ├── www
│       └──  index.html
...

Drupal root

drupal root/
├── core
├── modules
├── sites
├── themes
...

App address: http://app.mysite.local

Trust me, it’s a far tricker setup getting the web-app to work outside the host Drupal root so we will document that process as we are feeling particularly masochistic. We will download and install the app code in a later step, but prepare for it now.

You will need a server redirect to point the http://app.mysite.local address to the ip:port that cordova/ionic will serve from. Using nginx:

 

server {
  listen 80;
  server_name app.mysite.local;
  access_log /var/log/nginx/app.log;
  location / {
    proxy_pass http://127.0.0.1:8000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
  }
}

As we haven't actually setup the app code yet, we will test the above in a later step.

Want to work with us?

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?

info@citywebconsultants.co.uk

 

Or give us a call?

+44 (0) 191 906 7746

 

Playing hard to get? We'll contact you