Use one React project within another

Question

I would like to use one React project within another, but I would like to explain myself better.

1. I have a React project in which I would like to put more of my other React project on my pc
2. I don't want to put my projects in public npm

How can I use these isolated React projects in a larger React project?

Answer 1

There are multiple ways to go about this.

---

Have entire React apps in other React apps

This is usually referred to as micro front-ends. You could even have multiple React applications inside another React application. Even other frameworks such as Vue or Angular. Two ways to go about this:

A Single Single Page Application (Single SPA)

In this scenario you build multiple applications in one. A nice article about this is: Building Micro Frontends with React.

Split application into separate SPA's

The other option would be split the applications into separate SPA's. So you would build, and then deploy on a server, to load them in your app on the page you would like. Source: Hosting multiple react applications on the same document

---

Re-use only components

If you want to re-use components, you could create a separate application in which you use storybook to create and maintain your components. From this project you distribute them to your other project(s).

If you keep this project in the same root as your react project, you can use them using relative imports.

If you don't want to publish it in the public registry, you can use a private npm registry.

There are two ways to go about this.

1. Paid private npm registries:

   • https://www.npmjs.com/
   • https://www.myget.org
   • etc.

2. Host your own:

   • https://www.npmjs.com/package/sinopia
   • https://www.npmjs.com/package/verdaccio
   • etc.

This will allow you to keep your npm packages from the public.