loading...

Creating my personal business card

rossanodan profile image Rossano D'Angelo ・3 min read

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

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:')
}

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": {}
}

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

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

Usage

I am ready to go!

npx rossanodan-card

Alt Text

Posted on by:

rossanodan profile

Rossano D'Angelo

@rossanodan

Application engineer at The LEGO Group. I like reading manga. All my opinions are belong to me.

Discussion

pic
Editor guide
 

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

 

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