Create a simple NPX business card

Β·

5 min read

Starting from node -v to git push to writing an entire app using vim, we, developers, spend a significant amount of time in the terminal. Love it or hate it, you have to mess around with the terminal at some point in your dev career. So why not present yourself in a unique way via the terminal itself just by hitting your name in it?


Behold, THE NPX BUSINESS CARD!

demo.gif

πŸ‘‡ hit this in your terminal and you'll get to see a simple yet dashing card with my info

npx rahikhan

Now let's see how I did it and how you can make your own npx business card too! It's pretty simple trust me πŸ˜‰

  1. Create an account on npm if you don't have it already.
  2. Log in to your npm account through the terminal πŸ‘‡
    npm login
    
  3. Hit the Use this template button in my repo.
  4. Clone your newly made repo and open it with your favorite code editor (I guess it's VS Code? 😜) and hit npm i to install dependencies.
  5. Input your own info in the data.json file.
     {
         "user_name": "Jon Snow",
         "user_email": "jon@winterfell.com",
         "job_title": "Lord Commander of the Night's Watch",
         "npx_card_handle": "jonsnow",
         "twitter_username": "jonsnow",
         "linkedin_username": "jonsnow",
         "github_username": "jonsnow",
         "personal_site": "https://jonsnow.io",
         "resume_url": "https://jonsnow.io/resume"
     }
    
  6. In the package.json file change the following:

    • name to your name. (It's the "your_name" in npx your_name)
    • version to 1.0.0
    • author to your name
    • description to whatever you like
    • and repository url to your GitHub repo

      {
        "name": "Jon Snow",
        "version": "2.0.1",
        "author": "Jon Snow <jon@winterfell.com> (https://winterIsComing.io)",
        "description": "A personal card for Jon Snow",
        "repository": {
            "type": "git",
            "url": "https://github.com/jonsnow/npx_card.git"
        }
      }
      
  7. Hit git add . && git commit -m "cool npx card" && git push in your terminal when you're done.
  8. Publish your package πŸ‘‡
    npm publish
    


But hold on, what if your package has the same name as another package on npm? You won’t be able to publish it. You’ll get an error. ☠️🚫

For that you can follow either of the two steps:

  1. First one's simple, you can check for naming collisions by doing a search on npm's official site, or through the npm search command, then set the package name with something unique in the name field in the package.json file. Like a very loooong name maybe?

     {
         "name": "lord-commander-of-the-nights-watch"
     }
    
  2. Or you can publish the package under your own username (or npm organization) aka publishing to a scope. For this:

    • In the package.json file change the name field to @user-name/package-name manually where "user-name" is your npm username and "package-name" is the name of the package πŸ‘‡

      {
        "name": "@jonsnow/winterIsComing"
      }
      
    • The publish command for this method is npm publish --access public


Congratulations! You just published your first NPX business card to show off to your dev friends, or regular friends who uses the terminal for any reason πŸ˜‚



This project was originally created by Anmol Pratap Singh and tweaked a little by me. It's mostly his hardwork so all the credit goes to him.

πŸ’» His Github repo for this project.



References:

  1. How to publish packages to npm (the way the industry does things)
  2. Write a Simple npx Business Card