How do you manage several ReactJS projects?

Question

Background: My company's web-app is in fact several completely separated apps that have minimal effect on one another. That's why it doesn't make any sense to keep them under a single project - so I'm using separate projects. However, since I started migrating and writing new apps in ReactJS (using Webpack for bundling) I find many opportunities for reuse, in order to avoid code duplication and to avoid downloading common resources again after another app already fetched them:

• I'm using specific versions of 3rd party npm modules - so no reason to bundle them over and over again - and no reason to upload them to the server more than once (for all the projects).
  • How do you share package.json fixed versions across projects?
  • Do you bundle all/groups of npm modules together or each separately? I want to get everything from the server for cases of on-premise deployment.
  • What measures to you take to make sure you don't forget to re-bundle the node modules in case you decided to update one of them?
• Similar question goes for font files (keeping the font on the server and another font for icons)
• common style sheets
• common JS code - like utils & common
• common web.config configurations
• common images (currently some of them are inline in different bundles)
• and last - common components - how do you share them? Do you use a separate project and publish to npm? symlink?

Or maybe, after all, I should go with a monorepo? And how?

Answer 1

You could create a separate project, my_modules, which is just a manifest of the shared, common packages. You'd have a package.json with all the common modules, and a single index.js which does something like:

import React, { Component, PropTypes } from 'react';
import moment from 'moment';

export { React, Component, PropTypes, moment };

Then, you'd publish this new my_modules project to github, and install that in your other projects.

import { React, Component, PropTypes } from 'my-modules';

Every time you change a package, you'd increment the version, and then update that version in your projects (which is still a bit of a pain, but you could use something like greenkeeper.io to ensure they don't get stale).

Similarly, you can do the same thing for just about everything else you've mentioned, although you don't want to go overboard with this; you should only share standard assets that doesn't change very often, and keep project-specific assets in their own repo.

EDIT: wanted to add, for React components, this is actually a really good practice, because it forces you to write generalized, independent components. You can use something like React Storybook to create these components in isolation. You can publish one master package with all the packages, individual components as packages, or somewhere in between (eg. all Form components in one package). Either way, though, they can still share a repo for convenience.