lundi 17 décembre 2018

How can i serve remote React app with a script tag?

We have at our company a react app (built with create-react-app) which is served today via an iframe, which works well.

A need has raised to serve the app (which is always embedded within other pages), with a script tag alone (no iframe tag).

i thought of something like:

<div id="app-placeholder"></div>
<script src="https://our-app.com/init.js"></script> // this will create a function called window.InitMyApp
<script>
    InitMyApp('#app-placeholder', 'token', otherOptions)
</script>

I've tried to create init.js file in the react app's public folder. i can access the file. From that file, how can i render the react app itself to the given selector (#app-placeholder)?

Because this file is served as-is, and doesn't get transpiled by webpack/babel, i cannot use import/jsx/require() and other stuff.

Am i on the right track? Should i manually transpile this file? Are there any other solutions to this rendering method?

Thanks in advance.




Aucun commentaire:

Enregistrer un commentaire