DEV Community: Rajesh Kumaravel

Demystifying NPM and NPX: A Dive into Package Management

Rajesh Kumaravel — Tue, 13 Feb 2024 10:57:26 +0000

Demystifying NPM and NPX: A Dive into Package Management

In the ever-evolving landscape of web development, efficient package management has become an integral part of the workflow. Among the tools that have significantly shaped this ecosystem, npm (Node Package Manager) stands out as a key player. To complement npm, a tool called npx was introduced, adding a layer of versatility to the package management process.

The Birth of npx

As projects and their dependencies grew in complexity, developers encountered challenges in managing and executing packages seamlessly. npm addressed these issues by providing a centralized repository for JavaScript libraries and a reliable way to install, manage, and share packages. However, as projects expanded, the need for an improved execution environment became evident.

Enter npx, a tool bundled with npm (versions 5.2.0 and higher) to tackle the intricacies of package execution. Prior to npx, executing binaries from packages installed via npm required adding those binaries to the system's PATH. This approach had its drawbacks, including potential conflicts and difficulties in version management.

With npx, the execution of packages is streamlined. It allows developers to run binaries from packages without the need for a global install, making it easier to manage project-specific dependencies. Additionally, npx enables the execution of binaries from packages that are not globally installed, resolving the issue of having to specify the full path to the executable.

A Closer Look at npm

npm, the backbone of the Node.js package ecosystem, is used to install, manage, and share packages of code. It facilitates the discovery and distribution of packages, making it an essential tool for developers building applications with JavaScript, whether for the front end or back end.

The npm registry is a vast collection of open-source packages, providing developers with a rich set of tools, libraries, and frameworks to enhance their projects. Installing a package is as simple as running the command npm install <package-name>, and npm takes care of fetching and installing the specified package along with its dependencies.

npm not only excels in package installation but also facilitates version management. Developers can specify the desired version of a package in the project's package.json file, ensuring consistency across different environments and team members.

Unveiling npx's Power

While npm handles package installation, npx focuses on package execution. With npx, developers can run binaries from packages without installing them globally or specifying their full path. This dynamic execution environment enhances the flexibility and portability of JavaScript applications.

One of the noteworthy features of npx is its ability to run the latest version of a package, even if it's not installed globally. For example, running npx create-react-app my-app initiates a new React application using the latest version of Create React App without the need to install it globally beforehand.

Practical Use Cases

1. Running Commands from Packages

npx eslint --init

In this example, npx is used to initialize ESLint in a project without the need for a global ESLint installation. The command fetches the latest version of ESLint and executes it with the --init flag, guiding the user through the setup process.

2. Executing One-off Commands

npx serve

Here, npx serve runs a local development server using the 'serve' package without the necessity of installing 'serve' globally. This is particularly useful for ad-hoc tasks and quick development setups.

3. Trying Out New Tools

npx create-react-app my-new-app

Creating a new React application using Create React App is a common scenario. With npx, developers can try out the latest version of Create React App without installing it globally. This keeps the project's dependencies neatly scoped.

Conclusion

npm and npx, working hand in hand, provide a comprehensive solution for managing and executing JavaScript packages in modern development workflows. npm excels in package installation and version management, while npx adds a layer of convenience by facilitating the execution of packages without the need for global installs.

As the JavaScript ecosystem continues to evolve, these tools remain crucial for developers seeking efficient and scalable package management solutions. Whether you're a seasoned developer or just starting your journey, understanding npm and npx is fundamental to harnessing the full potential of the JavaScript ecosystem.

And that’s it!

I hope you found this article a useful primer for getting started with npx, and as always, thanks for reading!

Happy Coding!
RK

Introducing Github Dashboard: Open Source Project for Analytics and Data Visualisation

Rajesh Kumaravel — Wed, 28 Jun 2023 06:00:51 +0000

Introduction

Today, I am thrilled to announce the release of GitHub Dashboard, an open source project built using Node JS, Angular, Vercel, and Nx. This project aims to provide a comprehensive and intuitive way to analyse and visualise data from GitHub repositories. With OAuth login for authentication, GitHub Dashboard enables users to fetch repository discussions and pull requests data, empowering them to gain valuable insights through high-level metrics, cards, and graphs

Authentication and Data Retrieval

GitHub Dashboard leverages OAuth login for secure authentication, ensuring that only authorised users will be allowed to access the platform. By granting necessary permissions, users will be able to fetch discussions and pull requests data from public repositories. This feature allows developers, project managers, and data enthusiasts to explore and analyse repository activities effortlessly

Analytics and Data Visualisation

One of the key highlights of GitHub Dashboard is its powerful analytics and data visualisation capabilities. The dashboard presents a user-friendly interface, displaying insightful cards and interactive graphs that provide a bird's-eye view of repository metrics. With just a glance, users can quickly assess crucial statistics such as the count of discussions, pull requests, contributors, and more. These visual representations make it easier to grasp the repository's overall health and engagement

Flexibility and Customisation

GitHub Dashboard is designed to be highly flexible and customisable. Users can seamlessly navigate through different public repositories and switch between various projects of interest

Tech Stack

GitHub Dashboard is built using a powerful combination of technologies, including:

Node.js: A server-side JavaScript runtime environment, providing a scalable and efficient backend
Angular: A popular frontend framework for building robust and interactive web applications
Vercel: A cloud platform for static sites and serverless functions, ensuring reliable hosting and deployment
Nx: A powerful extensible development framework for building monorepo-based applications, improving code sharing and maintainability

Acknowledgments

Completing the GitHub Dashboard project wouldn't have been possible without the support and contributions of my amazing friends. Their dedication, expertise, and guidance have been instrumental in bringing this project to life.
I want to express my heartfelt gratitude to Mathew Jose Pallan, Harshit T Rao, Darshan Nagesh and Shreevas Karanth for their valuable input, feedback, and encouragement throughout this journey

Conclusion

With GitHub Dashboard, analysing and visualising data from public repositories has been made much easier and simpler. Be it a developer or a project manager or a data enthusiast, this open source project provides a powerful tool to gain actionable insights and understand the health and engagement of GitHub repositories.

Thank you for your support, and I look forward to your feedback

Explore Github Dashboard...

Happy Coding!

Angular Simple Slick without dependencies

Rajesh Kumaravel — Tue, 28 Feb 2023 05:56:25 +0000

Before we begin…

Let us understand why angular plugins developed using jQuery raises concern about compatibility and integration.

jQuery and Angular are both JavaScript libraries that provide different approaches to building web applications, and as such, they can be hostile to each other when used together. Some of the reasons why jQuery is hostile with Angular include

Conflicting syntax
jQuery and Angular have different syntaxes and ways of doing things, which can lead to conflicts and errors. For example, Angular uses directives and data binding to update the DOM, while jQuery uses selectors and methods
Performance overhead
Using jQuery along with Angular can result in performance overhead, as both libraries will be loaded and executed. This can impact the speed and efficiency of your application
Incompatibility issues
jQuery was not designed to work with Angular, and using the two together can result in incompatibility issues. This can cause errors and unexpected behaviour, making it difficult to diagnose and fix problems
Maintenance complexity
Using both libraries together can lead to code that is more complex and difficult to maintain. This can make it harder to make changes and updates to your codebase
Duplicate functionality
Many of the features and functionality provided by jQuery are already available in Angular. Using both libraries can result in duplicate functionality, which can increase the size and complexity of your codebase
Different approaches to DOM manipulation
jQuery is primarily a DOM manipulation library, while Angular provides a full-featured framework for building web applications. The different approaches to DOM manipulation can result in conflicts and inconsistencies when using both libraries together

Overall, while it is possible to use jQuery with Angular, it is generally not recommended due to the conflicts and challenges that can arise. It's generally best to stick with Angular's built-in capabilities and avoid using jQuery unless absolutely necessary

Angular Simple Slick / ngxslick is a lightweight and very complete Angular library for rendering simple slideshow of elements without any 3rd party dependencies

Supports dots and arrow navigation
Custom styling
Multi row support

Demo
NPM Plugin

Installation
Import in Angular
Options

Installation



$ npm i ngx-simple-slick --save

Import in Angular



import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { NgxSlickModule } from 'ngx-simple-slick';



import { AppComponent } from './app.component';



@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    NgxSlickModule

  ],

  providers: [ ],

  bootstrap: [ AppComponent ]

})

export class AppModule { }



// demo.component.ts

export class DemoComponent implements OnInit {

  dataObj = new Array(10);

  constructor() { }

ngOnInit(): void {

  }

}



// demo.component.html

<ngxslick [dots]=true [loadStatus]="'done'">

   <ngxslick [dots]=true [loadStatus]="'done'">

      <ng-container *ngFor="let card of dataObj; let i = index">

        <div class="card">

          <figure>

            <img src="https://via.placeholder.com/150x150?text=NG%20Slick" />

            <figcaption>Card {{ i + 1 }}</figcaption>

          </figure>

        </div>

      </ng-container>

    </ngxslick>

</ngxslick>

Options

Option	Type	Required	Values	Description
loadStatus	@Input String	Optional	done / fetching	Status whether data loading is complete or fetching
dots	@Input Boolean	Optional	true / false	Dots navigation enabled if true; default arrow navigation is enabled
left	@Input String	Optional		Custom class for left navigation arrow
right	@Input String	Optional		Custom class for right navigation arrow

Wrapping Up

Why jQuery is hostile with Angular ?
Angular Simple Slick plugin without any dependencies

And that’s it!

I hope you found this article a useful primer for getting started with ngxslick, and as always, thanks for reading!

Check this out npm package for more reference NGX Slick

Happy Coding!
RK

How to write and publish your first NPM package

Rajesh Kumaravel — Mon, 19 Oct 2020 05:56:16 +0000

Before we begin…

Before we begin this, you should have the following things set up.

GitHub account
NodeJS and npm installed
npm account

Choosing a package name

You need to check whether the name is available for the npm package. If you are publishing unscoped (public) package; the name of the package should be unique.

However, if you are publishing a scoped (private) package then name does not have to be unique and name takes the format of @npm_username/package-name
Read more on

Initializing the npm package

Create a new directory and initialize using npm init

$ npm init

Initializing package will ask you a few questions for setup.
The default package.json file will be created in your project directory

{
  "name": "number-to-comma-format",
  "version": "1.0.0",
  "description": "Convert a number to comma separated format",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "RAJESH K",
  "license": "MIT"
}

Create the Node module

The main field in package.json defines the entry point of your package.

Let's create index.js file

$ touch index.js

Add the following code to index.js

'use strict'

const defaultOptions = {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
};

/**
 * @param  {Number} num - Number to be converted
 * @returns - Formatted number format
 */
function formatNumberToComma(num) {
  return Number(num).toLocaleString('en', defaultOptions);
}

module.exports = formatNumberToComma;

Add a README

It's a good idea to include documentation for your package so others know how to use it
Generally, a README should cover

Description of what your package does
Installation and usage instructions
Example code
Contribution guidelines
License used by the package Choosing the right license

Test your package locally

It is recommended to test your package locally before publishing to npm

Create and initialize new project outside package directory
Package can be installed by the following command

npm install number-to-comma-format

The problem with this is that your package is still not published yet so it isn't in npm. You need to reference your package locally while developing and testing it.
You could install the package using an absolute path to the package.

npm install /home/rajesh/dev/number-to-comma-format

Initialize Git

Create a new repository in github for your package and push the source code to git

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/rajeshkumaravel/numbertocommaformat.git
git push origin master

Publish the package to npm

Sign in to npm
You'll be prompted to enter username, password and email address which was used while registering to npm

npm login

Now you can publish your package to npm by

npm publish

Wrapping Up

VOILA...! Your package is now published on npm.

Initialize npm init
Add node module/source code
Test your package locally
git initialize
Publish package npm publish

And that’s it!

I hope you found this article a useful primer for getting started with publishing on npm, and as always, thanks for reading!

Check this out npm package for more reference Node express request id Source

Happy Coding!
RK

Google Firebase Functions : Setting and accessing environment variable

Rajesh Kumaravel — Fri, 11 Sep 2020 05:18:31 +0000

It's always a good idea to externalize application keys/secrets from code.
Google Firebase Functions has a feature that allows you to specify environment variables of key/value pairs using Firebase CLI and can be accessed by your code at runtime.

Set env variable

firebase functions:config:set config.key="SECRET_KEY" config.pass="SECRET_PASS"

NOTE: You must redeploy functions to make the new configuration available.

Deploy functions

firebase deploy --only functions

Accessing env variables

const secretKey  = firebase.config().config.key;
const secretPass = firebase.config().config.pass;

Retrieve all variables

firebase functions:config:get

Output:

{
  "config": {
    "key": "SECRET_KEY",
    "pass": "SECRET_PASS"
  }
}

Unset a variable

firebase functions:config:unset config.key

Let's consider using a file where we can keep all the environment variables.

env.json, a file that will contain all our environment variables.

{
  "config": {
    "host": "domain",
    "key": "SECRET_KEY",
    "pass": "SECRET_PASS"
  }
}

How to deploy the variables with the env.json file?

firebase functions:config:set env="$(cat env.json)"

Great! Now we can make a bulk update of our variables and keep track of them.

DEV Community: Rajesh Kumaravel

Demystifying NPM and NPX: A Dive into Package Management

Demystifying NPM and NPX: A Dive into Package Management

The Birth of npx

A Closer Look at npm

Unveiling npx's Power

Practical Use Cases

1. Running Commands from Packages

2. Executing One-off Commands

3. Trying Out New Tools

Conclusion

Introducing Github Dashboard: Open Source Project for Analytics and Data Visualisation

Introduction

Authentication and Data Retrieval

Analytics and Data Visualisation

Flexibility and Customisation

Tech Stack

Acknowledgments

Conclusion

Angular Simple Slick without dependencies

Before we begin…

Table of contents

Installation

Import in Angular

Options

Wrapping Up

How to write and publish your first NPM package

Before we begin…

Choosing a package name

Initializing the npm package

Create the Node module

Add a README

Test your package locally

Initialize Git

Publish the package to npm

Wrapping Up

Google Firebase Functions : Setting and accessing environment variable

Set env variable

Deploy functions

Accessing env variables

Retrieve all variables

Unset a variable