CODEWITHSUNDEEP
javascriptreactjsgulpsetup-project
LucaRoverelli
LucaRoverelli

Reputation: 1177

Share code between two React web projects

I have two different and separated web apps, both developed with React. The two apps should share some React components. I would like to have a general project structure as follow:

.
├── cms-client
├── my-app
└── shared

where:

I tried to add a symbolic link inside the two src folders of the apps, like:

ln -s ../../shared/ .

executed inside the src folder of each app. In this case, when I try to use a shared component, the compilation failed:

../shared/Example.js
SyntaxError: /my-long-project-path/React/shared/Example.js: Unexpected token (6:12)

  4 |     render() {
  5 |         return (
> 6 |             <div>
    |             ^
  7 |                 <p>I am an Example of Shared Component</p>
  8 |             </div>
  9 |         )

like it is compiled as a standard js file, and not a React jsx file.

So, I'm trying a different approach, using a custom configuration of the jsconfig.json file. Now, my idea is to inject somehow the shared folder, but it seems impossible.

I could write a Gulp script that watch the shared folder, and then copy the contents inside the shared folder of the two project, but this isn't an optimal solution and very error prone (from my IDE, I need to pay attention on which of the three shared folder I'm editing). Moreover, the standard react-scripts is already watching the src folder for any changes. So, if someone has a better solution, it will be great!!!

Upvotes: 2

Views: 1211

Answers (1)

sgennrw
sgennrw

Reputation: 166

Can you do npm link on your shared ?

This will compile, package, and copy to some location on you machine

Then on both cms-client and my-app do npm link shared

It will create symlink in node_modules point to the locally shared

Upvotes: 1

Related Questions