React developers use similar component code day in and day out. But not all of them streamline the React Component building and publishing workflow. Before we discuss the building and publishing workflow, here's why we need to have it.
You know how NPM packages are built. Yet, when it comes to publishing the React Component we use in a project, we hesitate.
I used to create a new Git Repository.
Then setup all the babel and webpack stuff.
Then I would write the React Component code.
Then I would compile it manually and publish it to npm using
To test the React Component, I would manually install the component in my project directory using
npm i -S that-react-component. That had no "Live Reload"…
I had to update the package in the Component Repository and Update the module back in my project.
How shitty that procedure was. I knew it was shitty. So, I stopped open sourcing React Components. I let them lie in my Project Directories. If I would need a component, I copy-pasted the component files to another project. And that went on. Until I learned about…
I was just strolling through the GitHub search box typing weird stuff, and then I found
So, every time you know you are building a component for the ongoing project, think…
If you see any of those reasons valid, you should consider building the component as a reusable component that is packaged as a module.
If yes, then move to Step 2.
Visit the master folder where you store all your projects via terminal and run the following 👇
npx create-react-library <COMPONENT_NAME> # then answer few basic prompts cd <COMPONENT_NAME> # enter in that directory
And voila! You got your React Component Boilerplate Code setup.
Do the following in the terminal 👇
npm i # this will install your component modules cd example && npm i # install CRA modules npm start
Running above commands will install the modules that your React Component and Create React App Example will need.
Let us browse the file structure of the project.
project │ README.md │ package.json | ... │ └───example │ │ package.json │ │ ... │ └───src │ package.json │ ...
Now, anytime you make a change to your library in
src/ or to the example app's
create-react-app will live-reload your local dev server so you can iterate on your component in real-time!
Well, what if you want the component to work live with your ongoing project without having to update and publish on npm?
npm link comes for the rescue!
In your the root of your component directory, run
$ npm link. That makes your component available globally to all projects!
Now via terminal, reach the ongoing project directory, and run
$ npm link <COMPONENT_NAME>.
That is it. You have connected both the worlds!
Let both of your component directory and ongoing project watch and compile the code live.
It's time to use the component in your project! You can import and use the component in a normal way.
import ThatAwesomeComponent from "<COMPONENT_NAME>"
Now when you update your component code and refresh your project in the browser, you'll see things come alive!
Go! Try that yourself!
Now that you want to publish/deploy/ship your React Component…
That is it. Your files will be built and published on NPM Registry!
If you want your build to be less bloated, publish the component with the following
# it is also configured for TypeScript Components src example .vscode .eslintrc .prettierrc package-lock.json tsconfig.json tsconfig.test.json .gitignore node_modules .travis.yml rollup.config.js
Do not forget to
npm unlink the component from your ongoing project directory so that you can use the "real" and "published" component. When do develop the component, you may link it again.
To unlink, do
$ npm unlink <COMPONENT_NAME> from the project directory.
React components can be more awesome if built and published the right way.
Discuss on Twitter ﹒ Edit this article ﹒ Connect with me on Discord