react.js desktop and mobile web project architecture

Question

I have really big concern on my web project architecture which will have separate mobile and desktop web app.

I already finished to develop web version based on "create-react-app" project template and for mobile version, I want to reuse my exists web version component as much as possible.

We will serve these with separate url "www" for desktop and "m" for mobile.

I am thinking of two possible ways.

1. Just build another create-react-app project for mobile and share the common code.
2. In exists web client create-react-app project src folder, make mobile version codes like component.js component.web.js component.mobile.js. But in this case I am worrying about the size of bundle js file.

I also thought about the responsive web design, but we have totally different layout and components.

Rendering two different layout within a component by the size of viewport or url(www/m) might be another possible way but it is highly possible for me to use server-side-rendering...

What would be the good approach to solve this problem....

Answer 1

I would approach this as follows:-

1. Move all business logic to a common package and use it in both mobile and web. This would make your logic common.
2. Move all the common components/config/colors etc. to a common package and use them in both the apps.

3. Handle view part for both the apps separately.

   I also thought about the responsive web design, but we have totally different layout and components.

   If you have totally different layout and components I would suggest to keep mobile and web segregated. Its not only about the bundle size, you can get around it by lazy loading, but your code complexity can increase.