DEV Community

Cover image for Building and Publishing a React Component with Vite and NPM
Samuel Peters
Samuel Peters

Posted on • Updated on

Building and Publishing a React Component with Vite and NPM

React has become one of the most popular front-end frameworks due to its component-based architecture, and with the ease of sharing packages through Npm, building and sharing your own React components has never been easier.
In this guide, we'll walk you through the steps of building your own React component from scratch, using the Vite-React framework to streamline the process. We'll cover everything from setting up your development environment to publishing your component on NPM, ensuring that it is both functional and accessible for other developers to use.

Prerequisites

Here are some prerequisites you need to have before diving into building a React component with Vite and publishing it on npm:

  • Basic knowledge of React, JavaScript, and NPM.

  • Node.js installed on your machine.

  • An N.P.M account to publish your package.

  • A GitHub Account for Hosting your Hosting your code repository

Getting Started

To get started, we'll create a new React project using Vite. Vite is a build tool that is optimized for frontend development, and it provides a fast and easy way to set up a new React project.
First, let's create a new directory for our project and navigate to it in the terminal.

  • First Step is to initialize the Vite-React package in our project directory by running the following command:
yarn create Vite react-library-scaffold 
Enter fullscreen mode Exit fullscreen mode

follow the prompt using the arrow key to navigate to react and javascript

Image description

  • Next navigate to the newly created Folder and run the yarn to install the react dependencies

Image description

On completion your file structure should look like this
Image description

  • Next step is to add more information to the package.Json file and modify our vite.config.js files open your terminal and type npm init and enter the name of the library, descriptions, authors ... the new code block should look like this.
{
  "name": "react-library-scafold",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react": "^4.0.0",
    "eslint": "^8.38.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "vite": "^4.3.2"
  },
  "description": "A react-Library-Scaffold",
  "main": "vite.config.js",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Petsamuel/react-library-scaffold.git"
  },
  "keywords": [
    "react",
    "components"
  ],
  "author": "Peter Samuel",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/Petsamuel/react-library-scaffold/issues"
  },
  "homepage": "https://github.com/Petsamuel/react-library-scaffold#readme"
}
Enter fullscreen mode Exit fullscreen mode

Add this Block code to your Package.json
it's basically specifying where the build folder needed for the component should be stored.

 "main": "./dist/react-library-scaffold.umd.js",
  "module": "./dist/react-library-scaffold.es.js",
  "exports": {
    ".": {
      "import": "./dist/react-library-scaffold.es.js",
      "require": "./dist/react-library-scaffold.umd.js"
    }
  },
Enter fullscreen mode Exit fullscreen mode
  • Next step is to install test dependencies vite, react-test-renderer
npm install @testing-library/dom @testing-library/react c8 eslint eslint-plugin-react jsdom react-test-renderer vitest --save-dev

Enter fullscreen mode Exit fullscreen mode

then add the test script to your package.json file
Image description

  • Next step is configuring the Vite.config.jsx file

add this block of code there

import path from 'path'
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  build: {
    lib: {
      entry: path.resolve("src", 'src/components/index.jsx'),
      name: 'react-library-scaffold',
      fileName: (format) => `react-library-scaffold.${format}.js`
    },
    rollupOptions: {
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React'
        }
      }
    }
  },
  plugins: [react()]
})
Enter fullscreen mode Exit fullscreen mode

Make sure you replace name: 'react-library-scaffold' with the name of your component

Likewise, make sure that react-library-scaffold in the filename value is changed to the name of your component

Configure Testing

create a vitest.config.js file in your root folder and add the following code

import { defineConfig } from 'vite'

export default defineConfig({
  test: {
    globals: false,
    environment: 'jsdom'
  }
})
Enter fullscreen mode Exit fullscreen mode

Creating Components along with Tests Snapshots

The entrypoint for your component is /src/components/index.jsx.

For now you we want to create a dummy HelloWorld component as in the examples below, then once the development environment is set up, come back and build your component.

  • Create your component in /src/component/index.jsx. Here's a very simple example:
import React from 'react'

export default function Greeting(props) {
  const {
    message= 'World'
  } = props

  return (
    <div>Hello, {greeting}!</div>
  )
}
Enter fullscreen mode Exit fullscreen mode
  • Add test
import React from 'react'
import renderer from 'react-test-renderer'
import { describe, expect, it} from 'vitest'
import Greeting from './index'

describe('Greeting component', () => {
  it('Greeting component renders correctly', () => {
    const component = renderer.create(
      <Greeting/>
    )

    const tree = component.toJSON()

    expect(tree).toMatchSnapshot()
  })

  it(' prop working', () => {
    const component = renderer.create(
      <Greeting message={'Universe'} />
    )

    const tree = component.toJSON()

    expect(tree).toMatchSnapshot()
  })
})
Enter fullscreen mode Exit fullscreen mode

You can run your tests by typing:

npm test
or Yarn test
Enter fullscreen mode Exit fullscreen mode

Or you can run tests and set a watch to re-run tests when anything changes.

 npm run watch
or yarn watch
Enter fullscreen mode Exit fullscreen mode

now open the main.jsx and create a component
sample code

import React from 'react'
import Greeting from './components'

const App = () => {
  return (
    <Greeting message={'Universe'} />
  )
}

export default App
Enter fullscreen mode Exit fullscreen mode

now run the development server using
yarn dev

Writing a Customized Readme

To make it easy for other developers to use your component, it's crucial to create a high-quality README file that contains comprehensive documentation, usage examples, and highlights the features and advantages of using your component.

Open /src/README.md

Create your README file using markdown.

Pushing to a GitHub repository:

  • Create a new repository on GitHub.
  • Initialize a Git repository in your project folder using git init.
  • Add all files to the repository using git add ..
  • Commit your changes using git commit -m "Initial commit".
  • Set the remote origin to your GitHub repository using git remote add origin <repository-url>.
  • Push your code to the repository using git push -u origin main.

Publishing to npm

We are finally ready to publish our component to npm.

To ensure a smooth publishing process, it is important to follow this checklist:

Verify that the version number in your package.json file is accurate and adheres to the semantic versioning convention. Each npm publication should have a unique version number.

Ensure all tests pass:

npm test
Enter fullscreen mode Exit fullscreen mode

Create the build files:

npm run build
Enter fullscreen mode Exit fullscreen mode

Both UMD and ESM module formats are created and placed in the /dist folder. Again, note that React is not bundled in alongside your component. Just your component code and any dependencies.

Ensure you are logged into npm. If not type:

 yarn login
Enter fullscreen mode Exit fullscreen mode

Publish your component

 yarn publish
Enter fullscreen mode Exit fullscreen mode

And all done!
All the code in this guide is available in the repository on Github.

Top comments (3)

Collapse
 
ajit_stephen profile image
AJIT T STEPHEN

I think you forgot to push your completed work to github

Collapse
 
bieefilled profile image
Samuel Peters

Thanks for the feedback.

Collapse
 
zohair636 profile image
Hafiz Muhammad Zohair Ajmal

include: /.{test,spec}.?(c|m)[jt]s?(x)
exclude: *
/node_modules/
, /dist/, /cypress/, /.{idea,git,cache,output,temp}/, /{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build,eslint,prettier}.config.*
watch exclude: **/node_modules/
, /dist/

No test files found, exiting with code 1

Hi, Brother When I run the test I got this error. How to solve it?