Tengo la siguiente estructura dentro de mi proyecto ReactTS:

 .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

En mis requisitos, necesito cargar esta aplicación externa (todos los archivos estáticos) dentro de un iframe (o similares) ubicado en App.tsx . Esto se debe al hecho de que necesito procesar algunas sustituciones de accesorios dentro external/dashboard-app/index.html que se inyectan dinámicamente desde index.tsx .

Mi idea era aprovechar los cargadores de paquetes web para require.context la aplicación externa y luego, de alguna manera, inyectar el contenido directamente dentro del 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, /.*/));

¿Es esto factible o hay mejores formas/enfoques?