Publish package in NPM and serve the static content from CDN

function copyToClipboard(x,y) {
    if( document.getElementById(x).value) {
        data_2_copy = document.getElementById(x).value;
    } else {
        data_2_copy = document.getElementById(x).innerText;
    }

    var e = document.createElement("textarea");
    e.style.opacity = "0", e.style.position = "fixed", e.textContent = data_2_copy;
    var t = document.getElementsByTagName("body")[0];
    t.appendChild(e), e.select(), document.execCommand("copy"), t.removeChild(e), $(y).show(), setTimeout((function () {
        $(y).hide()
    }), 1e3)
}

4. Copy all your static content to dist directory

Now lets copy all our static content to the dist directory. I have various css,images,javascript that will be used in various app inside my django application.

Below are the files which i copied.

tree .
.
├── dist
│   ├── admin
│   │   ├── css
│   │   │   ├── autocomplete.css
│   │   │   ├── base.css
│   ├── geoip
│   │   ├── css
│   │   │   ├── geoip_dark.css
│   │   │   └── geoip_light.css
│   │   └── js
│   │       └── geoip.js
│   ├── index.js
│   └── password_generator
│       ├── css
│       │   ├── password_generator_dark.css
│       │   └── password_generator_light.css
│       ├── img
│       │   ├── copy-full.svg
│       │   └── regenerate.svg
│       └── js
│           └── password_generator.js
├── package.json
└── README.md

5. Publish you static content as package in NPM

Now we are all set, let’s connect to NPM and publish our package.

You should already have an account in NPM to publish.

npm login
Username: r_vignesh
Password: 
Email: (this IS public) me@vikki.in
Logged in as r_vignesh on https://registry.npmjs.org/.

npm publish

npm notice
npm notice package: vikki-tools@1.0.7
npm notice === Tarball Contents ===
npm notice 1.1kB   dist/admin/img/LICENSE
npm notice 8.4kB   dist/admin/css/autocomplete.css
npm notice 16.4kB  dist/admin/css/base.css
npm notice 698B    dist/base64/css/base64_dark.css
npm notice 159B    dist/base64/css/base64_light.css
npm notice 85.9kB  dist/admin/fonts/Roboto-Regular-webfont.woff
npm notice === Tarball Details ===
npm notice name:          vikki-tools
npm notice version:       1.0.7
npm notice package size:  1.1 MB
npm notice unpacked size: 3.9 MB
npm notice shasum:        a9153c3a9bb68bc34d5040d2088a5b95a256e4cc
npm notice integrity:     sha512-zynWl1/pL0Wvk[...]k3yhkCzBz7+0A==
npm notice total files:   188
npm notice
+ vikki-tools@1.0.7

That’s it. Now we have the package published in NPM.

Unpkg and Jsdelivr provide CDN for NPM packages without any configuration.

6. Verify published package in NPM

Lets try to access it using unpkg. Open your browser and enter the url in the below format.

https://unpkg.com/pacakage/

For using specific version https://unpkg.com/package@version/:file

My package name is vikki-tools so the format will be https://unpkg.com/vikki-tools/.

The leading / at the end of the URL is important.

Screenshot from browser

Using Unpkg to serve static content in website

We can now load the static content from NPM on our website.

1
2

<script src="https://unpkg.com/vikki-tools@1.0.3/dist/index.js"></script>
<link href="https://unpkg.com/vikki-tools@1.0.3/dist/base64/css/base64_dark.css" rel="stylesheet">

1
2

<script src="https://cdn.jsdelivr.net/npm/vikki-tools@1.0.3/dist/index.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vikki-tools@1.0.3/dist/base64/css/base64_dark.css" rel="stylesheet">

1
2

<script src="https://cdn.jsdelivr.net/npm/vikki-tools@1.0.3/dist/index.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vikki-tools@1.0.3/dist/base64/css/base64_dark.min.css" rel="stylesheet">