Using the script directly breaks assets

Hi there!

So I’m having the following situation:

I created an app using create-react-app (this repo), which has some assets.

The app is used to work as a plugin on many different sites/apps. So the purpose is to provide it in 2 possible ways:

1. Use inside an iframe and pass parameters via the URL

<iframe src="https://plugin.domain.com/plugin-name/version-number?param1=value1&param2=value2"></iframe>

1. Use a div with the correct id and a separate <script> tag that points to the script (which is duplicated from static/js/main.*.js to main.js in the root) and pass params via the dataset

<div id="plugin-name" data-param1="value1" data-param2="value2"></div>

<script type="text/javascript" src="https://plugin.domain.com/plugin-name/version-number/main.js"></script>

When using the iframe, everything works like expected. But when using the div + script, I get the following error:

Failed to load resource: the server responded with a status of 404 (Not Found)

Any idea how I can fix this or what the preferred way of doing something like this is?

CC: @gaearon @Timer

[MichaelDeBoey]

@gaearon I found it in their docs 🙂 https://webpack.js.org/guides/public-path/#on-the-fly

[jasonwr]

@MichaelDeBoey you might want to have a look at this: https://itnext.io/so-you-want-to-host-your-single-age-react-app-on-github-pages-a826ab01e48

If you want to pre-deploy or deploy you could even have a bash script to take care of the PUBLIC_URL parameters.

FYI @gaearon