Business Cards in the Terminal

23 October, 2020

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!

You can hit npx harsh-dev (or pnpx harsh-dev since pnpm is better) in your terminal right now to learn more about me :wink:


What we're making today



Setting it up

Let's create a new project:

mkdir npx-card
cd npx-card

# Initialise yarn
yarn init -y

# For NPM
# npm init -y

Now let's install some NPM packages:

yarn add boxen chalk clear open inquirer

# For NPM
# npm i boxen chalk clear open inquirer

Let's also add in nodemon as a development dependency for reloading on save.

yarn add nodemon -D

# For NPM
npm i nodemon --save-dev

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

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

...and let's start!

yarn dev

# For NPM
# npm run dev

Inside our card.js file, let's import our NPM modules.

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

// clear the terminal before showing the npx card

Now, let's create a new prompt. We can do this using inquirer.

const prompt = inquirer.createPromptModule()

Let's create a new JavaScript array of objects with our prompt questions.

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: () => {
            '\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 another new JavaScript object, this time with data about us.

You should play around with this for a little bit to get the spacing right, having properly centred the fields.

I'll just post mines here, as an example.

const data = {
  name:'                     Harsh Singh'),
  handle: chalk.white('@harshhhdev'),
  fact: chalk.hex('#B10000')('I love Open-Source!'),
  twitter: chalk.hex('#00A1D9')(''),
  github: chalk.hex('#787878')(''),
  dev: chalk.hex('#330093')(''),
  dribbble: chalk.hex('#AB009C')(''),
  website: chalk.hex('#00AB9E')(''),
  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:'),

Now, let's create a our card using box. We will use values from above and plug them into it.

const me = boxen(
    `${data.labelFact}  ${data.fact}`,
    `${data.labelTwitter}  ${data.twitter}`,
    `${data.labelGitHub}  ${data.github}`,
    `${data.labelDev}  ${}`,
    `${data.labelDribbble}  ${data.dribbble}`,
    `${data.labelWebsite}  ${}`,
    `${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!')}`,
    margin: 1,
    float: 'center',
    padding: 1,
    borderStyle: 'single',
    borderColor: 'blue',

// Show the boxen

We're almost finished! Let's just make sure that we handle the prompt properly.

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

Now, let's move onto publishing

Create an account on npmjs

Make sure that you are logged on into npm. If you aren't, then do

yarn adduser

# For NPM
# npm adduser

Now, patch the version

# Make sure your git working directory is clean!
git commit -a -m "made my npx card"

# Update the version
yarn version

# For NPM
# npm version patch

Let's publish to npmjs now!

yarn publish

# For NPM
# npm publish

If everything is published, then try to execute the script using npx (or pnpx):

# Try out mines using npx harsh-dev!
npx your-pkg



If you had any problems, feel free to drop me a DM on my Twitter, or ask away in the comments below!

With that, I want to thank Anmol Singh for this cool idea and the permission to write a post on it.

If it helped you out, I'm glad :heart: have a nice day!