I was looking around GitHub the other day, and I found this awesome idea by Anmol Singh on creating a npx card to introduce themselves. I thought it was a cool idea, so I made one for myself too.

I really liked the idea, and I wanted to share it with y’all too.

Getting Started

Let’s create a new project. Skip ahead if you’re familiar with this.

terminal

mkdir npx-card
cd npx-card

yarn init -y

yarn add boxen chalk clear open inquirer

I wrote this article back in October 2020 when Node.js didn’t have an integrated watch mode. You can now just use the —watch flag.

Let’s also install nodemon as a development dependency to automatically restart our Node application.

terminal

yarn add nodemon -D

Let’s go to the scripts section in our package.json and setup nodemon

package.json

"scripts": {
  "dev": "nodemon card.js"
}

Building our card

Start by running the development server

terminal

yarn dev

Import your modules, clear the terminal before showing the card.

card.js

const boxen = require('boxen')
const chalk = require('chalk')
const inquirer = require('inquirer')
const clear = require('clear')
const open = require('open')

clear()

Let’s create a new prompt using Inquirer along with an array of objects which contain our questions.

card.js

const prompt = inquirer.createPromptModule()

const questions = [
  {
    type: 'list',
    name: 'action',
    message: 'What do you want to do?',
    choices: [
      {
        // Use chalk to style headers
        name: `Toss an ${chalk.bold('email')}?`,
        value: () => {
          open('mailto:example@example.com')
          console.log(
            '\nLooking forward to hearing your message and replying to you!\n'
          )
        },
      },
      {
        name: 'Exit',
        value: () => {
          console.log('Good bye, have a nice day!\n')
        },
      },
    ],
  },
]

Let’s create a new object, this time with data about us. I had to play around with this for a little bit to get the spacing right, having properly centred the fields.

card.js

const data = {
  name: chalk.bold.green('                     Harsh Singh'),
  handle: chalk.white('@harshhhdev'),
  fact: chalk.hex('#B10000')('I speak three languages'),
  twitter: chalk.hex('#00A1D9')('https://twitter.com/Harshhhdev'),
  github: chalk.hex('#787878')('https://github.com/harshhhdev'),
  dev: chalk.hex('#330093')('https://dev.to/harshhhdev'),
  dribbble: chalk.hex('#AB009C')('https://dribbble.com/harshhhdev'),
  website: chalk.hex('#00AB9E')('https://harshhhdev.github.io'),
  npx: chalk.hex('#A1AB00')('npx harsh'),

  labelFact: chalk.hex('#FF6262').bold('          Fun Fact:'),
  labelTwitter: chalk.hex('#629DFF').bold('        Twitter:'),
  labelGitHub: chalk.hex('#9E9E9E').bold('         GitHub:'),
  labelDev: chalk.hex('#A959FF').bold('           Dev:'),
  labelDribbble: chalk.hex('#F259FF').bold('       Dribbble:'),
  labelWebsite: chalk.hex('#59FFC8').bold('        Website:'),
  labelCard: chalk.hex('#FFF976').bold('                  Card:'),
}

Let’s create our card using those values.

card.js

const me = boxen(
  [
    `${data.name}`,
    ``,
    `${data.labelFact}  ${data.fact}`,
    ``,
    `${data.labelTwitter}  ${data.twitter}`,
    `${data.labelGitHub}  ${data.github}`,
    `${data.labelDev}  ${data.dev}`,
    `${data.labelDribbble}  ${data.dribbble}`,
    `${data.labelWebsite}  ${data.website}`,
    ``,
    `${data.labelCard}  ${data.npx}`,
    ``,
    `${chalk.bold("Hi there! I'm Harsh, I'm a passionate MERN stack ")}`,
    `${chalk.bold('developer and web designer from India, and have a ')}`,
    `${chalk.bold('hobby for creating beautiful, cool, and responsive ')}`,
    `${chalk.bold('web apps. Toss me an email if you want to collab!')}`,
  ].join('\n'),
  {
    margin: 1,
    float: 'center',
    padding: 1,
    borderStyle: 'single',
    borderColor: 'blue',
  }
)

console.log(me)

Let’s make sure that we handle the prompt properly.

card.js

prompt(questions).then((answer) => answer.action())

Publishing

Start by creating an account on NPM and connect your user account.

terminal

yarn adduser
# npm adduser

Now, patch the version:

terminal

git commit -a -m "message"

yarn version
# npm version patch

yarn publish
# npm publish

If that worked, try to executing it using npx.

terminal

# npx harsh-dev
npx your-pkg

That’s it, hopefully you enjoyed this cool little idea. Enjoy your day.