How To Setup Environment For Developing React Components

And publish them as npm package

In this article I’m gonna:

• Introduce my particular environment I am using for development of React components
• Show how to publish component as npm package

But first…

Before we dive into it. Let’s take a look at why we are not using create-react-app or similar boilerplate generator. While create-react-app provides a fast and comfortable way to get our app up and running. It’s not what we need right now. We don’t want to publish our Component as a web application. We want to publish it as a file that anyone can use by simply importing it. In other words. Our output should be a javascript file containing code that runs our component. Now let’s tackle all the challenges step by step!

For lazy readers

I get it. Not everyone is interested in reading the entire article. If you want to check out the final version, here is GitHub repo!

Setting up a development environment

As I mentioned we need the environment to test if our components are working properly. There are multiple approaches on how to solve this issue. In our case, we will use storybook.

Storybook for React is a UI development environment for your React components. With it, you can visualize different states of your UI components and develop them interactively.

Sounds like our kind of tool, doesn’t it? Let’s go ahead and create our project directory. And install all the dependencies needed.

mkdir react-component-dev-env
cd react-component-dev-env
npm init

To simplify things press enter until you get rid of the terminal prompt. Now install dependencies and configure storybook.

npx -p @storybook/cli sb init
npm install -D @babel/cli babel-preset-minify

And that’s it for our dependencies. One thing that seems odd is that we didn’t install React. It’s because since we are writing React component. We expect users to have already React installed. We can do this by adding peerDependencies into our package.json. And the result will look like this. I know we installed a bunch of things and it may seem confusing for now, but trust me. It will all make sense as you’ll continue reading.

Time to write the Component. Now since this is tutorial on how to set up the environment we’ll create a very simple component. Inside src create index.js file looking like this

In the same directory create style.css

Our component is ready. Now let’s test it by writing a story for it. Open index.stories.js in stories directory. And write a story for it. We’re gonna import React obviously. We’ll use storiesOf helper function that adds a story into our storybook instance. And lastly, we’re gonna import our Component.

Let’s go ahead and test it by running the command below.

npm run storybook

You should see the following screen. Now if we change our component our changes will be immediately reflected in the storybook. Set up the development environment? Check!

Publish component as npm package

Publishing the component is as simple as running npm publish but we’ll need to make sure we’re publishing necessary files only. We don’t want stories and other files or directories to be published. We can achieve this by adding file .npmignore into root directory of our project. And specifying all the files we want to be ignored when publishing. It can look something like this

You may be asking what we are going to publish after all and I’ll reveal it right now. We want to take whole src directory. Transpile it, minify it and save the output in dist directory. And we’re gonna use babel to do that for us. You should remember. We installed it like 3 minutes ago. To configure babel. We need to create a file called .babelrc inside root directory. You can read more about presets here!

Transpiling our code is now very simple. The command is saying to take the whole src directory, transpile it and put the output into dist directory. Also copy file assets, like css or images.

babel src -d dist --copy-files

We want to do this operation before we publish the package so we’ll make use of prepublishOnly script which does exactly that. We already have it in our package.json but for the sake of not scrolling here, it is.

And now we are ready to publish. You’ll obviously need npm account for this. If you don’t have one you can create it for free. After your account is created run npm login inside the project directory. Log in with your credentials and run npm publish . As this command is running it will execute prepublishOnly script which will create dist with index.js and index.css . Let’s look at the package.json one more time. See how we specify main to point out to dist/index.js ? That’s our way of saying. If you import this package, this is the file you’ll get.

That’s it!

We made it! We configure our environment. Wrote a simple component. And published it as a package. Now I know it was very simple and no one is going to use it anyway. But I wanted to show this set up before actually developing the components itself. Which will be in the next article!

Thanks for your attention. If you liked the story and you learned something new let the world know by clapping. If you want to see more hit the “Follow” button. I’m creating tutorials like this every week. If you’re not familiar with react, I have a series of tutorials to get you started. You can check them out here https://medium.com/@bernardbad. Thanks for your attention again and see you next time.