DEV Community

Danny Aziz
Danny Aziz

Posted on

7 1 1 1

How the hell do I use my forked NPM package?

You can install your fork by doing npm install github:[GITHUB_USERNAME]/[GITHUB_REPO]

But the package won't work out of the box. Why?

Most of the time the /dist of the package is placed into the .gitignore. So you need to build a packaged version of the package so your project can use it.

To do this there are 2 methods. Only one worked for me.

Method 1 (The one that didn't work for me πŸ€·β€β™€οΈ)

Inside your package.json you add a postinstall that goes into your directly and runs npm install and npm run build

  "scripts": {
    "postinstall": "cd node_modules/[PACKAGE_NAME] && npm install && npm run build"
  },

Now just run npm install and your package should be updated to your fork.

What if it doesn't work?

For a package I was testing it out on, npm install worked perfectly but the build process would never work if the package was already inside node_modules...

Method 2 (Branch method)

This method requires you to make a branch on your fork that will only be used for installing (until the master of your fork gets merged, hopefully)

  1. Create a new branch:
    git checkout -b useLocally

  2. Remove /dist from the .gitignore

  3. Add the build command to precommit:

 "precommit": [
     "build"
   ],

Push Branch

git add *
git commit -m "COMMIT_MESSAGE_HERE"
git push origin useLocally

Now install the branch into your project
Just append #[BRANCH_NAME] to the URL of the repo when installing
npm install github:[GITHUB_USERNAME]/[GITHUB_REPO]#[BRANCH_NAME]

Now the /dist will be installed without having to make any changes to the package.json on master!

Top comments (3)

Collapse
 
dmikester1 profile image
Mike Dodge β€’

I'm confused about number 3. 'Add the build command to precommit' Does that go into package.json or somewhere else? I googled 'precommit' and found a git hook called 'pre-commit'. Or is this using a separate library like this one? npmjs.com/package/precommit

Collapse
 
shweta profile image
Shweta Kale β€’

Thanks a lot!! this worked for me... After spending time reading other post and almost giving up on the project!!!

Collapse
 
colemars profile image
Cole Marsteller β€’

nextjs tutorial video

πŸ“Ί Youtube Tutorial Series

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series πŸ‘€

Watch the Youtube series

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay