Open React.js project in another project

Question

I have a project in react which is almost completed but I have to include my 2yo. react project which is still working if I open it separately. I tried to add that whole project to my src folder and run it from there but that project is using it’s own redux, router and a lot of other stuff which will take me a years to transfer it. Do you have any advice?

The project should work like this: In project 1, you click for example on a button which should open a component from the project 2 and display it on the page..

You mean, inside one /src folder but running seperately, right? — Tu Nguyen
– Tu Nguyen, Commented Sep 27, 2018 at 12:25
Then, for now, the question could be "Sharing node_modules folder with multiple projects", right? — Tu Nguyen
– Tu Nguyen, Commented Sep 27, 2018 at 12:41
I don't think so but I explained it wrong, check this post again to know how it should work. — Jan Jiráň
– Jan Jiráň, Commented Sep 27, 2018 at 14:08
Your quest lacks detail so won't get an answer. How are we supposed to know the differences in compilaton requirements between the two (e.g. webpack/babel config), or what tech/version difference there are (e.g. react router v3 vs v4), or how you want to host it (e.g. different url prefix to each e.g. /legacy/.. and /new/.. or all merged together etc etc :/ — nanobar
– nanobar, Commented Sep 27, 2018 at 14:12

Junaid aziz · Accepted Answer · 2018-09-27 20:51:43Z

5

Yes, you can include your project as compiled javascript file in any project.

I have done this but you need to specify a function or class from where you can access your all components.

Create a production build and simply include it into your other project. it will exactly work as you want it to.

Here is how you can import your build

<head>
  <script type="" src="./path/to/js/build.js"></script>
</head>

answered Sep 27, 2018 at 20:51

Junaid aziz

3633 silver badges8 bronze badges

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

2 Comments

Mubeen Khan Over a year ago

Great! just tell me one thing that how to generate build.js file?

Junaid aziz Over a year ago

@MubeenKhan by default when you run npm run build which is react's default behaviour it creates a compiled file for your react app which is build.js in production ENV but you can change its name by updating your web pack settings to whatever you like.

Ska · Accepted Answer · 2018-09-27 14:15:04Z

0

I've been in exactly the same situation. I include the old project as any other JS library at the end of the body tag in the same HTML. Root divs have to of course be different for both apps, which you have to configure in the apps code.

It works like a charm, more or less.

<!doctype html>
<html lang="en">

<head>

  <title>Two react apps together</title>

</head>

<body>
  <div id="oldRoot"></div>
  <div id="newRoot"></div>
  <script src="./static/js/old.js"></script>
  <script src="./static/js/new.js"></script>
</body>
</html>

answered Sep 27, 2018 at 14:15

Ska

6,95815 gold badges55 silver badges75 bronze badges

Collectives™ on Stack Overflow

Open React.js project in another project

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related