Share code (React or Vue) between more than one project

Question

Let’s say that I have the web application in React or Vue. Part of the code I will reuse to several clients, about 70%. The other 30% would be layout changes and some extra COMPONENT that each customer needs.

Is there any way to control it? Make this 70% code become a plugin, or create a Gulp task to copy the same files from one project to another?

I think the ideal was to have a repository with only this 70%, and other repositories for each client customization.

How do you suggest I do that? Someone has already done?

Answer 1

So I had a case similar to this once. In a company that I worked with, we had created because of our own library of components, and as new projects were emerging, we had to copy all the components. To improve maintenance, update these components, and not always have to perform this manual copy, we choose to do the following:

1. Select all components that will be reusable between projects;
2. Refactor all selected components so they have no business logic/rule inside them;
3. Create a separate project/repository for them;
4. Create a development environment for this new repository, in this case we use Storybook (visual testing, development and documentation), unit testing with Jest, and regression testing with Pupeteer/Jest;
5. With the components ready and tested, we created a script to carry out its installation, to install this new library of components, in the Vuetify/Buefy style;
6. Since it was a client and private components, we climbed onto a server with Nexus, but if it didn’t have to be private, it could go up on npm;
7. We erased all components that were copied in the projects;
8. We have installed this new component library in all projects;

Now when we need to add a new component, new Feature, or change, we change it in the library (if it’s something reusable), and upload a new version, then just update the projects that are using it.

I hope I’ve helped.