Help Needed: Integrating TerriaJS Maps into a ReactJS Application

[Anji-J]

I have an existing ReactJS web application with several pages and forms. I'm looking to integrate TerriaJS maps as a separate component on the landing screen. Additionally, I plan to have my own data catalog alongside some public data catalogs.
I’ve tried couple of approaches so far:
Approach 1: I installed TerriaJS from NPM and attempted to use the package in my React app, but I encountered compilation errors stating that "Terria modules not found."
Approach 2: I tried using the build files from the TerriaMap project in the wwwroot folder, placing them in my public folder and accessing them with script tags. However, this resulted in a blank screen with the following error:

Uncaught TypeError: Cannot read properties of null (reading 'appendChild')
    at createLoader (entry.js:45:1)
    at eval (entry.js:61:1)
    at ./entry.js (TerriaMap.js:257:1)
    at __webpack_require__ (TerriaMap.js:69:30)
    at TerriaMap.js:244:18
    at TerriaMap.js:247:10

Approach 3: I cloned the TerriaMap application, built it, and ran it successfully on my local machine. I experimented with different options and configurations—it's a beautiful application! For testing purposes, I’m trying to customize the map width to 80% of the screen size on the right side, allowing me to use the left 20% for my own content.

Now I’m stuck and totally confused about how to make this work to meet my requirements. I've searched extensively and gone through the developer guide, but I still have had no luck.
Could anyone please help me address my requirements ?
Thank you in advance.

[zoran995]

Hi, I think the easiest option is to run an instance of TerriaMap separately from your react app and integrate it using iframe (there is a documentation on iframe https://docs.terria.io/guide/deploying/controlling-in-an-iframe-or-popup/). I know that is not ideal but I am not aware of any other straightforward and documented option.
It should be a lot easier if/when #5854 lands