Create a simple NPX business card 💳
Tags: node, programming, webdev, 100daysofcode
Published: 2021-01-11 19:17:09

#### 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?

<br />

#### Behold, THE NPX BUSINESS CARD!

![demo.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1610360119791/rLM8MkTgG.gif)

#### 👇 hit this in your terminal and you'll get to see a simple yet dashing card with my info

```bash
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](https://www.npmjs.com/) if you don't have it already.
1. Log in to your npm account through the terminal 👇

```bash
npm login
```

1. Hit the **_Use this template_** button in [my repo](https://github.com/rahi-khan/npx_card).
1. Clone your newly made repo and open it with your favorite code editor (I guess it's [VS Code](https://code.visualstudio.com/)? 😜) and hit `npm i` to install dependencies
1. Input your own info in the _**data.json**_ file. <br />

    ```json
    {
        "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"
    }
    ```

2. 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`

    ```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"
        }
    }
    ```

3. Hit `git add . && git commit -m "cool npx card" && git push` in your terminal when you're done.
4. Publish your package 👇

```bash
npm publish
```

<br />

### 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](https://www.npmjs.com/), 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?

    ```json
    {
        "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 👇

    ```json
    {
        "name": "@jonsnow/winterIsComing"
    }
    ```

    - The publish command for this method is `npm publish --access public`

<br />

#### 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 😂

---

<br />

#### This project was originally created by [Anmol Pratap Singh](https://github.com/anmol098) and tweaked a little by me. It's mostly his hardwork so all the credit goes to him.

#### 💻 His [Github repo](https://github.com/anmol098/npx_card) for this project.

<br />

---

#### References:

1. [How to publish packages to npm (the way the industry does things)](https://zellwk.com/blog/publish-to-npm/)
1. [Write a Simple npx Business Card](https://studioelsa.se/blog/open-source-oss-npx-business-card)