Adventures in creating a React component library with Create React App and TypeScript Stokedbits Follow Nov 25, 2017 · 8 min read

I’ve recently been working on a project that has the main objective of being a React component library. There are tons of great articles of how to do this by ejecting a Create React App (CRA) project and customizing it a bit to do whatever one may want. However, I couldn’t quite seem to find anything that would match the criteria of what I felt was needed to meet my objectives.

The component library that I’m working on is to be consumed by another CRA project. Unlike the base CRA setup, it also needed to support TypeScript, SCSS, Bootstrap 4 as a baseline, and include a reference site to demonstrate the components. Again, this wouldn’t be that crazy to accomplish if one were to use the eject functionality of CRA and tweak all that functionality into place. In this case, it seemed like a better approach to not eject the app and see how easy it would be to roll in the desired functionality, while also retaining the ease of use of CRA.

After scouring the internet trying to find any sorta article that might have guidance on how to accomplish this objective, I couldn’t find anything that really pieced it all together. So, I’m hoping by writing this all out I can help others and get some constructive feedback to perfect the approach in which will be demonstrated.

This will be written with the assumption that the developer utilizing these instructions has basic working knowledge of the NodeJS ecosystem and experience in front end development with React and CRA. Although that being said, everything here should be pretty easy to follow and if you have any questions just hit me up 🤓.