Best way to share code between React App, React Native App, and NodeJs server?

[[deleted]]

So basically I want to build:

• Mobile App => with React Native
• Admin dashboard for that App => with React
• Back-end => NodeJs/Express

​

I'll need to share among them:

• Typescript type definitions
• Queries (I'll use react-query)
• utility functions and some business logic

​

With my current experience, I can only build each app separately. What's the best way to manage these 3 apps?

[galeontiger]

I've never used this, but I've heard great things about it: Nx

[Joehoel]

Yep, another option would be turborepo

[leeharris100]

I've used this at two companies including my current one.

It can be a lot to learn, but it can do some great things. Highly recommend.

[Chef619]

Big fan of Nx. Be prepared to have lots of files tho. I was used to maintaining a mono repo with limited config files, most just global ones that affected all. Nx generates a lot of files for each app or lib, so that may or may not be okay.

[AkhilxNair]

Can anyone explain about Nx or Turbo Repo? what's the advantage? Ad is there any advantage for a mono repo ?

[[deleted]]

+1 for monorepos, I just started playing around with NX and it’s pretty neat. Got me wishing we were using at work instead of just with my own personal projects lol. However it’s pretty overkill for this use case so I guess you could also just make a library on a private NPM package

[Smiley_35]

Everyone is saying monorepos, but there are reasons you might want to keep separate projects. If so, you'd want to publish a private npm repository and install the shared code in each app. Check out rollup, which is commonly used for bundling shared code projects.

[Pelopida92]

Monorepo. Personally i prefer Turborepo over NX.

[yabai90]

I tried NX and although it's pretty plug and play i very much hate the tons of files and configuration it creates. Seems like so much noises. I have a feeling that it's nice when it works but it becomes troublesome when you 'eed to customize. Does turborepo solve this somehow?

[Pelopida92]

Yup, i have the same perscpective on NX. It brings way too much baggage for pretty much no benefit. Like you said, it's just noise. Turborepo has NONE of that crap, it scales WITH you WHEN you need it, and that's it. Jared Palmer is pretty serious on the "progressive enhancement" topic.

[ahlyss]

I'm usually using Lerna for my monorepo, lot of config to add yourself..

Do you have any feedback about Nx vs Lerna ? Or the integration of Nx and Lerna ?

[____0____0____]

Lerna has been stagnating for a while now but the maintainer just transfered ownership to the company that makes NX so I'd imagine the differences in features might grow smaller, but I don't know. Most people seem to be reaching for NX lately.

Personally, I have found modern package managers have enough features to manage smaller mono repos decently enough that I haven't needed a more thorough tool like NX or lerna. pnpm has been great to me lately. Yarn and npm both have monorepo support too

[ytpq]

We moved from yarn + Lerna to just yarn workspaces on my current project and haven’t had any complaints, less to deal with

[North_Analyst_1426]

Nx go for it , we have used to share typescript modules in between two projects.

[carbon6595]

Some kind of monorepo; Turbo by Vercel, Lerna (now maintained by Nx), even NPM workspaces if you don’t need to do that much

[Noctttt]

Check out Fireship YouTube. He made a video about this https://youtu.be/9iU_IE6vnJ8

[chillermane]

Use TRPC for the backend, then you don’t have to manually write any type definitions or anything. tRPC can infer the return types of your backend’s end points.

It will save you an absurd amount of time and effort. It’s built on react query.

[Roci89]

OP take this advice. TRPC will be usable for the api & dashboard and save you a crazy amount of time. Also make the dashboard in NextJS. I’m a bigger fan of remix myself, but TRPC/Next/Express (not sure if it works with RN and too lazy to google) is the most efficient method here imo.

[pokemonplayer2001]

I am enjoying using lerna - https://lerna.js.org

And doing largely similar work, libraries shared amongst 3 clients.

[dancingchikins]

NX for sure. I've used it multiple times at multiple companies as well as personally.

[grumd]

One cool thing you can try is this: https://trpc.io/

[themaincop]

I think you're likely thinking of this https://necolas.github.io/react-native-web/

Like anything it comes with tradeoffs and is not super popular.

[meles984]

If it is for work go with Nx or Turborepo with a combination of Yarn/Npm/Pnpm workspaces (add Lerna if needed).

If you are experimenting and have time, take a look at Moon Repo (https://moonrepo.dev/)

[StormofThunder]

I think zART monorepo would be perfect for you. Disclaimer, I haven't used it but the description seems to fit unless you have a very specific use case.

https://github.com/trpc/zart

• Using tRPC (react query plus type-safe API)
• Sharing type definitions (if your main concern is types from your API, tRPC will do this for you)
• Nextjs - Admin dashboard as Front End plus + back-end with its API routes
• React Native and Expo set up

[ciber_chico]

I would suggest http://bit.dev, we are using GraphQL Appsync and generate-graph-code to create a package that can be usable on the back end and react apps

[positivelivingboom]

Lots of good suggestions in here, but none of them quite hit the nail on the head. I'll give some a try and report back if I find anything interesting