Create Drupal 8 one off page that overrides html.html.twig? - php

Question

I have a client with a Drupal 8 running site. They want to one URL of the site to render very different from the rest of the site. I have created a module. I need just a single route to override html.html.twig. I want to strip out the majority of the stuff the site theme is loading. I am sort of able to get it to work but it seems to apply to every page which effectively breaks the site. This url /site/mynewapp would use completely different layout and html from the rest of the hundreds of other pages. Basically this is a static site within an existing Drupal 8 instance. How do I conditionally load a custom html.html.twig, page.html.twig, and node.html.twig only when /site/mynewapp is requested? This is a ReactJS app basically that should only run on a single page of the site. I realize this isn't the ideal architecture. I have asked the client to run the app separately on nodejs but they insist it must be within their existing Drupal instance. The React app looks nothing like the rest of site. Does anyone have experience doing something like this. I have custommodule.routing.yml with the route defined and a controller method that bolts on the javascript lib. This works but it seems to load on every page which can't happen.
public function overview()
{
$build = [];
$build['#attached']['library'][] = 'mymodule/mylibrary';
$build['#markup'] = '<div id="root"></div>';
return $build;
}
and in the module file
function mymodule_theme_registry_alter(&$theme_registry)
{
$theme_registry['html']['path'] = drupal_get_path('module',
'mymodule') . '/templates';
}
this is loads the html.html.twig for every page in the site essentially breaking it.
Any suggestions here?

Answer 1

You don't need a module to override the twig template.
You just create the files in your theme folder with the right name and you are ready to go.
To override html.html.twig you have to create something like html--mynewapp.html.twig
To override page.html.twig you have to create something like page--mynewapp.html.twig
To override node.html.twig you have to create something like node--mynewapp.html.twig
You clear the cache and the new template will load when you visit these pages.

Answer 2

The react mount node module will embed an empty div to mount your React page within your Drupal site in the content region.
If you truly want a completely separate React app inside of Drupal, you can just build it in a subfolder of your site. Like /myapp and put the whole build in there.