Share codebase using common Sdk module in create react app Reactjs application

Question

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 ?

Answer 1

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 :)

Answer 2

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