Package and Distribute Your Own React-Component created by Create-React-App!
This post is about how to package a react component created by create-react-app, also called CRA. If you have used Node.js or React, you probably have installed some 3rd party packages by running “npm install ${module name}”. Now it is your turn to share yours with others.
I will explain how to package a react component by building and packaging an actual production-ready component that I named “loading-circles” into my npm repository, @tofusoup429. The loading-circles package renders spinning circle that look like the picture below. I guess you must have encountered with these circles hundreds of times on internet.
I have made the name plural because the circles can be customizable by varying props. It can have texts under the circle and have its various option for colors. The component itself is very simple to build but is widely used almost every web application so I think it is the best fit for tutorial purposes.
1. What is the benefits of doing this?
- It will save you a lot of time of coding the same components for many different projects. Remember the essence of React component is its reusablility.
- It is easy to share or show off my works with other developers while making a little bit of contributions to the open-source world.
2. How do I do it?
- First, use “create-react-app” to create a react App.
- After removing all the files inside the src folder except for App.js and index.js, create a folder naming “lib” in the folder. It is the folder that holds a react component to be compiled by babel into the dist folder. The project structure should looks like the picture below. Note that dist folder has not been created yet. It is to be generated by running command “npm run distribute”. It is not ready to generate it yet. You will see it later in this post.
- Now I have the structure. I should write some code for a component inside the lib folder. As the project name implies and I told earlier this post, I will make a simple circular spinning loader that can have various colors with text under the loader on user’s choice.
- I took CircularProgress from @material-ui and wrapped it with styled-component in order to place the loading circle into the center of screen. Currently, as of the version of 1.0.0, the LoadingCircle component takes only two props, color and text. I will upgrade the package so that the circle will be able to take more props as its version goes up.
- Now include the loading-circles into the App.js. Let’s test if the code works by running “ npm run start”.
- It works as I intended. Good!! Our goal is to package the component so other developers like you and I can easily deploy the component into our application by running “npm install”.
- Up to this point, it is pretty straightforward and similar to processes of making a regular react component. I would call this a preparation phase. From now on, it is the real phase of packaging. So focus!!
- I need to make some adjustments to package.json file. First, I have to add distribute script. Add “distribute” script to scripts object inside the “package.json”. I removed other unnecessary script like “build” or “eject”, but it does not matter leaving them there. And set babel object. The package.json file should look like this after this.
- The setting of babel object compiles the component in the src/lib folder into JSX format like the code below after running “npm run distribute”. If I run “npm run distribute” command, it automatically generates the dist folder and furnish compiled code inside the folder.
- The second adjustments to the package.json might be somehow trivial. I added name, version, descriptions and license of the package. Also set private: “false” unless I want to make it private. To activate the private option, I need to pay $5 a month. By the way, I usually use @tofusoup429 for prefix to avoid name conflicts with other packages by other developers.
- Next, I should handle dependencies setting. It is quite important because I do not want to ruin entire application with version conflicts among its dependencies. For example, the loading-circles package uses @material-ui/core@4.9.1. Image a developer installs the loading-circles into his or her application employing a different version of @material-ui/core, which is not compatible with 4.9.1 version. The version conflicts may cause irrecoverable damage to the application. To avoid this situation, it is safer to put all the dependencies under the peerDependencies or devDependencies. Then, even if the developer installs loading-circles into his or her own project that uses incompatible version of @material-ui/core, it does not cause any problems because it does not automatically install the conflicting version of it but it just gives a warning message. In short, move all the dependencies to either peerDependencies or devDependencies to prevent npm from automatically installing conflicting version of dependencies.
- Make “.npmignore” file. It is like “.gitignore” file. Write filenames that is not going to be packaged. Missing this will cause npm to publish entire project including files in the public folder etc, unnecessary ones. The only file that I want to publish is the compiled version of “loading-circles.js” inside the dist folder.
- Now run command “npm run distribute”. Then it runs babel to compile the file under src/lib and put it to under dist. The compiled file looks like the one below. I have shown you earlier in this post, but I am showing you again.
- Now I need to login to npm. If you do not have an account, you can create an new account here. Login can be done by running “npm login”. As long as you do not need private packages, it is free.
- Finally, the final command, “npm publish”, publish the package. To be exact, it will publish the file inside the dist folder. If it succeeds, you can see messages like the one below.
- Now we can install the package by “npm install @tofusoup429/loading-circles” in the other project.
- Please remind that npm install @tofusoup429/loading-circles does not install the dependencies of the loading-circles like material-ui or styled-components automatically. If the dependencies are not installed or version is different in your application, npm only gives warnings. It is up to us, humans, to install the dependencies considering version conflict. Warning messages are something like the picture below.
- I installed the package into my different application. You can see the loading component at https://www.tofusoup429.com/medium-writing/loading-circles.
- I am planning to update the package with some other props like shape of circles and more animation, etc later.
- This is it. Thanks for reading. If you have comments or question or If you found something wrong in the post, please let me know.
