0

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.

0

1 Answer 1

5

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]
        ]
      ],
    ]
  ];
}
2
  • You will probably want your application to take over the whole page instead of being restricted to the content section of the page. This could be done with a hook_page_alter() implementation (to remove element). If you have lots of block, you may want to also implement hook_block_list_alter() to avoid rendering them. Oct 8, 2016 at 15:09
  • I have managed to setup an spa, my question now is how to handle the application routing internally as well as with the browser's address bar. Do you have any hints as a guide line on this? thanks
    – tbo
    Oct 25, 2016 at 11:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.