Angular app integration

Hi friends ,
I’ve question about Angular Integration.
Currently i am integrating Angular And Playcanvas apps using iframe-parent communication and it works perfect.What i am curious about is , is this the best practice or is there a better way to do?For example embedding playcanvas app into Angular component directly without iframe sounds great but do you know how?Thanks

Hi @esr_esr,

This is an interesting question, I’ve worked in several projects that embed a Playcanvas app in a broader framework (Angular, React and conventional CMSs like Wordpress/Drupal).

In my experience the iframe-parent communication approach (postMessage) provides a very clean way of approaching the problem. It allows you to keep the codebases separate and given the cloud nature of the Playcanvas editor it makes it easy to push updates and new builds, without having to disturb the main codebase.

The postMessage API can easily work with the proper configuration even on a cross-domain setup. Allowing you to keep storing the Playcanvas builds on the Playcanvas server making it easy to maintain the editor project/assets.

Unless the project requires adding the Playcanvas app directly in the codebase, as a special requirement, I think it’s perfectly OK to keep using the iframe-parent approach.

To complete all the cases:

Sometimes, we may even go the opposite way, use an automatic uploader to have the UI/containing parent app uploaded and executed from inside the Playcanvas project.

The Playcanvas editor can be a great place to hold and execute regular Javascript plus HTML/CSS, so it can accommodate this use case as well.

Thank you Leonidas,
I agree with you , postMessage API is easy and works great.I was just curious about what advanced users thinks , like you .I am also aware of scriptable parts of online editor and plugins like yours and this makes things easy , too.
Thank you again

1 Like