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?
React can be used in any web application. It can be embedded in other applications and, with a little care, other applications can be embedded in React.
The use cases for having multiple pages in a single React app are pretty simple. You can create a website, and easily classify different types of content on different pages. But, it should also be understood that the default implementation of React is made to use a single HTML file, and this is by design.
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://
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()]
}
}
.babelrc
{
"presets": ['@babel/react',
['@babel/preset-env', {
"targets": {
"browsers": ["last 2 versions", "ie >= 11"]
}
}]],
"plugins": ['@babel/plugin-proposal-class-properties']
}
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With