Introduce Yourself in the Shell: Creating an Executable Business Card with npx

This article is for day 5 of the Meguro LT Advent Calendar 2023.

I've created a business card that can be displayed in the shell, so I'd like to introduce it. I'll also touch upon how to create an executable npm library while explaining how I built this one.

Executed in a Bash environment

Target Audience

• People who want to create a business card that can be displayed in the shell
• People who want to create an executable npm library

Background

In 2023, with COVID-19 settling down, offline engineering events have started to resume. I myself participated in more than 30 offline events in 2023 alone.

One of the best parts of offline events is the ability to "build professional networks outside of one's company" with speakers and attendees. Many people probably exchange social media accounts at networking sessions.

Previously, many people used Twitter, and exchanging screen names was enough. However, in recent years, more people use social media other than Twitter or manage multiple platforms. As a result, there are more situations where exchanging social media accounts becomes a bit of a hassle.

In the midst of this, I saw @kkeeth at We Are JavaScripters! @42nd using an electronic business card executable via npx for their self-introduction, and they even included its screenshot in their presentation materials. (See slide 2)

I thought it was very convenient, so I decided to make one myself.

What I Created

Try running the following command in an environment where Node.js 16 or higher is installed. (When running, about 40 kB of source code will be downloaded.)

npx bicstone

After execution, an electronic business card like the one below will be displayed. You can open the social media profile page directly by clicking the URL.

Executed in a PowerShell environment

Since most web engineers have Node.js installed locally on their PCs (citation needed), a key feature is that it can be easily executed cross-platform.

How It Works

npx is a command available if npm 5.2.0 or higher, which comes with Node.js, is installed. It downloads the specified npm library and executes the JS specified in the bin field of package.json.

https://docs.npmjs.com/cli/v10/commands/npx

I have published a library called bicstone to npm.

https://www.npmjs.com/package/bicstone

https://github.com/bicstone/bicstone

Running npx bicstone downloads the bicstone npm library and executes ./dist/cli.js specified in the bin field.

https://github.com/bicstone/bicstone/blob/63a7d70a647085075f78233f264e3f9d40d9bed7/packages/bicstone/package.json

./dist/cli.js is a script like the one shown below. The electronic business card is displayed by the shell executing this script.

• The first line, #!/usr/bin/env node, is called a shebang, which specifies that the script should be executed with the Node.js interpreter.
• The second line outputs Hello, World! to standard output.
• The third line sets the exit code to 0, indicating that it finished successfully.

Overview of cli.js

#!/usr/bin/env node
process.stdout.write("Hello, World!");
process.exitCode = 0;

Optimizations for Faster Execution

On the other hand, when executing with npx, the dependency libraries (specified in dependencies in package.json) are also downloaded. Consequently, having many dependencies can lead to longer execution times.

To address this, bicstone reduces the execution time by bundling dependencies in advance. Specifically, I use a tool called esbuild to pre-bundle the dependency libraries.

However, since bundling removes the license information of the dependencies, it is important to ensure there are no license violations. Since the libraries I used are under the MIT license, I needed to generate a license file to include the required copyright and license notices.

For this purpose, I used a library called esbuild-plugin-license to generate and distribute a license file along with the package.

https://github.com/bicstone/bicstone/blob/63a7d70a647085075f78233f264e3f9d40d9bed7/packages/bicstone/build.js

I plan to cover license file generation with esbuild in a separate article.

Summary

• I created an electronic business card that can be executed via npx.
• You can make a library executable via npx simply by specifying the script you want to run in the bin field of its package.json.
• Come to think of it, it's quite difficult to run npx on a smartphone, so it ended up not being very practical for exchanging social media info at events 😇.
• But it's convenient... so it's all good 👍.