DEV Community

Rossano D'Angelo
Rossano D'Angelo

Posted on

Creating my personal business card

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.

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

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
Enter fullscreen mode Exit fullscreen mode

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

...
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:')
}
Enter fullscreen mode Exit fullscreen mode

To see a quick preview I run npm run dev

Alt Text

It works!

Update the package.json

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

{
  "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": {}
}
Enter fullscreen mode Exit fullscreen mode

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

I export the NPM_TOKEN executing

export NPM_TOKEN=XXXXXXXXXXXXXXXXXX // use your token here
Enter fullscreen mode Exit fullscreen mode

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

//registry.npmjs.org/:_authToken=${NPM_TOKEN}
Enter fullscreen mode Exit fullscreen mode

Push changes and publish

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

npm version minor
npm publish
Enter fullscreen mode Exit fullscreen mode

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

Usage

I am ready to go!

npx rossanodan-card
Enter fullscreen mode Exit fullscreen mode

Alt Text

Top comments (2)

Collapse
 
stegriff profile image
Ste Griffiths

Thorough guide! I hadn't heard of this trend and your article makes it a lot easier to give it a try. Thanks!

Collapse
 
rossanodan profile image
Rossano D'Angelo

Thanks Stephen! I found it interesting and worthed to spend some time on it! Looking forward to use it with someone eheheh :)