18

I want to start a new app that will have both web and reactnative interfaces.

I decided to move all business -non enviroment dependent- code into a third package -aka sdk- that i can share between both react & react native .

So my project now has 4 modules

  1. Web -- created with cra
  2. Sdk -- mainly redux + redux saga + react containers + Hoc's
  3. Mobile -react native

  4. Server - nodejs express api.

    • All web, mobile and server will depend on Sdk module.
    • sdk module will depend on server module -mainly to impory mocks and data interfaces.

Is there any standard way to achieve such structure ?

Most probably i would love to

  • use yarn workspaces to hoist all node-modules into one folder to avoid reinstalling packages in every project
  • i will be working in all 4 projects at same time, so i need hotreload to be aware of this.

** challenges im facing **

  1. Cra doesnot transpile code outside src folder so although web project does refresh qhen i make changes on sdk. It cannot understand es6 code.
  2. Jest also doesnot understand es6 from node_modules

How can i avoid rebuilding step while working on both sdk and web modules simultaneous ?

Rahil Ahmad
  • 2,296
  • 13
  • 18
Zalaboza
  • 8,143
  • 15
  • 64
  • 130
  • Have you tried learna https://github.com/lerna/lerna .. – Rahil Ahmad Jul 25 '18 at 08:28
  • @RahilAhmad that wonnt help fixing any of challenges i mentioned above – Zalaboza Jul 25 '18 at 12:20
  • > CRA doesn't transpile code outside of src folder - this is not a challenge for anyone, it is a misuse of a very limited 'hello-world' instrument, which does not fit real-life use cases. And `babel` config is just one example of many. Just eject it, or use some overriding tools (which is yet another hack over existing one). – amankkg Jul 26 '18 at 03:39

2 Answers2

6

Yarn workspace sounds like a good approach for the project structure you're thinking.

You can have a packages directory where you can add your projects:

/packages
  - web
  - sdk
  - native

Now you can use babel to watch for code changes for each of your package using babel -w and yarn workspace will take care of linking them together.

If the babel watchers are running, any changes that you make to the sdk will be reflected to both web and native packages. You can also club all of these together using something like concurrently to fire up watchers using a single command.

I have co-authored an open-source library where we follow a similar structure which you may check here. The difference in this project is that our redux logic is in a separate repo.

In order for jest to work, you can add a test env into your .babelrc file which transpiles modules. So you can add two different environments like test which transpiles into commonjs modules and an es environment which keeps ES modules so your users can take advantage of tree-shaking. Example config

Hope this gives you a good starting point :)

Divyanshu Maithani
  • 9,464
  • 1
  • 31
  • 41
-1

You could try a Project structure like this:

| package.json
|- node_modules
|- Web
 | package.json
|- SDK
 | package.json
|- Mobile
 | package.json
|- Server
 | package.json

Then you could install everything within the root folder and set the NODE_PATH env variable :

export NODE_PATH='yourdir'/node_modules
MaddEye
  • 550
  • 2
  • 15
  • that wonnt help fixing any of challenges i mentioned above – Zalaboza Jul 25 '18 at 12:20
  • you can use yarn workspaces to host on one folder with this and have a central hot reload from the root package.json – MaddEye Jul 25 '18 at 13:12
  • 1
    react doesnot transpile code outside src folder. so you will get "Module parse failed: Unexpected token (16:26)" when importing any of modules in workspace – Zalaboza Jul 25 '18 at 13:58