title: Sharing typescript code between backend, react and react-native clients
body: <p>I've started to convert my project to typescript and in a meanwhile I decided to improve code reuse between node.js backend, react web client and react-native mobile client.</p>
  
  <p>Here is my project structure:</p>
  
  <pre><code> ├ commons (code shared between backend and frontend, mostly type definitions and utils
   ├ clients (code shared between web and mobile clients, depends on commons: containers, utils, forms... )
   ├ backend (express server, depends on commons)
   ├ web (create-react-app, not ejected, no SSR needed, depends on clients)
   ├ mobile (react-native client, depends on clients)
  </code></pre>
  
  <p>What I've tried so far:</p>
  
  <ul>
  <li>Symlinks. Could't make them work with react-native (see <a href="https://github.com/facebook/metro-bundler/issues/1" rel="nofollow noreferrer">metro bundler issue</a>).
  This can probably be solved by using haul, but adds extra complexity by making haul work with typescript. Also, haul doesn't seem to work with Mobile Center, which I use for publishing mobile apps</li>
  <li>Using <code>rootDirs</code> or <code>paths</code> in tsconfig.json. Typescript compiler doesn't merge/bundle outputs, so this means I need to support 3 different solutions to merge generated code. Also doesn't work well with my IDE.</li>
  <li>Using <a href="https://github.com/wix/wml" rel="nofollow noreferrer">WML</a>. I tried two approaches:
  
  <ul>
  <li>Linking <code>commons</code> and <code>clients</code> to packages inside <code>node_modules</code> of web/mobile/server. To do this, I have to generate declarations, which is burdening because it requires exposing all imports (see <a href="https://github.com/Microsoft/TypeScript/issues/9944" rel="nofollow noreferrer">this issue</a>). Also doesn't play well with yarn, which will remove linked package every time it installs something new.</li>
  <li>Linking <code>commons</code> and <code>clients</code> to separate source folder inside source folders of web, mobile and backend. This is what I use in current JS version of my project. It works, but it has some downsides: 
  
  <ul>
  <li>Long relative imports (probably can be solved by supporting 3 different solutions for module aliases)</li>
  <li>wml sometimes breaks in backround, which leads to some confusing albeit easy to discover errors</li>
  <li>doesn't work well with hot reloading</li>
  </ul></li>
  </ul></li>
  </ul>
  
  <p>I'm looking for a solution which is not too complex (requires minimal configuration on web/mobile/backend sides) and plays well with Webstorm.
  It probably doesn't exist now, so I'd like to hear what other solutions people here use for similar project setups.</p>