Sharing components between apps, "create-react-component"
See original GitHub issueNote from Maintainers: see https://github.com/facebookincubator/create-react-app/issues/1492#issuecomment-358170489 for the latest thinking on this.
The Problem
Say I have two sibling CRA apps, Foo
and Bar
. What is the best practice for sharing a common component, Baz
between the two apps?
Scope
It would make sense to have a sibling folder Baz
with it’s own package.json
, and to use npm link
to access it from Foo
and Bar
.
But it seems that npm link has bigger issues, so maybe we should explore alternatives. One example is wml, which simply watches and copies files.
Building
Even when npm link
works fine, the JSX in Baz
has not been compiled.
Per this discussion, I think we should compile separate modules like Baz
independently, but that will require boilerplate such as babel config. CRA helps avoid this for full apps, but we don’t yet have create-react-component
to help manage the boilerplate of shared components.
Optimizing for Developer Experience
There are a few ways to clean this up, but I’m curious what people think is the current best practice. What is the ideal developer experience?
Issue Analytics
- State:
- Created 7 years ago
- Reactions:142
- Comments:83 (26 by maintainers)
Top GitHub Comments
Ok, @gaearon, based on your previous comments, it seems that this issue is pretty ripe for fixing.
RFC of a cohesive solution
Please poke this proposal full of holes 😄
Part I: The new meta Creator
We may want to give people more tools like CRA in the future, but it isn’t desirable to force people to install a new global dependency for each tool.
Instead, I’d like to propose one tool to rule them all:
create-react
:Behind the scenes, this tool will look up the latest npm package to do the heavy lifting. For example,
create-react app
actually is implemented by thereact-creator-app
package. Thereact-creator-component
package would define the behavior ofcreate-react component
.This opens up more innovation in the space, because a random company could publish
react-creator-mycompany-project
, and everybody can easily try out their environment by runningcreate-react mycompany-project
.Also, this could replace
react-native init
, which could becomecreate-react mobile
,create-react native
or something.Part II: The Component Dev Setup
One of the new creators would be the ‘component’ creator, which creates a new React component package.
Like a CRA app, it includes scripts as
devDependencies
, and has local commands likenpm run build
, which builds using the standard Babel configuration. It would output whatever module standard is expected by standard CRA apps.One major difference is that
npm start
will build the component and watch for changes, rather than launching a server.At this point, developers could use
npm start
alongside linklocal to hack on their components from a neighboring react app.One huge argument for doing this is to improve tooling for React Native components. Currently, most RN libraries publish uncompiled code, which has become a nightmare when attempting to share libraries or components in other environments that expect
node_modules
to be compiled. By introducing a common set of library scripts, we can build a comfortable path forward to compiled modules.Part III: Improve experience within an app
The only bad part about the above experience is the manual usage of
linklocal
and thenpm start
for each component you may want to hack on.In the future, the
react-scripts
of CRA could be upgraded to automatically runlinklocal
, so that changes made in neighboring modules are immediately reflected in the development app.Then,
react-scripts
can detect when an app’s linked component is supported by the same scripts, and can automatically run the watch-and-build behavior for each of the compatible components.So, if I had
Foo
andBar
as independent apps that each depended on a siblingBaz
component, I could run either app and still see the updates as I make changes toBaz
.Thoughts?
Let me ping a few more smart people who have a lot of context on this: @cpojer @thejameskyle @skevy @taion @ljharb
I’m excited to work on this because I’ve felt this pain a lot- especially when trying to share code between React Native and web/CRA.
Please let me know if you think this makes sense! I’m happy to put together a prototype, if people like this approach.
I can’t stress how much I need this feature. My core problem is I have 3 apps:
marketing-site
, ‘customer-app’, and ‘employee-app’. I am keeping them separate to make them as performant as possible, but there are many shared components, for instance the logo.My current solution has been having a fourth app that gets imported into each, and then using
yarn link
, but as mentioned above this is painful, and has issues.With each layer of separation, my development experience goes down. Having this built into
create-react-app
would significantly simplify my life.