Using and Publishing NPM Component Packages

Use as you would a normal component created with create-react-app:

Importing

// container app

import { TestComponent, TestComponent2 } from '@veldtdevtest/common';

Dependencies

All dependencies should be installed in the container React App, since no node modules will be imported.

// container app
npm install
npm i @veldtdevtest/common

CSS Modules

Use of css modules will prevent component css from clashing with container application css. Access css properties like this in the component app:

// component app

import styles from './css/styles.module.css';

...

<div className={styles.myStyle}></div>

Fonts

The Satoshi font will be referenced in the Service and Wellness components, so ensure they are imported in the index.css of the container application.

// container app

@font-face {
  font-family: "Satoshi-Variable";
  src: url("../fonts/Satoshi-Variable.woff2") format("woff2"),
    url("../fonts/Satoshi-Variable.woff") format("woff"),
    url("../fonts/Satoshi-Variable.ttf") format("truetype");
  font-weight: 300 900;
  font-display: swap;
  font-style: normal;
}

Images

Images should be accessed through the /src/images.js file and imported into the component directly, not through a css file.

// component app

import { images } from './images';

...

<img src={images.imageName} />

Publishing to NPM

The script will build the files in /dist.

The only files distributed will be those in /src/components.

Add components as exports to the /src/components/index.js.

If private adjust the package.json

// component app

"private": true

Increment the version number in package.json or reset if you've been testing locally and the version increment is off.

Update types:

patch 0.1.33 > 0.1.34

minor 0.1.33 > 0.2.0

major 0.1.33 > 1.0.0

npm login

npm version <update type>

npm run publish:npm

npm publish

If public:

npm publish --access public

Note: --access=public is needed for scoped packages (@veldt/mypackage) as they're private by default. If it's not scoped and doesn't have the private field set to true in the package.json, it will be public as well.

Check what will be published before publishing

npm publish --dry-run

Choosing a component version

Be sure to remove the ^ from the version number in package.json

// container app

"@veldtdevtest/common": "0.1.33",

Reinstall

// container app

npm install

NPM Component Setup

Files to add

.npmignore

// component app

node_modules/

public/

src/**/*

.index.d.ts

// component app

declare module '@veldtdevtest/common';

/src/components/index.js

// component app

export { default as TestComponent } from './TestComponent';

/src/components/images.js

// component app

import kv from './images/kv.webp';

export const images = { kv }

Dependencies to install

// component app

npm i --save-dev @babel/cli @babel/preset-react

May need this to quiet a warning

// component app

npm i @babel/plugin-proposal-private-property-in-object

package.json script

// component app

"publish:npm": "rm -rf dist && mkdir dist &&  babel src/components -d dist --copy-files"

Other package.json settings

// component app

"name": "@veldtdevtest/common",
"version": "0.1.33",
"private": false,
"main": "dist/index.js",
"files": [
    "dist/**/*"
  ],
"babel": {
  "presets":[
    "@babel/preset-react"
    ]
  },

Notes on "name"

"name": "@veldtdevtest/common",

Creates this folder structure in node_modules:

@veldtdevtest/common/dist/

Maybe use this for the real repo

"name": "@veldt/deservice",

Local Testing in Container

Commit any changes, then in component app:

npm run localtest

This will create a .tgz file on your Desktop.

In the container app update the version to the one on the Desktop:

"dependencies": {
  "@veldtdevtest/common": "file:~/Desktop/veldtdevtest-common-1.1.0.tgz"
}

Install:

npm install