Create and publish your own components with react and gulp

Few months ago I tried to publish my own components to use in different react projects, during my search I found two tools that stood out, Bit and Storybook, at that time I decided to use bit which was easier to configure and use, to a certain extent like that it was, but the moment of truth arrived, to publish my components; certainly bit has documentation that explains how you should configure your project to publish your components according to the language you are using, but in my case, the problem was that bit used third-party libraries to transpile the code from typescript to javascript, for my fortune the library that was supposed to accomplish this process did not work, since the project was abandoned and therefore the code transpilation didn’t complete correctly. So I opted to transpile manually and publish that code, everything was fine, until I realized something, each user who wanted to install the components in their projects, had to log in with bit to be able to use them, this was a trouble, especially when you work under the principles of integration and continuous distribution, for the reason that you has to configure your pipelines (in my case Jenkins) so that they have this access, and on occasions this process for them to log in had problems.

So I decided to try Storybook but it did not convince me at all, it seemed to me that it complicated certain things, it was there that I decided to do the code transpilation process manually and use npm for the publication of the components. The advantage of doing this is that you can have full control of your project, without the need for extra configurations or access problems (unless you publish your component with restricted access).

The principle of the project is simple, you create your component using react, the code is transpiled into javascript and then you publish it in your npm account. Next I will explain in detail how to use the project so that you can publish your own components, in this example I will publish a component called modal.

Basically the project uses the base of any react project using the typescript template.

npx create-react-app reusable-components-react — template typescript

In this case I added some extra files to unit test the components (using Jest) and transpile the code. The structure is simple and consists of three folders components, container and demos.

The container folder is basically the initial screen where we are going to register by means of list items the path to redirect ourselves to each component that we are going to test. It’s important to record the paths in the App.tsx file, otherwise you won’t be able to access your workspace.

import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import { hot } from "react-hot-loader/root";
import ModalDemoLayout from "./demos/ModalDemo";
import { MainSection } from "./container/main";

const Root = () => {
  return (
    <React.StrictMode>
      <BrowserRouter>
        <Switch>
          <Route path="/demo/modal" component={ModalDemoLayout} exact />
          <Route path="/" component={MainSection} exact />
        </Switch>
      </BrowserRouter>
    </React.StrictMode>
  );
};

export default hot(Root);

Just as Storybook presents a graphical interface to be able to visualize the components, here we can organize them in a simpler way, we just have to add the name of the path in which we are going to test our component and select the name of our component to redirect us to our area work or we can enter the route directly in the main.tsx file.

Now comes the part in which we build our components, for this we must be clear that all the components that we want to publish must be in the components folder, as well as consist of the following:

* Index.tsx

* css file (in case you need it)

* Unit test file (not mandatory, but good practice)

* README.md (documentation of the component being created)

The index.tsx file is basically all the code of our component, the name should not be changed, since it is the file that is searched for in each component at the time of code transpilation, the rest of the files can be named as desired since contain css styles and unit tests.

Styles can be applied using two ways, the first is to create a css file to modify the styles of the component elements, or if Material UI is used, makeStyles function can be used, which allows you to create or modify styles but within the same component. Now, the unit test files will not be published together with the component, nor will they prevent it from being published, it is simply a good practice when developing and validating possible errors, thus avoiding having to launch multiple versions to correct something that could have detected with a unit test.

Once we have our components ready, we execute the following command:

npm run build

This command transpiles the code into javascript and generates a directory called lib, which contains all the components that we are going to publish.

Inside the directory we can see an index.js file, which exports all the components for later use in the project in which they are going to be used; you can also observe a package.json, this file basically contains the information to publish the components, including the dependencies necessary to work and the version.

If you wonder how it is possible to generate these files automatically, and not have to register the packages that should be required for your components, the answer is Gulp, if you are not familiar with this library, here is a brief explanation, basically gulp allows us to automate certain processes, by defining tasks, these tasks can execute console commands and code that you need. In this case, it helps us with three tasks: transpiling the code, creating the index.js, and generating the package.json.

To understand this better I am going to explain each task, the first and most important thing is the transpilation of code, this transformation requires a file tsconfig.json in this case it is called lib.tsconfig.json which contains the rules for transpilation, using the next command:

tsc -p lib.tsconfig.json

We can generate the javascript code from typescript, the next thing is to copy the css and md files to each directory, as a result we have the following:

tsc -p lib.tsconfig.json && copyfiles src/components/*/*.css lib/ && copyfiles src/components/*/*.md lib/ && copyfiles README.md lib/src/components

Once our code is ready, an index with all the components must be generated, for that a library called barrel-me is used, which automatically generates a file with all the indexes from a directory.

barrel-me -d lib/src/components/

Finally, the generation of the package.json file, this file is important since without it you cannot publish the components in npm, for this it uses two files, one is in assets/publish_package_template.json and the other is the package. json found in the root; the file in assets contains the information that indicates which is the main file and the tags with which the package to be published will be identified

Now, why do we need the root package.json, since it contains the version with which we are going to publish our package, as well as its name; but above all the dependencies that each component requires to function correctly, this is how the third task is in charge of generating a package.json using two base files, but more importantly it extracts the libraries that each component uses and compares them with the package.json located in the root to list all the necessary dependencies and attach them to the final file.

Understood this we proceed to publish the package in npm using

publish-cmp

If everything has gone well we should be able to see our package published in npm.

The only thing that remains is to install the package in the projects that we want.

You can see the code of project here: https://github.com/ridouku/reusable-components-react

Here is npm library published: https://www.npmjs.com/package/reusable-components-react-demo

And here is a demo with library published in npm: https://github.com/ridouku/reusable-components-react-implementation-demo

Note: You must be careful with libraries versions of you custom components and your projects where you want implement

Questions? Comments? Contact me at ridouku@gmail.com