DEV Community

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

Posted on

10 3

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

DeepClone-js

Utility to clean up circular references while creating a new reference of an object performing a deep copy (as oposite to a shallow copy). Bear in mind it doesn't work with some data types: Date, Map, RegExp, Set, TypedArray...

πŸ“¦ Install

npm i -S gist:0bce1161cfd2aa91ae7cad9abb42c342

Usage

import { deepClone } from 'deepclone-js'

const source = {
  b: 1,
}

const original = { ...source }
original.c = original // πŸ‘‰πŸΌ Circular reference

const copy = deepClone(original)
// expect(copy).toEqual(source) // -> true
view raw README.md hosted with ❀ by GitHub
/**
* @param {Object} object
* @returns {Boolean}
*/
const isFalsy /* So, it's not an object */ = object => !object
/**
* Matches object type
* @param {Object} object
* @returns {Boolean}
*/
export const isObjectType = object => !!(typeof object).match(/object/)
/**
* @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cyclic_object_value#Examples
* @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet
*/
const getCircularReplacer = () => {
const seen = new WeakSet()
return (_key, value) => {
if (typeof value === 'object' && value !== null) {
if (seen.has(value)) {
return
}
seen.add(value)
}
return value
}
}
/**
* @param {Object} object The object to be cloned
* @returns A copied value representing a new reference and discarding circular references
*/
export const deepClone = object => {
if (isFalsy(object)) return {}
if (!isObjectType(object)) return object
return JSON.parse(JSON.stringify(object, getCircularReplacer()))
}
view raw deepClone.js hosted with ❀ by GitHub
{
"version": "0.0.3",
"name": "deepclone-js",
"main": "deepClone.js"
}
view raw package.json hosted with ❀ by GitHub

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:

❀ 😜

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

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!

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

πŸ‘‹ Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay