How to reuse AEM SPA components from one project in another?

How do I reuse one AEM SPA project's components in another SPA project? Assuming both projects in this example use the AEM Maven Archetype 25 with React:

Project A has a header component in ui.front-end that has the proper mapping to the AEM component under its ui.apps.

How would I reuse this header component in Project B? It seems like the header component needs to also exist in Project B and be imported into the imported-components.js file to work. If I wanted to instead turn project A into an AEM SPA component library and use those components in Project B. How could I make this work?

Solution

If I wanted to instead turn project A into an AEM SPA component library and use those components in Project B.

You can do this - just create project-a as a regular React App and export your components from it, then use it as a dependency in project-b (the ui.frontend part of your AEM project) and map those React components to their AEM counterparts.

Here's an example component from :

const Header = (props) => {
   return <h1>{props.title}</h1>
}

export default Header

Then in your project-b you'd do something like:

import {Header} from 'project-a'
import {MapTo} from '@adobe/aem-react-editable-components'
...

MapTo('my-aem-app/components/header')(Header)