Creating my personal business card
Tags: npm, package, npx, businesscard
Published: 2020-02-05 16:20:49

---
title: Creating my personal business card
published: true
description: 
tags: npm, package, npx, businesscard
---
Why to have a normal and boring business card when you can have a npm package instead?

I didn't know about his until this morning even if quite famous in the dev world.

{% twitter 1201120725517717504 %}

# Create the `npm` account

Since I am going to publish a `npm package`, I need a npm account on https://www.npmjs.com/.

# Fork and edit the npm card

I don't like reinventing the wheel when not necessary. This repository contains the code to create my business card: https://github.com/bnb/bitandbang

First, I fork the repository

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0jxxfxztiv20ug3axcvs.png)

Now I clone the forked repository https://github.com/rossanodan/rossanodan-card (note I changed the repo's name) to edit some lines of code.

```
git clone https://github.com/rossanodan/rossanodan-card.git
cd rossanodan-card
npm install
```

I edit the `build.js` file replacing existing information my own.

```javascript
...
const data = {
  name: chalk.white("               Rossano D'Angelo"),
  handle: chalk.white('rossanodan'),
  work: chalk.white('Front End Developer at IBM'),
  twitter: chalk.gray('https://twitter.com/') + chalk.cyan('rossanodan'),
  npm: chalk.gray('https://npmjs.com/') + chalk.red('~rossanodan'),
  github: chalk.gray('https://github.com/') + chalk.green('rossanodan'),
  linkedin: chalk.gray('https://linkedin.com/in/') + chalk.blue('rossanodan'),
  web: chalk.cyan('https://dev.to/rossanodan'),
  npx: chalk.red('npx') + ' ' + chalk.white('@rossanodan/card  (via GitHub Package Registry)'),
  labelWork: chalk.white.bold('       Work:'),
  labelTwitter: chalk.white.bold('    Twitter:'),
  labelnpm: chalk.white.bold('        npm:'),
  labelGitHub: chalk.white.bold('     GitHub:'),
  labelLinkedIn: chalk.white.bold('   LinkedIn:'),
  labelWeb: chalk.white.bold('        Web:'),
  labelCard: chalk.white.bold('       Card:')
}
```

To see a quick preview I run `npm run dev`

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wd7g0fo6uklodd3q7aft.png)

![It works!](https://media.giphy.com/media/l0Iy8hquHU5npwMCs/giphy.gif)

# Update the `package.json`

The `package.json` file is a kind of identification document for npm packages. So I need to update mine.

```json
{
  "name": "rossanodan-card",
  "version": "1.0.0",
  "description": "A personal card for Rossano D'Angelo (@rossanodan)",
  "main": "/bin/card.js",
  "bin": {
    "rossanodan": "./bin/card.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/rossanodan/rossanodan-card.git"
  },
  "homepage": "https://dev.to/rossanodan",
  "scripts": {
    "prepublish": "npm run build",
    "build": "node build.js",
    "dev": "npm run build && node ./bin/card.js",
    "lint": "standard",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "card",
    "npm",
    "npm card",
    "npx",
    "npx card",
    "business card"
  ],
  "author": "Rossano D'Angelo <dangelo.rossano.94@gmail.com> (https://dev.to/rossanodan)",
  "license": "MIT",
  "files": [
    "bin/card.js",
    "bin/output"
  ],
  "devDependencies": {
    "boxen": "^2.1.0",
    "chalk": "^2.4.1",
    "standard": "^12.0.1"
  },
  "dependencies": {}
}
```

# Create `.npmrc` file

To publish the npm package I need to create a token for the authentication. The token can be generated in the `Auth Tokens` section.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/slcblzxlsh2ianbuvcas.png)

I export the `NPM_TOKEN` executing

```
export NPM_TOKEN=XXXXXXXXXXXXXXXXXX // use your token here
```

Finally, I create a new file in the root folder of the project: `.npmrc`

```
//registry.npmjs.org/:_authToken=${NPM_TOKEN}
```

# Push changes and publish

I save everything and, once pushed changes to my repository, I run

```
npm version minor
npm publish
```

The first command creates the version of the package and the second publishes it.

To verify the package has been published, I check my npm `Packages` section

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4v2eco9qva2zz56tt0td.png)

# Usage

I am ready to go!

```
npx rossanodan-card
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dyfkz704pk64727sr8zo.png)