How to create react app as a service/package and import it into 'package.json' of another app

user_3221094 0
Viewed 93

enter image description here .

Hi currently i m working in a monorepo application in react.

What i need is to extract some of its 'components' & 'styling' and create separate modules/packages that live outside of the main project, and import them into package.json like normal modules.

initial file structure and future proposal structure:

 myMainproject:
 
    \src
      \components
        component-styles.scss
        \button
        \label
        \list
        \item
        .......
      \modules
        \calendar
        \header
        \footer
        \support
      .....
      package.json
      ....
      
 
 // I extract calendar, footer modules 
 
 calendarService:
 
     \src
      \components
        component-styles.scss
        \button
        \label
        \list
        \item
        .......
      \modules
        \calendar
      .....
      package.json
      ....
      
      
 footerService:
 
     \src
      \components
        component-styles.scss
        \button
        \label
        \list
        \item
        .......
      \modules
        \footer
      .....
      package.json
      ....
      
 
 // Extract style and create a separate service
 
 styleService
      \src
        \styles
         .....
      package.json
      ....
      
      

final 'package.json' of 'myMainproject':

  ......
  "dependencies": {
      "calendarService": ...,
      "footerService": .... ,
      "styleService": ...,
      .....
  }

Do you have any ideas, not only technical but architectural also, or any doc to achieve that ?

redux reactjs css html javascript
2 Answers

Try to use Yarn workspaces, docs here

user_71458550

As per the design, for each of the React Module (Calendar, footer and style) that you want to create you'll also need to add an index.js file to the structure. You can name the file whatever you want. This is the file that will get executed when your module will get required.

You'll just have to export your components from the index.js file. In the package.json file of the separate React modules, you'll have to indicate the JS file that you want to execute when that module is required or imported. You do this by providing the name of the file for the main field in package.json

user_14785880
Related