DEV Community

Cover image for Installing GitHub repos or Gists directly as npm packages
Paul Melero
Paul Melero

Posted on

Installing GitHub repos or Gists directly as npm packages

This is something that came across in our project that we think it's pretty useful. And despite now having the ability to host your own npm packages on the Github package Registry; some people might find this helpful, even if the repo itself didn't mean to be an npm isntallable module.

Install from a GitHub Repository

> npm install <githubname>/<githubrepo>

That's the basic syntax, although you might want to use the explicit version:

> npm install github:<githubname>/<githubrepo>

BTW, this works with private repos too! Also does Github Package Registry ones. But it is possible that you will be prompted with the Git Credentials Manager to put your user/pass in order to continue.

Specify a version to install

The good part, is that you can also specify versions (using semver), as in every npm package. And update them afterwards accordingly.

> npm i github:<githubname>/<githubrepo>[#semver:<semver>]
# Example:
> npm i github:lodash/lodash#semver:4.17.15

And another cool thing about this github option is that npm allows you to specify specific commits too!

> npm i github:lodash/lodash#ddfd9b1 

It will use the main branch in the respository, by default; usually master.

Installing from a gist directly

"Installing from a gist?" You might say. Sometimes it's useful to have little snippets that aren't as important as to make an npm package out of them in Github Gists.

Take a look this example: https://gist.github.com/gangsthub/0bce1161cfd2aa91ae7cad9abb42c342

If they have a package.json properly configured, you can install them.

You can then do:

> npm i gist:0bce1161cfd2aa91ae7cad9abb42c342

Note, the hash is the id of the gist, also used in the URL.

That's it! Also it's my first published post on Dev.to! Make sure to:

❀ 😜

Top comments (6)

Collapse
 
ryands17 profile image
Ryan Dsouza

The semver syntax doesn't work. Is there any alternative to that?

Collapse
 
paul_melero profile image
Paul Melero

Does this example work for you?

npm i github:lodash/lodash#semver:4.17.15

Remember, npm is expecting a package.json in the root of the Github repo.

Collapse
 
ryands17 profile image
Ryan Dsouza

Ohh. I forgot to mention I'm using yarn. Should it work with yarn as well?

Thread Thread
 
paul_melero profile image
Paul Melero

For repositories it should be yarn add <git remote url>. I don't know if it works for gists, though! I barely have used yarn πŸ™πŸ½πŸ˜‰

Collapse
 
yaireo profile image
Yair Even Or • Edited

codesandbox.io doesn't find anything if you type gist:0bce1161cfd2aa91ae7cad9abb42c342 in the packages searchbox

Collapse
 
lauragift21 profile image
Gift Egwuenu

This came in handy for me at the right time. Thanks!