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.
- Reason 1: Most of our React code is reusable and there's a high chance that we need the same React Component in another project.
- Reason 2: To keep a code uniformity among all of our React Projects.
- Reason 3: An opportunity to contribute to the open-source. We can publish the component, and have others use it as well!
You know how NPM packages are built. Yet, when it comes to publishing the React Component we use in a project, we hesitate.
- Building a new React Component that is publishable on NPM takes a lot of efforts.
- You feel it is not worthy to waste time installing and updating the published package in your project.
- You want your component in your components folder, and when component code is changed, you want your project to "live reload".
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 might need the component for other projects.
- If the component can be useful for other devs out there.
- If your component logic and use-case is not very project-specific.
- Or for the sanity sake, you want your project files to be less cluttered.
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!
Now that you want to publish/deploy/ship your React Component…
- Make sure you have good documentation supporting your code.
- Also, check your version number. If you feel it's all right and working, it's time to publish!
$ npm publish
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.
Comment below your better ways, and suggestions to improve this article. :)