8

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?

Improve this question
3
  • I think you cannot put one project inside another, but you can have many projects in the same folder. You could recycle the components of one project in another but not he hole project. Commented Nov 19, 2019 at 9:41
  • Depends on what you mean by 'use' in another project. Do you want the run entire applications in isolation? Or do you want to re-use components? Commented Nov 19, 2019 at 9:48
  • The main thing I want is that each project has its own package.json and that therefore it doesn't put it's dependences on the package.json of the main project Commented Nov 19, 2019 at 15:01

1 Answer 1

Reset to default
18

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:

  2. Host your own:

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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.