How to embed react component on other domains?

Question

I have created a simple React component. I want that component to use as a plugin or widget. I have taken help from Writing embeddable Javascript plugin with React & Webpack and manage to set my webpack as below:

output: {
    path: __dirname + '/dist',
    filename: './app/components/FirstWidgetIndex.js',
    publicPath: '/',
    library: 'tracking',
    libraryTarget: 'umd',
    umdNamedDefine: true,
  }

And my component is as below:

import React, { Component, PropTypes } from 'react';

export default class FirstWidget extends Component {

    constructor() {
        super();
    }

    render() {

        return (
            <div className="setting-fullpage">
                <p>React Widget</p>
            </div>
        )
    }
}

const mapStateToProps = state => {
    //
}

module.exports = FirstWidget

And my FirstWidgetIndex file (entry point of webpack) is as follows:

import React, { Component, PropTypes } from 'react';
import { render } from 'react-dom';
import App from './FirstWidget.js';

render(
  <App />,
  document.getElementById('app')
);

Now, I want to add this FirstWidget as an embeddable widget. I am calling it on third party domain in an html file as follows:

<html>
    <head>
        <script type="text/jsx" src="https://mydomain/firstWidget"></script>
    </head>
    <body>
        <p>Testing React Widget</p>
        <div id='app'></div>
    </body>
</html>

But its not rendering my widget on the html page. Can anyone please suggest if I am missing anything?

Unrelated to the issue you are facing, but important to do none-the-less - use webpack in [production](https://webpack.js.org/guides/production/) mode and [react](https://reactjs.org/docs/optimizing-performance.html) as well. — Horia Coman, Mar 08 '18 at 10:56

Arnold Gandarillas · Answer 1 · 2018-03-09T08:17:17.083

2

You need to tell where react will render, for example:

FirstWidget.js

import React, { Component } from 'react';

export default class FirstWidget extends Component {
  render () {
    return (
      <h1>Hello world</h1>
    );
  }
}

index.js

This is your entry point in webpack

import React from 'react';
import { render } from 'react-dom';

import App from './FirstWidget.js';

render(
  <App />,
  document.getElementById('app')
);

In your index.html you need to have a tag with app id.

<div id='app'></div>

Note: The code in index.js needs to be like it's above and it should be the entry point in your webpack configuration.

edited Mar 09 '18 at 08:17

answered Mar 08 '18 at 10:45

Arnold Gandarillas

3,896
1
30
36

I think you mean `App ` by `FirstWidget`. – Triyugi Narayan Mani Mar 08 '18 at 12:37
When I am accessing that component in my react application it is rendering but when in third party its not. can you please confirm if I am adding correct js file in index.html? – Triyugi Narayan Mani Mar 08 '18 at 12:53
You miss the last part of my answer: **In your index.html you need to have a tag with app id** – Arnold Gandarillas Mar 08 '18 at 13:28
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/166463/discussion-between-arnold-gandarillas-and-triyugi-narayan-mani). – Arnold Gandarillas Mar 08 '18 at 13:30

How to embed react component on other domains?

1 Answers1

Linked