React project as a widget

[arman94]

is there any way to put all build files of React app into one single js file when I run yarn build?
I want to serve my react app from CDN link and I found nothing to explain is it possible or not.
I want to my app work as a widget on other websites.

[ianschmitz]

The PUBLIC_URL env variable may be of interest to you. You can set this to the base path of where your files will be hosted on the CDN. This means dynamic imports and other features will work as expected. You can read more over at https://facebook.github.io/create-react-app/docs/advanced-configuration.

Otherwise it's not currently possible with CRA to emit a single all encompassing file. You can likely achieve this through some webpack configuration, but you would have to eject and would be on your own at that point.

[mrmckeb]

Just to add to this, I work with a client that had this requirement (which I won't discuss here) and we forked react-scripts to create a single-bundle in that case. But that's not a solution I'd recommend unless you 100% need a single bundle, and as @ianschmitz said, CRA works great with a CDN without disabling code splitting.

Users have also shared other solutions in here, like this one:
#3365 (comment)

[miraage]

There are really many cases when the app should be bundled as a single JS file. #5306 and #5929 are related to this topic.

[arman94]

@ianschmitz I think I didn't clear myself. I need to my app act just like a widget, just like what crisp chat widget does on other websites. I trying to build a CRM and I found nothing to make this happen.
As an example, I can refer to this library which you can use it in your project via CDN link.
@igetgames would you help me?

[mrmckeb]

I understand and agree @miraage, but I think the question is not "Is there a reason?", instead it is "Is this something we can support?".

The bigger issue here is that user A may want a single JS file with everything, user B may want one JS and one CSS file, and user C may also need assets separated out. This creates a lot of complexity (and a much larger surface area for issues to arise). So I do understand the desire, but I personally don't see a simple solution here.

[ianschmitz]

Maybe check out https://github.com/insin/nwb which can do a UMD build it looks like, which may work well for you.

[arman94]

@ianschmitz I tried your last comment, not worked. I have to write it with vanilla js because react does no support something like that.

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.