DEV Community

Cover image for Build and deploy to NPM your React component with Neutrino.js - Little Bits
Maciek Grzybek
Maciek Grzybek

Posted on • Updated on

Build and deploy to NPM your React component with Neutrino.js - Little Bits

Little Bits is a series of short articles explaining quick solutions to common dev problems. No unnecessary descriptions or code snippets. No bullshit.

In this short article, I want to show you how you can easily set up your dev environment for building React component and then how you can deploy it to NPM so other developers can start using it.

Useful links:

Plan

  1. Create a project - yarn or npx
  2. Build a component or use the default one
  3. Run build
  4. Prepare package.json file
  5. Deploy to NPM

1. Create a project - yarn or npx

yarn create @neutrinojs/project my-not-really-exciting-component
Enter fullscreen mode Exit fullscreen mode

or

npx @neutrinojs/create-project my-not-really-exciting-component
Enter fullscreen mode Exit fullscreen mode

After that Neutrino will ask you about your project. Select Components -> React components. In the next step choose the testing library (I usually go for Jest) and linting style (Airbnb or StandardJS). Neutrino will install all the dependencies and set up the boilerplate.

2. Build a component or use the default one

Neutrino supplies us with a simple HelloWorld component. We will use it in this step, but obviously, in a real-world scenario, build something awesome.
TIP: Add readme.md file with directions for installing, configuring, and using your code.
To run the dev environment run:

yarn start
Enter fullscreen mode Exit fullscreen mode

or

npm start
Enter fullscreen mode Exit fullscreen mode

That will open localhost:5000 with your project.

3. Run build

If you're happy with your component run:

yarn run build
Enter fullscreen mode Exit fullscreen mode

or

npm run build
Enter fullscreen mode Exit fullscreen mode

Your project is optimized and ready for production.

4. Prepare package.json file

Before deploying our super component, we need to add some details to package.json. Here's a sample, minimal configuration:

{
  "name": "my-not-really-exciting-component",
  "version": "1.0.0",
  "description": "My component, not really exicitng.",
  "main": "build/HelloWorld.js",
  "author": "Your Name <your_email@gmail.com>",
  "repository": {
    "type" : "git",
    "url" : "https://github.com/yourprofile/my-not-really-exciting-component"
  },
 "keywords": [
    "react",
    "javascript",
    "component"
  ],
  "license": "MIT",
  "scripts": {
    "build": "neutrino build",
    "start": "neutrino start",
    "lint": "neutrino lint",
    "test": "neutrino test"
  },
  "devDependencies": {
    "@neutrinojs/airbnb": "^8.3.0",
    "@neutrinojs/jest": "^8.3.0",
    "@neutrinojs/react-components": "^8.3.0",
    "neutrino": "^8.3.0",
    "prop-types": "^15.7.2",
    "react": "^16.9.0",
    "react-dom": "^16.9.0"
  }
}

Enter fullscreen mode Exit fullscreen mode

5. Deploy to NPM

Create an account on npm. After that, from your terminal simply run:

npm publish
Enter fullscreen mode Exit fullscreen mode

Summary

That's it, you've managed to successfully deploy your react component to the NPM registry. Now anyone else can start using it in their projects and you just need to prepare for all the dev fame coming your way 😎.

Top comments (0)