Create Your Own NPX Introduction Command 🚀⚡

Introduction

If you are a JavaScript developer, You might have used the npx command many times. But, Have you ever tried to make your own NPM package work in the same way with npx ?

Creating your own npx introduction command can be a fun and useful project!

In this article, we'll create our npx introduction command which will share our details in the command line.

So, Without Delaying further, let's START!

So, What is NPX?

In simple words, npx helps us to run npm packages directly from the npm registry. We don't need to install the package in a node_modules folder separately and don't have to run it separately. npx will do all for us.

It'll feel like, we are running a bash script. But under the hood, it's an npm package.

Before we Begin

For this project, we will need:

• Node.js installed on our machine - download it here.

• An npm account - get one here.

Now, Let's start building the project!

Step 1: Choose a Package Name

At First, we've to decide on a unique name for our package. This name will be used to invoke your introduction command using npx.

Note: If you're building a private package the naming should be: @username/packageName

For this example we'll be keeping the name as 'hello-arindam'.

Step 2: Create a New Directory

Next, We'll create a new directory for our package. You can name it after the package name you chose in the previous step.

For that, Open your terminal and run the following commands:

mkdir hello-arindam
cd hello-arindam

This will create a folder named "hello-arindam".

Step 3: Initialize our Package

Now, We'll Initialize our project as a Node.js package using the following command:

npm init -y

This command will create a package.json file with default settings

Note: The -y flag automatically answers "yes" to all prompts, creating a package.json with default values. If you want to customize the values, run npm init without the -y flag.

Step 4: Create the Script

Next, inside our project directory, we'll create a JavaScript file that will work as the executable script for our npx command. Let's name this file index.js.

#!/usr/bin/env node

function logDetails() {
  const message = "Hey there! I'm Arindam, a Developer Advocate at PIeces.app. I love Writing Articles, building communities, and public speaking!";
  const twitterLink = "https://twitter.com/Arindam_1729";
  const linkedinLink = "https://www.linkedin.com/in/arindam2004/";
  const websiteLink = "https://arindam-majumder.vercel.app";
  const blogLink = "https://arindam1729.hashnode.dev/";

  const colorfulBox = `
\x1b[38;5;51m
\x1b[38;5;105m${message}\x1b[38;5;51m

\x1b[38;5;93mFind me online:\x1b[0m

\x1b[38;5;93mTwitter:\x1b[0m \x1b[38;5;39m${twitterLink}\x1b[38;5;51m
\x1b[38;5;93mLinkedIn:\x1b[0m \x1b[38;5;39m${linkedinLink}\x1b[38;5;51m
\x1b[38;5;93mPortfolio:\x1b[0m \x1b[38;5;39m${websiteLink}\x1b[38;5;51m
\x1b[38;5;93mBlog:\x1b[0m \x1b[38;5;39m${blogLink}\x1b[38;5;51m
\x1b[0m`;

  console.log(colorfulBox);
}

logDetails();

Here, we've created a function to print our details in the console. We've also used \x1b[38;5;51m and similar sequences are ANSI escape codes used to set text color in the terminal.

Step 5: Define the Executable in package.json

Open your package.json file and add a bin field to define the executable script:

"bin": {
  "hello-arindam": "./index.js"
},

The bin field maps the command name to the script file.This allows NPX to locate and execute your script when the command is run.

Your package.json will look like this:

Step 6: Make the Script Executable

After creating the script file, we need to give the correct permissions to be executed. This step is crucial because, without the proper permissions, our script won't run when we invoke it using NPX.

For Linux & macOS

On Linux and macOS systems, we use the chmod command to change the file permissions:

chmod +x index.js

For Windows

On Windows, use the following command to do the same:

git update-index --chmod=+x index.js

Test your command

Before publishing, it's a good idea to test your command locally. We'll do this by linking the package:

npm link

Now, we can test your command by running:

npx hello-arindam

If it works as expected, unlink the package by running the following command:

npm unlink -g hello-arindam

Step 8: Publish Your Package

To share our command with others, we need to publish it to the npm registry.

Follow these steps:

• Login to your account using the command using:
  

  npm login
  

  

• Finally, we'll Publish the package using the command npm publish

Now you can see the details by running:

npx hello-arindam

With that, We have created our Own NPX Introduction Command! You can modify it according to your preference.

Conclusion

If you found this blog post helpful, please consider sharing it with others who might benefit from it. You can also follow me For More Content like this:

Arindam Majumder Follow

Developer Advocate | Technical Writer | 600k+ Reads | Mail for Collabs

For Paid collaboration mail me at : arindammajumder2020@gmail.com

Connect with me on Twitter, LinkedIn, Youtube and GitHub.

Thank you for Reading : )