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
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
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.
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
Usage
I am ready to go!
npx rossanodan-card
Top comments (2)
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 :)