How to make a shareable widget with react 18 (plugin name should be static or shareable in some way)?
Published: 2022-05-10 12:56:50

I am developing a shareable widget with client as react 18 which can be called by using following approach:

OS : windows 10 64 bit
Node: 14.15.3
NPM: 6.14.9

When I try to run the npm run build command then I can see the following index.html page in build directory and there are some js, css plugins and images in the build directory.


`<!doctype html><html lang="en">
    <head><meta charset="utf-8"/>
    <link rel="icon" href="/favicon.ico"/>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <meta name="theme-color" content="#000000"/>
    <meta name="description" content="Web site created using create-react-app"/>
    <link rel="apple-touch-icon" href="/logo192.png"/>
    <link rel="manifest" href="/manifest.json"/>
    <title>React App</title>
    <script defer="defer" src="/static/js/main.6134db66.js"></script>
    <link href="/static/css/main.073c9b0a.css" rel="stylesheet">
</head>
<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root">        
    </div>
</body>
</html>`
Now my main focus is on calling js, css and image resources if I develop the widget. My widget can be accessed through a js and css plugin including a div element.

Now see following URLs will be dynamically generated each time.

`src="/static/js/main.6134db66.js"
href="/static/css/main.073c9b0a.css"`
How would I give it to my customers/clients if name 'll be changed after each npm run build.

You can see my client application source below which is calling my widget.

`<!DOCTYPE html>
   <html lang="en">
       <head>
           <meta charset="UTF-8" />
           <meta http-equiv="X-UA-Compatible" content="IE=edge" />
           <meta name="viewport" content="width=device-width, initial-scale=1.0" />
           <title>Document</title>
           <link href="http://localhost:3000/static/css/main.073c9b0a.css" rel="stylesheet"></head>
           <script defer="defer" src="http://localhost:3000/static/js/main.6134db66.js"></script>
       </head>
       <body>
           <div id="root"></div>
       </body>
   </html>`
I can place it on one of my server domain but how to keep the plug name same ? I am also curios about my widget images. Will my widget image work correctly or 'll I have do something more for it ?

Any help will be appreciated.

See my package.json

`{
    "name": "widget",
    "version": "0.1.0",
    "private": true,   
    "dependencies": {
        "@testing-library/jest-dom": "^5.16.3",
        "@testing-library/react": "^12.1.4",
        "@testing-library/user-event": "^13.5.0",
        "react": "^18.0.0",
        "react-dom": "^18.0.0",
        "react-scripts": "5.0.0",
        "web-vitals": "^2.1.4"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
    "eslintConfig": {
        "extends": [
            "react-app",
            "react-app/jest"
        ]
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    }
}`

As I am using react-18 so I can use multiple modes if there is some preferable approach

`ReactDOMClient.createRoot(/*...*/);

ReactDOMClient.hydrateRoot(/*...*/);

or 
ReactDOMServer`
I can't use IFrame so please refer/suggest something except it. I need to use a Div.