how best to incorporate an existing package created with create-react-app

I have been working on a package that has been created with create-react-app.

I have now come across lerna and would like be able to use lerna to link the local pacakges together without using npm link.

How can I refactor my application into a structure that would work with lerna.

Is it even worth it?

[pclements12]

I’ve made a successful version of a create-react-app (with Redux) using lerna, but it’s a little complicated. I wouldn’t recommend the approach unless you truly need it.

This is how I’ve set it up:

Module Structure

• App module
• Other modules

App module

The main app module contains many of the root level files that are essential to a React application:

• index.js (The main entry point of the React application that mounts it to the DOM)
• main-router.jsx (Hook up all of the routes from each package)
• reducers.js (combine all the reducers)
• store.js (Create the Redux store with the reducers and any middleware required)

Other modules

All modules follow this componetized pattern:

src/
  index.js
  routes/
    {route-name}/
    index.js
  components/
    {component-name}/
    index.js
  reducers/
    {reducer-name}/
    index.js
    selectors.js

Within each root level folder, an index.js file should exist that collects all of the exports that should be exposed to other modules so that the root index.js can succinctly expose each of these for the entire module.

The root index.js should expose (I’d love a more flat way to express this, especially for components):

components,
selectors,
reducers,
logic,
route,
theme

To run the app, you need a few things:

• Run lerna bootstrap to install all deps and link packages
• Run babel with the --watch flag for each “Other” package (for live edits)
• Run the regular create react app start script to start a webpack dev server with hot reloading

Hope that helps or at least tells you it can be done!

Edit: Composing the routes can be a bit tricky in the “app” module. I had to use this technique to get it to work:

Module Route definition:

const Module1Routes = () => (
  <Route path="/my-route">
    <IndexRoute component={header} />
    <Route path="/my-route/page" component={page} />
    <Route path="/my-route/page2" component={page2} />
  </Route>
);

App main-router.jsx:

 <Router>
        {Module1Routes()}
        {Module2Routes()}
</Router>

[ctrlplusb]

FYI, for those in the interest. All works well with straight up yarn workspaces. Although you may need to firstly create your create-react-app instance outside of your workspace and then copy the result into your workspace and run the yarn install command again.