CreateReactApp: embed end-user plugin at runtime

user_430615 0
Viewed 274

We have a React application created/deployed using CreateReactApp.

This application is able to display some widgets. We've predefined types of widgets deployed with our own application. We'd like the end-users of our application to be able to develop their own type of widgets - using a dev tool like Webstorm/VisualStudio - and deploy them into our application.

  1. Our application needs to provide a public API and a plugin dev library
  2. We want the plugins to be able to use the libraries our application is using (e.g. React, material-ui…)
  3. We need a way to "load" end-user code that is registering new widget types using our public API.

Can we do that using CreateReactApp or do we need to eject?

What are the best practices for doing this?

create-react-app webpack reactjs javascript
2 Answers

I have more a suggestion than an answer, a best practice for that can depend on the structure of your current project, so I don't think there's a right answer. I wrote a small proof-of-concept, feel free to fork and use that, if it helps: https://github.com/anderick/react-dynamic-components.

  1. Our application needs to provide a public API and a plugin dev library

To solve this you can create a folder structure to let users upload their component projects.

You need a name or id to link this new uploaded project so you can load it later.

  1. We want the plugins to be able to use the libraries our application is using (e.g. React, material-ui…)

If the use is only allowed to use the libraries you already have, you don't need to worry about their package.json.

In case you want to allow users to use their own libs, it adds some complexity on how to process this during runtime.

  1. We need a way to "load" end-user code that is registering new widget types using our public API.

You can use create-react-app in this approach, but you may need a good definition of an entry point (in my example project, I'm using Index.js as the file I'll use as the main component of the project), or some kind of descriptor(maybe extending package.json) so you can read from your application to understand how to load the component. I'd go with the first approach, convention over configuration is more simple, and you can expand from that with a descriptor later.

user_38508210

by ejecting you can customize anything you want but you've to configure and maintain it by yourself, I think going through CreateReactApp also a good idea based on your criteria. I hope this article may help you out.

Thank You! MSS-

user_142468460
Related