DEV Community 👩‍💻👨‍💻

Cover image for Creating a NPX Introduction Card
Harsh Singh
Harsh Singh

Posted on • Updated on

Creating a NPX Introduction Card

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 just better) in your terminal right now to learn more about me 😉

End result

image

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

Now let's install some needed NPM modules

yarn add boxen chalk clear open inquirer

# For NPM
# npm i boxen chalk clear open inquirer
Enter fullscreen mode Exit fullscreen mode

Making things easier on ourselves, let's also add in nodemon for reloading on save.

yarn add nodemon -D

# For NPM
npm i nodemon --save-dev
Enter fullscreen mode Exit fullscreen mode

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

  "scripts": {
    "dev": "nodemon card.js"
  },
Enter fullscreen mode Exit fullscreen mode

...and let's start!

yarn dev

# For NPM
# npm run dev
Enter fullscreen mode Exit fullscreen mode

in our card.js file, let's import the 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
clear()
Enter fullscreen mode Exit fullscreen mode

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

const prompt = inquirer.createPromptModule();
Enter fullscreen mode Exit fullscreen mode

Let's create a new JavaScript object 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: () => {
                    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");
                }
            }
        ]
    }
];
Enter fullscreen mode Exit fullscreen mode

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: chalk.bold.green("                     Harsh Singh"),
    handle: chalk.white("@harshhhdev"),
    fact: chalk.hex('#B10000')('I love Open-Source!'),
    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:")
};
Enter fullscreen mode Exit fullscreen mode

Now, let's create a our card using box.

We will use values from above and plug them into it.

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"
    }
);

// Show the boxen
console.log(me);
Enter fullscreen mode Exit fullscreen mode

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

prompt(questions).then(answer => answer.action());
Enter fullscreen mode Exit fullscreen mode

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

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

Let's publish to npmjs now!

yarn publish

# For NPM
# npm publish 
Enter fullscreen mode Exit fullscreen mode

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

# Try out mines using npx harsh-dev!
npx your-pkg 
Enter fullscreen mode Exit fullscreen mode

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 ❤️ have a nice day!

Top comments (6)

Collapse
 
lukeshiru profile image
Luke Shiru

Ohh! Nice idea! I just did mine, you can check it by running:

npx lukeshiru-card
Enter fullscreen mode Exit fullscreen mode

And the source can be found here: lshi.ru/card-source

Thanks for sharing, Harsh!

Collapse
 
harshhhdev profile image
Harsh Singh

No problem at all! Credits to Anmol for the awesome idea.

Just saw your card and your portfolio, it's AMAZING! Wonderful job :)
Gave your repo a star 😉 keep it up 👍

Collapse
 
neatcoder profile image
Neat Coder

Hi, Great information!!!

But one thing is that when I type like 'npx harsh-dev', it shows an ERROR...

Collapse
 
harshhhdev profile image
Harsh Singh

Strange, mind telling me what the error is?

Collapse
 
neatcoder profile image
Neat Coder • Edited on

Error: EPERM: operation not permitted, mkdir 'C:\Users\my_username'
command not found: harsh-dev

That's the error..

Thread Thread
 
harshhhdev profile image
Harsh Singh • Edited on

You are trying to do npx in root of your Windows user directory. Try to do it in another folder :)

We want your help! Become a Tag Moderator.
Fill out this survey and help us moderate our community by becoming a tag moderator here at DEV.