How do I embed an Ionic webapp? I am building a partially decoupled Drupal 8 site.  Drupal hosts all the content, but I also built mobile apps and a webapp in Ionic.  The mobile apps are working fine, and now I want to host the webapp on my Drupal site.
I want my Ionic app to take over all the paths from /webapp/*, and these should all redirect to Ionic's index.html and then be passed the relevant argument from the URL.
Before I made the Ionic app, I had a React app, which I embedded into Drupal as follows.
This is the code I am using.
MY_MODULE/src/Controller/PageController.php
  public function reactApp() {
    return [
      '#markup' =&gt; '&lt;div id=&quot;my-react-app&quot;&gt;&lt;/div&gt;',
      '#attached' =&gt; [
        'library' =&gt; [
          'MY_THEME/react_app',
        ],
      ],
    ];
  }

MY_MODULE/MY_MODULE.routing.yml
MY_MODULE.myreactapp:
  path: '/webapp/{react_route}'
  defaults:
    _controller: '\Drupal\MY_MODULE\Controller\PageController::reactApp'
    _title: 'React App'
  react_route: ''
  requirements:
    _permission: 'access content'

MY_THEME.libraries.yml
react_app:
  version: VERSION
  js:
    js/dist/main.min.js: {minified: true}

This worked great for embedding a simple react app and giving it all the routes at /webapp/*.
However, a webapp built in Ionic generates an index.html that looks like this.
&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot;/&gt;
  &lt;title&gt;Ionic App&lt;/title&gt;
  &lt;base href=&quot;/&quot;/&gt;
  &lt;meta name=&quot;color-scheme&quot; content=&quot;light dark&quot;/&gt;
  &lt;meta name=&quot;viewport&quot;
        content=&quot;viewport-fit=cover,width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no&quot;/&gt;
  &lt;meta name=&quot;format-detection&quot; content=&quot;telephone=no&quot;/&gt;
  &lt;meta name=&quot;msapplication-tap-highlight&quot; content=&quot;no&quot;/&gt;
  &lt;link rel=&quot;manifest&quot; href=&quot;/manifest.json&quot;/&gt;
  &lt;link rel=&quot;shortcut icon&quot; type=&quot;image/png&quot; href=&quot;/assets/icon/favicon.png&quot;/&gt;
  &lt;meta name=&quot;apple-mobile-web-app-capable&quot; content=&quot;yes&quot;/&gt;
  &lt;meta name=&quot;apple-mobile-web-app-title&quot; content=&quot;Ionic App&quot;/&gt;
  &lt;meta name=&quot;apple-mobile-web-app-status-bar-style&quot; content=&quot;black&quot;/&gt;
  &lt;link href=&quot;/static/css/4.21302a68.chunk.css&quot; rel=&quot;stylesheet&quot;&gt;
  &lt;link href=&quot;/static/css/main.1d86f075.chunk.css&quot; rel=&quot;stylesheet&quot;&gt;
&lt;/head&gt;
&lt;body class=&quot;has-navbar-fixed-top&quot;&gt;
&lt;div id=&quot;root&quot;&gt;&lt;/div&gt;
&lt;script src=&quot;/static/js/runtime-main.48098029.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;/static/js/4.54463739.chunk.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;/static/js/main.3b08ecfa.chunk.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

What I want to do

Put all the ionic build assets in a subdirectory (/webapp) inside my Drupal site (done).
Tell Drupal to redirect all requests to (/webapp) to Ionic's index.html. (how do I do this?)

I thought of using a theme hook, but I don't know how to add all the scripts and css in Ionic's index.html to the twig template.
If possible, I don't want to hard-code the Ionic script assets inside Drupal because the names will change every time the app is built, which will be often.
The problem probably is you have two .htaccess files rewriting URLs to index.php (Drupal) or index.html (Ionic). I think you need to adjust Drupal's rewrite rule because it is in the top level:
  # Pass all requests not referring directly to files in the filesystem to
  # index.php.
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_URI} !=/favicon.ico
  RewriteRule ^ index.php [L]

For example by adding this condition:
RewriteCond %{REQUEST_URI} !^/webapp