how to build a React application as a widget inside another website

Question

I have been building SPAs (Single Page Applications) using React. Whenever I start a new project, I use create-react-app. So far so good.

I now have received a request to load a React application as a widget within an existing HTML page.

My question: how do I achieve this? I can refer to the react files using the CDN links as well as Babel however I am having trouble wrapping my head around packaging this all up using Browserify or Webpack.

Any of you have experience with this already? Perhaps you can share with me what works best.

I have tried googling this with not much luck.

Thank you.

Answer 1

Just add lines to webpack.config.js

...
externals: {
    'react': 'React',
    'react-dom': 'ReactDOM'
},
plugins: [...],
....

to exclude React from bundle and then add it at page before your bundle

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<script type="text/javascript" src="/scripts/app.bundle.js"></script>

(it will mount as usual to specified HTML element)