DEV Community

loading...

Create a simple NPX business card πŸ’³

rahikhan profile image Rahi Khan ・3 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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  1. Hit the Use this template button in my repo.
  2. 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
  3. 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"
    }
    
  4. In the package.json file change the following:

- `name` to `your name`. (It's the "`your_name`" in `npx your_name`) <br />
- `version` to `1.0.0` <br />
- `author` to `your name` <br />
- `description` to `whatever you like` <br />
- and `repository url` to `your GitHub repo`
Enter fullscreen mode Exit fullscreen mode
```json
{
    "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"
    }
}
```
Enter fullscreen mode Exit fullscreen mode
  1. Hit git add . && git commit -m "cool npx card" && git push in your terminal when you're done.
  2. Publish your package πŸ‘‡
npm publish
Enter fullscreen mode Exit fullscreen mode

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 πŸ‘‡
Enter fullscreen mode Exit fullscreen mode
```json
{
    "name": "@jonsnow/winterIsComing"
}
```
Enter fullscreen mode Exit fullscreen mode
- The publish command for this method is `npm publish --access public`
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)

pic
Editor guide