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 in your terminal right now to learn more about me πŸ˜‰

End result

image

Setting it up

Let's create a new project

# Setup directories
mkdir npx-card
cd npx-card

# Initialise yarn package manager
# -y generates a default package.json - you can customise this later
yarn init -y

# For NPM
# npm init -y
Enter fullscreen mode Exit fullscreen mode

Open it in the code editor of your choice.

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!

Discussion (6)

Collapse
lukeshiru profile image
LUKESHIRU

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 Author

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 Author

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 Author • Edited on

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