I don't see how this is creating a library of components. For example, if you use Create-React-App like you suggest, the 'yarn build' command makes a deployable bundle of the entire application, not something you could deploy to the NPM registry and pull in and use in another application (such as one itself built with CRA).
Am I missing something, or perhaps not taking "library" to mean the same thing that you are?
I've got existing applications that share copies of the same components. I want to package these common components up as something that each application could list as a dependency in package.json instead of doing a copy/paste. I'm using SCSS in the way you show here (importing), but I just don't see any means to actually make a library of components from what you have here.
Great question! :) You are absolutely right that building the package with yarn build will result an application instead of package. The focus in here is more to show power of different tools when developing the common components. Creating a package would be probably a good topic for an article but here couple of main points:
The package is just one directory inside node_modules which can be imported from the application the way you please. This means that in a simplest form you don't have to do any builds because that's a job for the application which consumes the package. Usually some preparation is still done so that imports don't look like following and correct packages are also installed when consuming the package.
import Button from 'library/src/components/Button/Button'
Now this is where the personal preferences comes to play since there are a lot of tools and ways to achieve the same results. If you are looking any tools to build cjs, esm or umd files for a package I would suggest to try rollup.js. Note that SASS won't be needed to build at this point because that's the job for the application who consumes the common library.
Hi Aki,
Thanks for all this information. I've created a component library like you mentioned. I've tried and use create-react-library to package. I've a theme.scss file which takes in other files like colors.scss, dimensions.scss, fonts.scss etc. These files have respective scss variables lile $primaryColor, $primaryPadding etc.
When I publish the package, I'm able to import controls in consumer app, like
import Button from 'component-repo';
However, I'm only able to see a compiled version of scss files, as just one css file.
I would like these variables to be updated by consuming application. The package I mentioned earlier uses rollup. Is there a way not to compile scss variables, and keep it as it is, and thereby making the component library actually useful. Any sort of help is well appreciated.
With the help of Aki, I was able to solve this issue. I've tried to put together the content in a stack overflow answer, over here. stackoverflow.com/a/66670203/11027191
Many thanks for your support Aki :-)
I don't see how this is creating a library of components. For example, if you use Create-React-App like you suggest, the 'yarn build' command makes a deployable bundle of the entire application, not something you could deploy to the NPM registry and pull in and use in another application (such as one itself built with CRA).
Am I missing something, or perhaps not taking "library" to mean the same thing that you are?
I've got existing applications that share copies of the same components. I want to package these common components up as something that each application could list as a dependency in package.json instead of doing a copy/paste. I'm using SCSS in the way you show here (importing), but I just don't see any means to actually make a library of components from what you have here.
Any help would be appreciated. Thanks.
Great question! :) You are absolutely right that building the package with yarn build will result an application instead of package. The focus in here is more to show power of different tools when developing the common components. Creating a package would be probably a good topic for an article but here couple of main points:
The package is just one directory inside node_modules which can be imported from the application the way you please. This means that in a simplest form you don't have to do any builds because that's a job for the application which consumes the package. Usually some preparation is still done so that imports don't look like following and correct packages are also installed when consuming the package.
Now this is where the personal preferences comes to play since there are a lot of tools and ways to achieve the same results. If you are looking any tools to build cjs, esm or umd files for a package I would suggest to try rollup.js. Note that SASS won't be needed to build at this point because that's the job for the application who consumes the common library.
For configuring the package.json file, I would suggest to look this Creating your first npm package .
Hopefully these helped :)
Hi Aki,
Thanks for all this information. I've created a component library like you mentioned. I've tried and use create-react-library to package. I've a theme.scss file which takes in other files like colors.scss, dimensions.scss, fonts.scss etc. These files have respective scss variables lile $primaryColor, $primaryPadding etc.
When I publish the package, I'm able to import controls in consumer app, like
import Button from 'component-repo';
However, I'm only able to see a compiled version of scss files, as just one css file.
I would like these variables to be updated by consuming application. The package I mentioned earlier uses rollup. Is there a way not to compile scss variables, and keep it as it is, and thereby making the component library actually useful. Any sort of help is well appreciated.
With the help of Aki, I was able to solve this issue. I've tried to put together the content in a stack overflow answer, over here.
stackoverflow.com/a/66670203/11027191
Many thanks for your support Aki :-)
Thanks :) And superb that you wrote about it since I'm pretty sure that you are not the only having the same struggle.