Skip to main content

Including a React.js entrypoint from a Drupal menu callback

Front-end Development
Back-end Development
Drupal

A quick hint for handling your entry point to a react app from within a Drupal module, particularly when using the react-hot-loader during development.  

Set up a drupal variable, initializing it in your settings.php.  You can then change this for your local environment so that a code change isn't required for every code push. Then include the appropriate react entry point based on this variable.

  $react_env = variable_get('react_environment', 'dist');
  
  if ($react_env == 'dev') {
    drupal_add_js('http://localhost:3000/webpack-dev-server.js', array('scope' => 'footer'));
    drupal_add_js('http://localhost:3000/bundle.js', array('scope' => 'footer'));
  } else {
    drupal_add_js(drupal_get_path('module', 'react_app').'/js/dist/bundle.js', array('scope' => 'footer'));  
  }