I have the following structure inside my ReactTS project:

.src
├── App.tsx
├── external
│   ├── dashboard-app
│   │   ├── images
│   │   │   ├── avatars
│   │   │   │   └── user01.svg
│   │   │   ├── bgLogin.jpg
│   │   │   ├── icons
│   │   │   │   ├── bars-solid.svg
│   │   │   │   └── vue-logo.svg
│   │   │   └── logo.svg
│   │   ├── index.html
│   │   ├── index.js
│   │   ├── login.html
│   │   ├── main.css
│   │   ├── training.html
│   │   └── trainings.html
└── index.tsx

In my requirements, I need to load this external-app (all static files) inside an iframe (or similiars) located in App.tsx. This is due to the fact that I need to process some props substitutions inside external/dashboard-app/index.html that are dynamically injected from index.tsx.

My idea was to leverage webpack loaders to require.context the external app and then in some way inject the content directly inside the iframe.

const loadAll = (ctx: __WebpackModuleApi.RequireContext) => {
  let keys = ctx.keys();
  let filesContent = keys.map(ctx);
  return keys.reduce((o: Record<string, any>, path, i) => {
    o[path] = filesContent[i];
    return o;
  }, {});
};
var allFiles = loadAll(require.context("./external/dashboard-app/", true, /.*/));

Is this feasible or are there better ways/approaches?