Sharing Code between Multiple React Applications with Symlinks

Question

I currently have two separate frontend applications. A lightweight mobile client and a heavyweight administration panel. Both were created with CRA. We use TypeScript for everything.

Currently, the directory structure is as follows:

root
├── admin (created using create-react-app)
|   ├── node_modules
|   ├── public
|   ├── src
|   │   └── common (symlink)
│   │   └── index.ts
|   ├── package.json
|   └── tsconfig.json
├── mobile (created using create-react-app)
|   ├── node_modules
|   ├── public
|   ├── src
|   │   └── common (symlink)
│   │   └── index.ts
|   ├── package.json
|   └── tsconfig.json
└── common (linked)
    ├── src
    ├── package.json
    └── tsconfig.json

For whatever reason, CRA does not respect the symlinks. It's as if no files are even there.

Is there a sanctioned way to do something like this?

Right now, we're copying files into the two repositories with another script. I also tried to use yarn link , but Typescript can't resolve the files properly (it keeps expecting to see a JavaScript).

Answer 1

There is a few different approaches. You could package it as a library and import said library in to your projects. The library can be hosted on a private or public Git host and reference the Git URL in your package.json just like a NPM package.

"dependencies": {
  "your-lib": "git+ssh://git@domain.com:name/repo.git",
}

This approach forces you to push your code and re-install on every change though. And might be hard to work with if changes occur often in your code.

You can also use something like Lerna to organize your codebase in to a multi package repository. https://github.com/lerna/lerna

Answer 2

I believe the easiest way is to use yarn workspaces ( https://classic.yarnpkg.com/blog/2017/08/02/introducing-workspaces/ ), for this you need to define in root package.json with dependencies, like this

"workspaces": [
    "admin",
    "mobile",
    "common"
]

And then you can use yarn install, and it's should work out of the box. Before you would try it please, unlink common , to ensure that it works as it should.

Also, you need to have dependencies in admin and mobile on common package.

Answer 3

I'm using yarn link and it works perfectly. The difference could be, that I'm fully building (with rollup) the ts library (common) code.

Tips/tricks:

• have "declaration": true in the common package's tsconfig.json
• sometimes if the new stuff is not picked up, use Restart TS server in VSCode
• have some yarn start build watch running in both packages (for tsc-watch or any other build), this way all changes will be picked up immediately
• it could be worth checking ls -ald node_modules/<mypkg> if it really is a symlink, because any other npm install could remove it (yarn seems to be better in this)