topic Re: Embed Thingworx application in a Micro FrontEnd architecture in ThingWorx Developers

Embed Thingworx application in a Micro FrontEnd architecture

cbaurand — Thu, 30 May 2024 07:16:13 GMT

Hi all,

Sorry if my question is stupid but i don't know anything about Micro FrontEnd architecture and technology.
Do you know if it is possible to use Micro Frontend technologie to embed a thingworx application to avoid using IFrame?

Thanks for your help.

CB.

Re: Embed Thingworx application in a Micro FrontEnd architecture

VladimirN — Thu, 30 May 2024 10:52:34 GMT

From "Help Center":

"ThingWorx Deployment Architectures": https://support.ptc.com/help/thingworx/platform/r9.5/en/index.html#page/ThingWorx/Help/Installation/DeploymentArchitecture/thingworx_deployment_architectures.html
"ThingWorx Applications System Architecture Design": https://support.ptc.com/help/thingworx_applications_setup/r1.0/en/index.html#page/applications_setup/SitePrep_twx_app_System_Arch_Design.html

Re: Embed Thingworx application in a Micro FrontEnd architecture

cbaurand — Thu, 30 May 2024 12:17:06 GMT

Hi VladimirN;

I think it was not my question. I don't speak about platform architecture. it is more "web" architecture. Can we embed mashups in Micro FrontEnd as we can do with iFrame ?

The context is, we have an angular Dashboard using Micro Frontend technology that gives acces to several appliquations. One of them is a TWX application and the question is, could we embed this application with the Micro frontEnd technology instead of using IFrame technogy.

Re: Embed Thingworx application in a Micro FrontEnd architecture

pshashipreetham — Thu, 30 May 2024 18:42:16 GMT

Hi @cbaurand ,

I have done this in ReactJS; you can create the mashup on Thingworx. Then, create an Application Key and ensure it has the proper expiration date.

Then use the below Thingworx URL:
https://xyz.com/Thingworx/Mashups/MashupName?Parameter2=valuexyz&appKey=6b4668b0-1346-45bb-9892-f2f3d184b510&x-thingworx-session=true

Thanks,

Re: Embed Thingworx application in a Micro FrontEnd architecture

cbaurand — Fri, 31 May 2024 09:46:14 GMT

Hi Shashi,

Thanks for your response. Do you mean, there is nothing to change in the TWX platform config like we have to do if we use IFrame ?
Is it as simple as you write ?

Thanks,

Cyril.

Re: Embed Thingworx application in a Micro FrontEnd architecture

pshashipreetham — Sat, 01 Jun 2024 13:13:02 GMT

Hi @cbaurand ,

Yes, you need to make a CORS change in web.xml in the Apache Tomcat;

Below is the Article:
Article - CS229450 - How to Enable Cross-Origin Resource Sharing (CORS) in Apache Tomcat for ThingWorx Platform/ThingWorx Navigate (ptc.com)

Thanks,

Re: Embed Thingworx application in a Micro FrontEnd architecture

cbaurand — Thu, 04 Jul 2024 08:37:48 GMT

Hi @pshashipreetham ,
Thaks for your response.
I still have a problem. I get that:

My feeling is i have to modify the content-Security_policy: frame-ancestors in the header. Currently it is set to 'self' and i think i have to add the url that embeded my application. But i'm not able to find how to do that. In the web.xml, it seems it is not possible.
Can someone help me ?