如何将 React App 嵌入到另一个网站

Question

I have an old website running on server x. Now a React-App has been developed, which is on server y.

The website should display the React-App.

I have searched and read several posts on the topic but with no success so far. The only solution currently working is an iframe but we don't want this.

If I do

npm run

and inspect the source on the server hosting the React-App, there is the following:

...

<div id="react-reporting"></div>

<script src="/static/js/bundle.js"></script><script src="/static/js/0.chunk.js"></script><script src="/static/js/main.chunk.js"></script>

Basically I would like to take this HTML-part and put it into the old site. Is this possible and if yes how?

Answer 1

My approach actually works, but I missed these two scripts:

 <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
 <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

So for testing locally it is:

 <div id="react-reporting"></div>
 <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
 <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
 <script src="http://localhost:3000/static/js/bundle.js"></script><script src="http://localhost:3000/static/js/0.chunk.js"></script>
 <script src="http://localhost:3000/static/js/main.chunk.js"></script>

I also approached an error regarding sockjs which was caused by the test-file, which imports the React App, was being opened as file:// not via http://

Edit

After some more tests, I found using webpack is the best solution - it makes the app accessible as a single file.

package.json

...
"scripts": {
    "start": "webpack-dev-server --inline --hot",
    "build": "webpack --config webpack.config.js"
},
...

webpack.config.js

 const path = require("path")
 const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
 const glob = require("glob")

 module.exports = {
     entry: ['@babel/polyfill','./src/index.js'],
     output: {
        filename: "bundle.js"
     },
     module: {
        rules: [
             {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
             },
             {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            }
        ],
    },
    optimization: {
        minimizer: [new UglifyJsPlugin()]
    }
}

• polyfill is needed for compatibility with IE11
• every file processed (starting with the entries) counts as module. If it matches the "test"-part of a rule, the rule is applied (except for the excludes).

.babelrc

{
   "presets": ['@babel/react',
              ['@babel/preset-env', {
                 "targets": {
                   "browsers": ["last 2 versions", "ie >= 11"]
                }
              }]],
  "plugins": ['@babel/plugin-proposal-class-properties']
}

• plugin-proposal-class-properties is only needed because I have some static members in classes.

When running

npm start

the Webpack-Dev-Server will start and make the app accessible under http://localhost:8080/dist/bundle.js .

Code to embed the app in another site:

<div id="react-reporting"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="http://localhost:8080/dist/bundle.js"></script>                                    

Answer 2

If you are using create-react-app, go to the folder of your React App, and insert this command:

npm run build

This will generate a ./build folder with all that you need for your app.
Then it's simply a matter of dragging the ./build folder to server x.
You can also change the HTML that calls the react app so it will fit the old webpage.