Integration with Single Page Application (React)

Question

I have a specific scenario to integrate a single page application (react based) with Drupal (I use version 7) in order to achieve the following:

1. Utilize the CMS capabilities of drupal and provide static content some of it will be public some will be private to authorized users only.

2. Create a totally separate single page application with specific functionality, with react framework and will communicate with a different backend system. I want this app to expose it through drupal, as a page by selecting it from the menu. Only authorized users will be able to enter this section of the drupal app.

3. Being able to pass user details to my single page application, in order to use them to the communication with the backend (for authorization and other operations)

I'm fairly new to Drupal, as far as I understand I will need to develop a module and/or a theme to do that? Additionally, drupal and my application should have a common authentication mechanism,I use OAuth2 server which is provided as a separate instance from drupal and my single page application.

From my research I haven't found any concrete example/documentation on how to achieve this. What I have managed to achieve so far is to be able to utilize my OAuth2 server with the help of OAuth2 Authentication module.

My second part is now missing to integrate my single page application and pass some user details information to it.

Answer 1

To provide the page hosting the React SPA, you will need to implement a custom module. This module would also contains all the JavaScript code of your application. If that's the only usage of React in your site, I suggest bundling everything in the module to make it easier.

I assume you should be able to retrieve the user authentication token and any other needed info in Drupal. You can then pass it to your application using drupal_add_js() (or #attach in a render array). Your application can then retrieve it with Drupal.settings

/**
 * Implements hook_menu().
 */
function MODULE_menu() {
  return [
    'admin/APPLICATION/PATH' => [
      'title' => 'Awesome React Application',
      'page callback' => 'MODULE_application_page',
      'access arguments' => 'access administration pages'
    ]
  ];
}

/**
 * Page callback for the application page.
 *
 * @return The page as a render array with #attached JS and CSS code.
 */
function MODULE_application_page() {
  global $user;
  $app_data = clone $user;
  unset($app_data->pass);
  $app_data->token = MODULE_get_user_token();
  $base_assets_path = drupal_get_path('module', 'MODULE');
  return [
    '#type' => 'markup',
    '#markup' => '<div id="MODULE-app-container"></div>',
    '#attached' => [
      'css' => ["$base_assets_path/css/app.css" => ['preprocess' => FALSE]],
      'js' => [
        "$base_assets_path/js/app.js" => ['preprocess' => FALSE],
        [
          'type' => 'settings',
          'data' => ['MODULE' => $app_data]
        ]
      ],
    ]
  ];
}