Loading react component from url

Question

I want to import the react component that I have bundled using web pack.

I am able to complete the task by copying it locally to that folder and then importing it like import Any from '.dist/index' and it is working fine. But what I want to do is uploading this index.js file to somewhere for example Amazon s3. Now I am not able to import the component in the same way as mentioned above.

My webpack.config.js file, I have used to export my bundled component generated by webpack that I am using in another project by copying the index.js and index.css file is

var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "index_bundle.js",
        libraryTarget: "commonjs2"
    },
    module: {
        rules: [
            { test: /\.(js)$/, use: "babel-loader" },
            { test: /\.css$/, use: ["style-loader", "css-loader"] }
        ]
    },
    externals: {
        react: "commonjs react" 
    },
    mode: "production",
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        })
    ]
};

I want to import the component from file url uploaded to s3.

Might be related to [this](https://stackoverflow.com/questions/34607252/es6-import-module-from-url) — A Rogue Otaku, May 23 '19 at 19:56

score 3 · Answer 1 · answered Oct 05 '20 at 20:46

you can do what you are describing with micro apps. A micro app is basically nothing more than a component that is lazy loaded into the host application from a url at runtime. There is no need to install or import the component at design time. There is a library available that lets you do this with a HOC component.

import React from 'react';
import ReactDOM from 'react-dom';
import MicroApp from '@schalltech/honeycomb-react-microapp';

const App = () => {
  return (
    <MicroApp
        config={{
          View: {
            Name: 'redbox-demo',
            Scope: 'beekeeper',
            Version: 'latest'
          }
        }}
      />
  );
});

export default App;

You can find more information on how it works here.

https://github.com/Schalltech/honeycomb-marketplace

score -1 · Answer 2 · answered May 23 '19 at 20:33

-1

This is not the way you should package and deploy your React components. AWS S3 is a bucket for storage of files to serve on the web. It's purpose is not to share code files through projects.

You should publish your React components to a registry such as NPM. After you publish your package to the registry, you should be able to install the package into your app as a dependency by doing something like npm install my_package.

answered May 23 '19 at 20:33

zubhav

1,519
1
13
19

1

That is definitely true and I had done it. But what I want to do is allow user to upload the bundled folder and then render the index,js file from that folder at runtime. Can you please share any other idea that I can accomplish it in better way. That will be great help to me. – Hardik Modi May 24 '19 at 05:36

Loading react component from url

2 Answers2