Publish and Consume NPM Packages using GitHub Package Manager

 Hi folks,

We are used to publishing the npm packages on npmjs.com. Today, I will show how we can publish the npm packages to GitHub and the steps to use those packages.

1. Publishing Packages

Prerequisites

We need to have an account with GitHub

JavaScript native/framework based project with package.json

Add the .npmrc file to your project with the following syntax. Change the OWNER value to your GitHub account or organization name.

@OWNER:registry=https://npm.pkg.github.com

Publishing Process to GitHub

Create personal access token using the following steps

• Login to GitHub
• Go to Settings
• Navigate to "Developer Settings" -> "personal access tokens"
• Generate token with write:packages access permissions

• Open terminal in the project folder
• Execute the command to login

npm login --scope=@OWNER --registry=https://npm.pkg.github.com

• When prompted,
• Username: GitHub username
• Password: Personal access token
• Public e-mail: Your email address
• Enter the following command to publish the package

npm publish

2. Consume/Installing the packages

Prerequisites

We need to have an account with GitHub

Installation

Add the .npmrc file to your project with the following syntax. Change the OWNER value to your GitHub author or organization name.

@OWNER:registry=https://npm.pkg.github.com

Enter the full name @OWNER/package-name-version in dependencies in package.json

Install the dependencies

npm install

Note: If the organization is asking for authorization of personal access token, then you need to authorize from the personal access token section against the token for the respective organization.

Hope you will make use of GitHub for publishing the packages and consuming them with ease.

Request you to send your feedback and comments to psrdotcom@gmail.com

My first Geo Location program using Leaflet JS

Hi folks,

Today I am going to explain writing an geo location HTML page with Leaflet JS.

You can find my program in my GIST GitHub List

https://gist.github.com/psrdotcom/85c56bc2ffaadb254e63bde2b3b162d5

Procedure

• Make the empty HTML page with HTML, HEAD, BODY tags
• Place the CSS link first in HEAD tag
• "https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
• After CSS, paste the Leaflet JS file reference
• "https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
• In BODY, create a DIV tag specifying the ID attribute and height and width style attributes
• id="mapid" style="width: 600px; height: 400px;"
• Get lat (Latitude) and long (Longitude) of your own choice of location.
• Take latlong reference from https://www.mapcoordinates.net/en
• Use map setView to set the location with latlong and zoom level
• var mymap = L.map('mapid').setView([17.496380,78.393175], 15);
• Make a marker with popup using marker and bindPopup functions
• var marker = L.marker([17.496380,78.393175]).addTo(mymap);
• marker.bindPopup("Hello !! This is JNTU, Hyderabad, India campus.").openPopup();
• Open your HTML page in any compatible browser
• You should be able to view your map with specified location and control the map with zoom out and zoom in capabilities.

Please send your feedback and comments to psrdotcom@gmail.com