DEV Community: Mario

How to add husky to React

Mario — Wed, 20 Sep 2023 00:00:00 +0000

This article is based on Husky v8.0.1 and React v18.2.0.

Husky makes modern native Git hooks easy to use in your React project. You can use it to lint your commit messages, run tests, lint code, or many more when you commit or push.

But what are Git hooks and how can you add husky to your project?

What are Git hooks?

Git hooks are scripts/programs that you can set up to run at certain points in git's execution (git lifecycle). These points include different stages of a commit, like before a commit (pre-commit) or after a commit (post-commit).

Git hooks allow developers to enforce standards by automating other scripts to run those tasks, like run npm test before a commit, or run eslint to avoid eslint errors and warnings.

Husky supports all Git hooks. You can find a list with all available Git hooks here.

Add husky to your React project

There are two ways to install husky in your project:

Automatic (recommended)
Manual

Automatic installation (recommended)

The package husky-init is used to quickly install and initialize a project with husky.

From your project root, type the following commands (depending on your package manager) to install husky.

Important: If your package.json is in a subdirectory, see how to set up a custom directory with husky.

npx husky-init && npm install # npm
npx husky-init && yarn # Yarn 1
yarn dlx husky-init --yarn2 && yarn # Yarn 2+

After successful execution of this script several things did happen:

A folder named .husky in your project root has been added. It contains a file called pre-commit, which is the initial pre-commit hook. And a folder _ which contains the automatically generated shell script for husky. (Do not commit this, see .gitignore)
The package.json was modified, with a prepare script and husky was added as a devDependency.
And your package-lock.json was updated.

That's it, you are ready to use husky in your React project. 😀

Manually installation

Three steps, though the outcome should be the same as with automatic installation.

Install husky

npm install husky --save-dev

Enable Git hooks

npx husky install

To automatically have Git hooks enabled after install, edit package.json

npm pkg set scripts.prepare="husky install"

Using hooks

After a successful installation you should already have a pre-commit hook installed.

The content of the generated pre-commit hook are:

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm test

This means that before every commit, the script npm test is running. If the tests fail, you will get an error and, you can`t commit, unless you fix the tests. I think you see already how useful this can be in any size of project.

Create a hook

The syntax to add a command to a hook or to create a new hook is:

husky add <file> [cmd]

For example, you want to run ng lint after npm test in your pre-commit hook.

husky add .husky/pre-commit ng lint

The pre-commit hook has been updated:

!/usr/bin/env sh

. "$(dirname -- "$0")/_/husky.sh"

npm test
ng lint
`

🌟Congratulations🌟You have husky successfully installed and setup husky in your React project.

TL;DR

Husky is a tool to use git hooks easily to automatically run scripts on git lifecycle events.
For example: If you want to run a npm script, before code is committed use a pre-commit hook.

Thanks for reading and if you have any questions , use the comment function or send me a message @mariokandut. If you want to know more about React, have a look at these React Tutorials.

References (and Big thanks):Git hooks,React,Husky,NPM - husky

Getting started with Webpack

Mario — Tue, 19 Sep 2023 00:00:00 +0000

This article is based on Node v18.13.0 and webpack v5.8.2

In a nutshell, webpack is a static module bundler for modern JavaScript applications. When it processes the application, it builds a dependency graph and then combines every module your project needs into bundles, which are static assets to serve your content from.

"Okay, but why do we need it and what are the benefits?", you might be asking. Let's dive a bit deeper, and answer your questions.

What is Webpack?

If you are around long enough in web development, you have noticed that websites are not written in plain HTMl with a bit of JavaScript anymore, they're often entirely built by JavaScript (or TypeScript), and often use SSR (Server Side Rendering). In that case, we have to bundle , minify , and transpile the code into something browsers can understand, and this spot is where webpack comes in.

Webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph from one or more entry points and then combines every module your project needs into one or more bundles, which are static assets to serve your content from.

This bundling allows you to write the latest JavaScript with Babel or use TypeScript, and compile it into something cross-browser compatible minified. Webpack also allows you to import static assets into your JavaScript.

In a development environment, webpack supplies you with a development server that can update modules and styles instantly when you save (hot reloading). For example vue create and create-react-app use webpack under the hood.

Webpack can do much more than that, let's start with the basics to get familiar with the concepts. Have a look at the core concepts of webpack at the webpack docs.

Let's start with the basic setup of a mini project to practically illustrate why webpack is an essential tool. This sample is sourced from webpack.

Code example

Create a webpack-demo folder and initialize npm and install webpack and the webpack-cli as devDependencies.

mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

Now we'll create an index.htmlfile, a src folder, and add an index.js file.

touch index.html
mkdir src
cd src
touch index.js

Add this sample code to your index.js file:

function component() {
  const element = document.createElement('div');

  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

Add this code to your index.html file.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Getting Started</title>
    <script src="https://unpkg.com/lodash@4.17.20"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

We also need to adjust our package.json file to mark our package as private and to remote the main entry. This is to prevent an accidental publish of your code.

The package.json should look like this:

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4"
  }
}

Now open the index.html in your browser, you should see hello webpack.

In this example, there are implicit dependencies between the <script> tags. This means, that the index.js file depends on lodash being included before it runs. This is because index.js never explicitly declared a need for lodash; it assumes that the global variable _ exists.

This approach can lead to serious problems:

It is not immediately apparent that the script depends on an external library.
If a dependency is missing, or included in the wrong order, the application will not function properly.
If a dependency is included but not used, the browser will be forced to download unnecessary code.

Don't worry. There is a solution to all these problems. Webpack can manage this instead, and create a bundle.

How to create a bundle with webpack

To create a bundle (in this example), we first have to separate our source code from the distribution code. We create a dist folder, and move the index.html into this folder. (Please be aware, in a normal setup the index.html is created via webpack. This is only a quick showcase.)

The source code is the code that we'll write and edit, and the distribution code is the minimized and optimized output of our build process that will be loaded in the browser.

Create a dist folder and move the index.html into it.

mkdir dist
mv index.html dist/ # to move the index.html file into dist

To bundle the lodash dependency with index.js, we'll need to install the library locally:

npm install lodash

After installing it, lodash has to be imported. Add the following code to index.js:

import _ from 'lodash';

Since we are going to be bundling our scripts, we have to update our index.html file and, remove the lodash <script>, as we now import it as a dependency, and modify the other <script> tag to load the bundle, instead of the raw ./src file:

Update the index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Getting Started</title>
  </head>
  <body>
    <script src="main.js"></script>
  </body>
</html>

In this setup, index.js explicitly requires lodash to be present, and binds it to _. This means no global scope pollution.

When you state what dependencies a module needs, webpack can use this to build a dependency graph. Then the graph is used to generate an optimized bundle , where scripts will be executed in the correct order.

Let's run this application with npx webpack. When you open the index.html in the dist folder in your browser. The output should be the same as before.

The npx webpack will take our script at src/index.js as the entry point, and will generate dist/main.js as the output. The npx command (Node v8.2 or higher), runs the webpack binary in ./node_modules/.bin/webpack from the installed webpack package.

TL;DR

Webpack is a static module bundler for modern JavaScript applications.
Webpack builds a dependency graph from points and then combines every module your project needs into one or more bundles, which are static assets to serve your content from.
Use webpack to bundle your application and don't worry about global scope pollution , missing dependencies , installed but not used dependencies , wrong order of imports or implicit dependencies (which you are not aware of) anymore.

Thanks for reading and if you have any questions , use the comment function or send me a message @mariokandut.

If you want to know more about Node, have a look at these Node Tutorials.

References (and Big thanks):

Webpack,StackShare,NodeJS,NPM,Smashing Magazine,Tania Rascia

How to list/debug npm packages?

Mario — Mon, 18 Sep 2023 00:00:00 +0000

This article is based on Node v18.13.0

Installing and uninstalling dependencies are a core part of working with any Node.js project or framework React, Angular, NextJS, Express, Vue, etc. But how do you list your installed dependencies? If you are just starting with Node.js, have a look at the NodeJS intro article install node packages.

If you work on different projects with different environments and different node versions, surely, some effort is needed to manage this, and version conflicts are anything but nice. For example, globally installed dependencies, can cause version issues in your project, if you use a wrong version. Or you are currently in the process of a major update in a project, and try to upgrade the dependencies, and all of a sudden you get an error when installing. Most likely, npm ERR! Invalid version in the log after running npm install. Then you have to start to debug and the fun starts.

How to fix version conflicts in installed NPM Packages?

The first step when facing version issues with installed packages is to delete and reinstall.

Clean the node_modules folder rm -r node_modules
Re-install packages with npm install

If the issue still persists clean NPM cache. You can forcefully clean the NPM cache with npm cache clean --force

In a lot of cases, the issue is resolved now. If it isn't, you have to start debugging. First you have to list your installed packages

How to list installed NPM Packages?

The first step is the NPM, you are going to look for the npm ls command.

The npm ls [[<@scope>/]<pkg> ...] will print to stdout all the versions of packages that are installed, as well as their dependencies when --all is specified, in a tree structure.

Let's create a small project and see what it prints out to stdout. Create a project with npm init and install a single dependency express.

mkdir npm-ls-test
cd npm-ls-test
npm init -y
npm i express

If you then run npm ls in the sample project folder, you will get the entire packages installed, when you install express.

npm-ls-test@1.0.0
└─┬ express@4.18.2
  ├─┬ accepts@1.3.8
  │ ├─┬ mime-types@2.1.35
  │ │ └── mime-db@1.52.0
  │ └── negotiator@0.6.3
  ├── array-flatten@1.1.1
  ├─┬ body-parser@1.20.1
  │ ├── bytes@3.1.2
  │ ├── content-type@1.0.5 deduped
  │ ├── debug@2.6.9 deduped
  │ ├── depd@2.0.0 deduped
  │ ├── destroy@1.2.0
  │ ├── http-errors@2.0.0 deduped
  │ ├─┬ iconv-lite@0.4.24
  │ │ └── safer-buffer@2.1.2
  │ ├── on-finished@2.4.1 deduped
  │ ├── qs@6.11.0 deduped
  │ ├─┬ raw-body@2.5.1
  │ │ ├── bytes@3.1.2 deduped
  │ │ ├── http-errors@2.0.0 deduped
  │ │ ├── iconv-lite@0.4.24 deduped
  │ │ └── unpipe@1.0.0 deduped
  │ ├── type-is@1.6.18 deduped
  │ └── unpipe@1.0.0
  ├─┬ content-disposition@0.5.4
  │ └── safe-buffer@5.2.1 deduped
  ├── content-type@1.0.5
  ├── cookie@0.5.0
  ├── cookie-signature@1.0.6
  ├─┬ debug@2.6.9
  │ └── ms@2.0.0
  ├── depd@2.0.0
  ├── encodeurl@1.0.2
  ├── escape-html@1.0.3
  ├── etag@1.8.1
  ├─┬ finalhandler@1.2.0
  │ ├── debug@2.6.9 deduped
  │ ├── encodeurl@1.0.2 deduped
  │ ├── escape-html@1.0.3 deduped
  │ ├── on-finished@2.4.1 deduped
  │ ├── parseurl@1.3.3 deduped
  │ ├── statuses@2.0.1 deduped
  │ └── unpipe@1.0.0 deduped
  ├── fresh@0.5.2
  ├─┬ http-errors@2.0.0
  │ ├── depd@2.0.0 deduped
  │ ├── inherits@2.0.4
  │ ├── setprototypeof@1.2.0 deduped
  │ ├── statuses@2.0.1 deduped
  │ └── toidentifier@1.0.1
  ├── merge-descriptors@1.0.1
  ├── methods@1.1.2
  ├─┬ on-finished@2.4.1
  │ └── ee-first@1.1.1
  ├── parseurl@1.3.3
  ├── path-to-regexp@0.1.7
  ├─┬ proxy-addr@2.0.7
  │ ├── forwarded@0.2.0
  │ └── ipaddr.js@1.9.1
  ├─┬ qs@6.11.0
  │ └─┬ side-channel@1.0.4
  │ ├─┬ call-bind@1.0.2
  │ │ ├── function-bind@1.1.1
  │ │ └── get-intrinsic@1.2.1 deduped
  │ ├─┬ get-intrinsic@1.2.1
  │ │ ├── function-bind@1.1.1 deduped
  │ │ ├─┬ has@1.0.3
  │ │ │ └── function-bind@1.1.1 deduped
  │ │ ├── has-proto@1.0.1
  │ │ └── has-symbols@1.0.3
  │ └── object-inspect@1.12.3
  ├── range-parser@1.2.1
  ├── safe-buffer@5.2.1
  ├─┬ send@0.18.0
  │ ├── debug@2.6.9 deduped
  │ ├── depd@2.0.0 deduped
  │ ├── destroy@1.2.0 deduped
  │ ├── encodeurl@1.0.2 deduped
  │ ├── escape-html@1.0.3 deduped
  │ ├── etag@1.8.1 deduped
  │ ├── fresh@0.5.2 deduped
  │ ├── http-errors@2.0.0 deduped
  │ ├── mime@1.6.0
  │ ├── ms@2.1.3
  │ ├── on-finished@2.4.1 deduped
  │ ├── range-parser@1.2.1 deduped
  │ └── statuses@2.0.1 deduped
  ├─┬ serve-static@1.15.0
  │ ├── encodeurl@1.0.2 deduped
  │ ├── escape-html@1.0.3 deduped
  │ ├── parseurl@1.3.3 deduped
  │ └── send@0.18.0 deduped
  ├── setprototypeof@1.2.0
  ├── statuses@2.0.1
  ├─┬ type-is@1.6.18
  │ ├── media-typer@0.3.0
  │ └── mime-types@2.1.35 deduped
  ├── utils-merge@1.0.1
  └── vary@1.1.2

Without an argument npm ls lists all the dependencies down the dependency tree. If you are just interested in for example serve-static, you have to add an argument in the format name@version-range. Hence, you would do npm ls serve-static@1.15.0. The stdout will be only for this package.

npm-ls-test@1.0.0
└─┬ express@4.18.2
  └── serve-static@1.15.0

If you want to specify the depth in the dependency tree, add an argument for depth. The default level is infinity, which makes the stdout quite long. The stdout for npm-ls-test npm ls --depth=1, is only one level deep.

npm-ls-test@1.0.0
└─┬ express@4.18.2
  ├── accepts@1.3.8
  ├── array-flatten@1.1.1
  ├── body-parser@1.20.1
  ├── content-disposition@0.5.4
  ├── content-type@1.0.5
  ├── cookie@0.5.0
  ├── cookie-signature@1.0.6
  ├── debug@2.6.9
  ├── depd@2.0.0
  ├── encodeurl@1.0.2
  ├── escape-html@1.0.3
  ├── etag@1.8.1
  ├── finalhandler@1.2.0
  ├── fresh@0.5.2
  ├── http-errors@2.0.0
  ├── merge-descriptors@1.0.1
  ├── methods@1.1.2
  ├── on-finished@2.4.1
  ├── parseurl@1.3.3
  ├── path-to-regexp@0.1.7
  ├── proxy-addr@2.0.7
  ├── qs@6.11.0
  ├── range-parser@1.2.1
  ├── safe-buffer@5.2.1
  ├── send@0.18.0
  ├── serve-static@1.15.0
  ├── setprototypeof@1.2.0
  ├── statuses@2.0.1
  ├── type-is@1.6.18
  ├── utils-merge@1.0.1
  └── vary@1.1.2

If you have found the culprit package, which causes the version conflict, and re-installing and cleaning the cache didn't resolve it, you can use the overrides section in the package.json to make changes to a specific package, see NPM.

For example, we want to use a specific version for super-nice-package, we can simply add the following code to the package.json.

{
  "overrides": {
    "super-nice-package": "12.15.1"
  }
}

Version conflicts can also arise when for example a maintainer of a package is lacking a bit behind another major package. Usually, after some time, the maintainer updates it, and the version conflicts get resolved, but until this happens, you can use the overrides method.

Be aware , to regularly update your project, and remove the overrides , if possible.

How to list installed globally packages?

You can list globally installed packages with npm ls --global or npm ls -g.

For example, if you use nvm, the output should look something like this. In this example I used npm ls -g --depth=0 to list my global installed packages.

/PATH/.nvm/versions/node/v18.13.0/lib
├── @angular/cli@15.1.4
├── corepack@0.15.2
├── gatsby-cli@5.8.0
├── npm@8.19.3
└── serve@14.2.0

Please be aware, that if you have to change a globally installed package for whatever reason (update cycle, security fixes, license updates, etc.) within a team of multiple developers, you have to communicate this to every relevant person.

TL;DR

The NPM CLI has a built-in command to list dependencies npm ls.
You can use the overrides section in the package.json to override specific dependencies.
When facing version conflicts, remove and reinstall dependencies, and/or forcefully clean the npm cache to fix it.

Thanks for reading and if you have any questions , use the comment function or send me a message @mariokandut.

If you want to know more about Node, have a look at these Node Tutorials.

References (and Big thanks):

NodeJS,NPM,Kentaro

How to specify a Node.js version

Mario — Tue, 28 Mar 2023 00:00:00 +0000

This article is based on Node v18.13.0

Specifying a Node.js version is important, to reduce issues, especially when working in a big team. There are many more factors to consider, like:

Compatibility : Different Node.js versions have different features and capabilities.
Stability : The Node.js ecosystem is moving fast, and new major releases can introduce breaking changes.
Reproducibility : It's easier to reproduce if the version is specified. For example: If every user in your project has the same version of Node.js you can easier reproduce bugs and solve issues. Also, when you are working on multiple projects, with different node.js versions, it would be a requirement to specify the version.
Dependencies : Third-party dependencies require a specific node.js version to work properly. A different version can introduce issues with these dependencies.

Your Single-Page-Application or Node.js Application should be stable, compatible and reliable. Hence, specify the Node.js version and save yourself some headaches.

How to specify your Node.js version?

There are several ways to specify a version. You can add a configuration file for NVM or extend package.json or you write a custom script.

How to specify Node.js when using NVM?

If you installed node with NVM, how to install node.js with NVM, you can simply add a configuration file at the root of your project. This file will also be checked into git, so you can track it.

Create a file .nvmrc at the root of your project.

touch .nvmrc

Add the required Node.js version to it.
If you are already using the required version

node -v > .nvmrc

Otherwise, you can specify it directly in the file, use a text editor of your choice

Use the nvm use command to tell NVM to use node version in the configuration file. After using the command the output should be similar to this.

Found '.nvmrc' with version <v18.13.0>
Now using node v18.13.0 (npm v8.19.3)

This approach will not create a warning, when installing dependencies. You have to update your README and inform your team members about the change.

How to specify Node.js version in NPM?

To specify a Node.js version, you can simply add an engines field in your package.json. See NPM docs. Until NPMv3, it was possible to create an .npmrc file to enable engine-strict=true so that it would throw an error when installing dependencies while being on the wrong node.js version. Now, it will not throw an error, but show in the console a warning.

Open your package.json, add the "engines" field and specify the node version. You can use semver to include version ranges or specific limits.

{
  "engines": {
    "node": ">=16.0.0 <17.0.0"
  }
}

Unfortunately, this will only create warning when installing the dependencies. Hence, you have to update your README and inform your team members about the change.

How to specify Node.js version with a custom script?

A good approach would be to combine setting the engine field in your package.json and check if the current node version is within the version range. To do this we can write a simple script in five steps.

Specify your desired node version in package.json.

{
  "engines": {
    "node": ">=18.0.0"
  }
}

Add a custom engineStrict field to your package.json and set it to true. This field will be read in our custom script. If it's true the script will be executed.

{
  "engineStrict": true
}

Install semver and create a file check-node-version.js.

npm i semver
touch check-node-version.js

Now, compare the node version in the process with the set version in the engines field. To satisfy semver we can use the semver package.

const semver = require('semver');
const engines = require('./package').engines;

const version = engines.node;
if (!semver.satisfies(process.version, version)) {
  console.log(
    `Required node version ${version} not satisfied with current version ${process.version}.`,
  );
  process.exit(1);
}

Update your package.json with a preinstall step and a check-node-version script.

{
  "check-node-version": "node check-node-version.js",
  "preinstall": "npm run check-node-version"
}

And that's it. If you run npm i in your project, and you are on different Node version than specified, the process will exit.

How to specify the Node.js version in React or Angular?

All three approaches from above can be used in React or Angular.

TL;DR

Your Single-Page-Application or Node.js Application should be stable, compatible and reliable. Hence, specify the Node.js version and save yourself some headaches.
Create a file .nvmrc at the root of your project, specify version and use with nvm use.
Add engines field in package.json and specify Node.js version.
Write a small custom script to compare engines field with Node process and exit if it's not within specified semver range.

Thanks for reading and if you have any questions , use the comment function or send me a message @mariokandut.

If you want to know more about Node, have a look at these Node Tutorials.

References (and Big thanks):

NodeJS,NPM,Adam Bisek

How to use fontawesome - Angular

Mario — Mon, 20 Mar 2023 00:00:00 +0000

This article is based on Angular CLI 15.1.4, Node 18.13.0, npm 8.19.3

FontAwesome is a popular icon library that provides scalable vector icons. It's easy to use FontAwesome in Angular with the @fortawesome/angular-fontawesome package, which provides Angular components for FontAwesome icons. This article is about how to use fontawesome in your Angular project.

If you want to know how to install, head over to How to install fontawesome in Angular.

How to use fontawesome 5+ in Angular 15?

After successfully installing fontawesome in your Angular project. Follow these three steps:

Add the FontAwesomeModule.
Tie the icon to the property in your component
Use the icon in your template.

1. Add the module in `app.module.ts`

Add FontAwesomeModule to imports in src/app/app.module.ts.

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

import { AppComponent } from './app.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

@NgModule({
  imports: [BrowserModule, FontAwesomeModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

2. Tie the icon to the property in your component

Bind the icon you want to use to a variable in the component, where the icon should be used, for example src/app/app.component.ts.

import { Component } from '@angular/core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  faCoffee = faCoffee;
}

3. Use the icon in your template

Provide the icon to the icon property in fa-icon component.

<fa-icon [icon]="faCoffee"></fa-icon>

Instead of using property binding you can also supply an array with string values directly in your template. This is useful when layering icons, see Fontawesome Docs - Layering.

<fa-layers [fixedWidth]="true">
  <fa-icon [icon]="['fas', 'square']"></fa-icon>
  <fa-icon
    [inverse]="true"
    [icon]="['fas', 'spinner']"
    transform="shrink-6"
  ></fa-icon>
</fa-layers>

TL;DR

To use Font Awesome in Angular,

Thanks for reading and if you have any questions , use the comment function or send me a message @mariokandut. If you want to know more about Angular, have a look at these Angular Tutorials.

References (and Big thanks):Angular,fontawesome Angular Component for Font Awesome

How to add fontawesome - Angular

Mario — Sun, 12 Mar 2023 00:00:00 +0000

This article is based on Angular CLI 15.1.4, Node 18.13.0, npm 8.19.3

Font Awesome is the Internet's icon library and toolkit, used by millions of designers, developers, and content creators, see fontawesome. It has two versions, pro(paid) and free. The pro version gives you more icons and human support and has slightly different installation procedure. This article is about different methods on how to install fontawesome version (free) in your Angular project.

How to add fontawesome 5+ in Angular 15?

The preferred way to add Font Awesome to Angular is via the officially supported Angular Component for Font Awesome 5+. This makes the installation easy and should be done in no time.

You have three options to add this NPM package:

Use ng add
Use yarn
Use npm

To illustrate I'll start with an empty Angular project. Hence, let's create an empty Angular project

ng new angular-fontawesome

Use `ng add` to install Font Awesome

Angular CLI has a feature to easily add support for external libraries in your project ng add. This was introduced in Angular v7.

Simply install the fontawesome Angular component for Angular 15. This would be version 0.12.x.

Go to your project root and run.

ng add @fortawesome/angular-fontawesome@0.12

After running this command, you will be prompted:

To choose the fontawesome version Font Awesome 5 or Font Awesome 6. Choose version 6.
The next prompt will be the icon packages you want to use. Choose the packages (SPACE for selecting) confirm with ENTER. The free options are: Free Solid Icons, Free Regular Icons, Free Brands Icons.
And that's it.

You have successfully installed Font Awesome.

Use `npm i` to install Font Awesome

If you use npm in your project, and can't use the Angular CLI with ng add. You can manually add the packages. Choose directly the packages you want to install.

Go to your project root and install the main package:

npm install @fortawesome/angular-fontawesome@0.12

Add the icon packages you want to install:

npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/free-brands-svg-icons

To install everything at once:

npm install @fortawesome/angular-fontawesome@0.12 @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons

And that's it. You have successfully installed Font Awesome with npm.

Use `yarn add` to install Font Awesome

If you use yarn in your project, and can't use the Angular CLI with ng add, add the packages manually.

Go to your project root and install the main package:

yarn add @fortawesome/angular-fontawesome@0.12

Add the icon packages you want to install:

yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/free-brands-svg-icons

To install everything at once:

yarn add @fortawesome/angular-fontawesome@0.12 @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons

And that's it. You have successfully installed Font Awesome with yarn.

How to add fontawesome to Angular versions 5 to 14?

If you are on a lower version than Angular 15, you have to check the compatibility table to see which version of @fortawesome/angular-fontawesome you can use. Installation with the official package is supported from Angular 9 ongoing.

@fortawesome/angular-fontawesome	Angular	Font Awesome	ng-add
0.1.x	5.x	5.x	not supported
0.2.x	6.x	5.x	not supported
0.3.x	6.x && 7.x	5.x	not supported
0.4.x, 0.5.x	8.x	5.x	not supported
0.6.x	9.x	5.x	supported
0.7.x	10.x	5.x	supported
0.8.x	11.x	5.x	supported
0.9.x	12.x	5.x	supported
0.10.x	13.x	5.x && 6.x	supported
0.11.x	14.x	5 .x && 6.x	supported
0.12.x	15.x	5.x && 6.x	supported

Starting from Angular 9 you can use ng add to install the package. Otherwise, you have to use npm or yarn to add the packages.

Install Font Awesome without the official package

If you don't want to use the official package, which I don't recommend, you can install Font Awesome directly and update your styles in angular.json.

There is a catch. There are two limitations with this approach. The first is the version of Font Awesome - the maximum version is Font Awesome 4.7. And, the second is the usage of font-awesome in Angular. You have to use css classes like <i class="fa fa-dashboard"></i> to render icons.

Three steps to install Font Awesome 4.7 in Angular

Install via npm or yarn
Update angular.json
And that's it.

Install the package. Go to project root and run:

npm i font-awesome

Add the styles font-awesome.css from the fontawesome package to your angular.json by updating the styles import:

{
  "styles": [
    "node_modules/font-awesome/css/font-awesome.css",
    "src/styles.css"
  ]
}

And that's it. You have successfully installed Font Awesome 4.7.

TL;DR

The preferred way to add Font Awesome to Angular is Angular Component for Font Awesome 5+.
Use ng add for interactive prompts in Angular CLI.
If the version of Font Awesome should be smaller than 5, install directly via npm or yarn and update styles import in angular.json. There are downsides to this approach. The maximum version of Font Awesome is 4.7, and you have to apply CSS classes in Angular to display icons.

References (and Big thanks):Angular,fontawesome Angular Component for Font Awesome

Introduction to routing in Angular

Mario — Fri, 03 Feb 2023 00:00:00 +0000

This article is based on Angular CLI 15.1.4, Node 18.13.0, npm 8.19.3

Routing in Angular is used to navigate from one view to another as users perform actions.

In an SPA (Single-Page-Application) you can conditionally show or hide components depending on user actions, at some point users will perform an action which requires to move to a different view in the application. To handle the navigation from one view to another you have to use routing , most commonly the @angular/router , see Router API. Routing plays a crucial role in making an SPA dynamic and user-friendly. It's what makes your application feel like a native app instead of a loose collection of separate pages (think of internet of the 90ies).

The Router enables navigation by interpreting a browser URL as an instruction to change the view. Also, additional parameters can be passed to be handled in the view component.

Some examples of actions, which involve routing:

Entering a URL in the address bar and the browser navigates to a corresponding page within the Angular application
Clicking on a link, which navigates to a new page
Clicking on a product image to go to the product details page
Clicking the back or forward button in the browser to trigger browser navigation

The Angular router is the package @angular/router, when scaffolding an application with the Angular CLI ng new YOUR_TEST_APP, you will get prompted if you want to use the angular router. This tutorial is based on @angular/router. If you don't want to use @angular/router, there are some other options, for example ngrx/router.

Let's take a look at some code examples.

Basic routing

We are going to create a basic application with two components and two routes.

The steps are:

Create basic application with routing module
Import Routermodule and Routes into routing module
Define and add application routes

1. Create basic application with routing module

Let's create a new Angular app, and we call it my-routing in a folder angular-routing.

mkdir angular-routing
cd angular routing
ng new my-routing --routing --defaults

The command ng new ... uses the Angular CLI to generate a basic Angular application with an AppRoutingModule (application routing module). The AppRoutingModule is an NgModule where you can configure your routes.

Now let's add two components, so we can route to them. In the same folder generate two components via CLI.

ng generate component first
ng generate component second

Open the AppRoutingModule (file: app-routing.module.ts) and import the two components.

import { FirstComponent } from './first/first.component';
import { SecondComponent } from './second/second.component';

2. Import `Routermodule` and `Routes` into routing module

The importing of the Routermodule into the Angular AppModule was already done by the Angular CLI. If you are creating your application manually, or you don't have the Angular CLI, you have to add the imports.

Your app-routing.module.ts should look something like this:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FirstComponent } from './first/first.component';
import { SecondComponent } from './second/second.component';

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Now add your routes array, which will contain all the valid routes for your app:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FirstComponent } from './first/first.component';
import { SecondComponent } from './second/second.component';

const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

3. Define and add application routes

Let's define our routes. We have two components first and second, so we are adding two routes.

Replace the routes with:

const routes: Routes = [
  { path: 'first-component', component: FirstComponent },
  { path: 'second-component', component: SecondComponent },
];

We have now defined our application routes. Start the application ng serve and go to http://localhost:4200/first-component. The first component should render.

Let's remove the Angular welcome screen and add a navigation for the two components.

To do so, open app.component.html and remove everything. We are going to add the navigation and the router-outlet. The router-outlet is a placeholder that Angular dynamically fills based on the current router state. Basically, Angular uses this to insert the component matched by the route.

<h1>My Angular Routing App</h1>
<nav>
  <ul>
    <li>
      <a
        routerLink="/first-component"
        routerLinkActive="active"
        ariaCurrentWhenActive="page"
      >
        First Component
      </a>
    </li>
    <li>
      <a
        routerLink="/second-component"
        routerLinkActive="active"
        ariaCurrentWhenActive="page"
      >
        Second Component
      </a>
    </li>
  </ul>
</nav>

<router-outlet></router-outlet>

Now start your Angular app again, and you should see a headline with two buttons. Click the buttons and see how the component gets rendered and your URL changes.

TL;DR

Routing is the mechanism that allows you to create different pages within your Angular application without reloading the entire page.
A router array in AppRoutingModule holds all the routes.
The router-outlet is used by Angular to insert the component matched by the route.

References (and Big thanks):Angular - Docs, Angular Routing Guide, Cory Rylan

How to write a custom ESLint rule

Mario — Sun, 20 Nov 2022 00:00:00 +0000

This article is based on ESLint v8.28.0.

ESLint is the default linting tool in the JavaScript/TypeScript ecosystem. ESLint runs continuously a set of rules to detect issues, and, depending on the rule, it allows you to automatically fix the issue. These rules can be imported from other projects or extended to your needs. At some point you might have a case which is not covered with one of the already existing ESLint plugins, then you have to write your own plugin.

This article is about how you can write your own custom plugin for ESLint. Before you start, check out the quick refresher - what is linting.

Writing a custom ESLint rule

To use a custom rule in ESLint, you have to write an ESLint plugin. Before you start writing your own plugin, check the already existing ones here. ESLint offers a flexible architecture for plugins and is completely pluggable. The parser and the rules are all pluggable, this means, that you can adjust it to your needs. If you want to use TypeScript or JavaScript or use different plugins for naming functions, etc. The possibilities are endless.

Before starting to write the custom rule, we have to understand how ESLint works and how we can check if the rule is working. Any linter, TSLint or ESLint is basically a basic static code analyzer , it checks your source code for programmatic and stylistic errors (wrong indentation, variable naming, ...).ESLint uses an AST (Abstract Syntax Tree) to evaluate patterns in code. AST (Abstract Syntax Tree) is used for describing a particular syntax pattern in your code, see the example AST below.

So, basically, we have to find the node of our code we want to check in the AST and return it to ESLint. Hence, we have a plan.

Three steps to create a custom ESLint rule

Create rule definition in AST explorer
Create module with custom rule
Import custom module into ESLint

1. Create custom rule in AST explorer

For demonstration purposes, we are going to write a simple rule. We want to forbid a variable named pizza, isPizza or any other combination is okay.

We open a browser tab and go to AST. Now we have to configure the parser and transformer. Depending on your projects ESLint configuration, you have to select the parser, for example @typescript-eslint/parser, if you are using typescript and are using this parser. Use the ESLint v8 option in the transform , since we don't want to use TypeScript in our ESLint rule. Now you will have four windows, instead of two.

The top left one is the code to lint, the top right one is the abstract syntax tree, the bottom left is your rule definition and the bottom right is the rule output.

Now, let's explore the AST to find name: "pizza". This is the property we want to check. Let's console log it.

Copy the code in the bottom left rule definition and open dev tools console. The output should be pizza.

module.exports = {
  create(context) {
    return {
      Identifier(node) {
        console.log(node.name);
      },
    };
  },
};

Now we just have to check if the name is pizza.

module.exports = {
  create(context) {
    return {
      Identifier(node) {
        if (node.name.toLowerCase() === 'pizza') {
          console.log(
            `Nope, the variable name '${node.name}' is reserved`,
          );
        } else {
          console.log(`'${node.name}' is an amazing variable name`);
        }
      },
    };
  },
};

Now, let's add more test cases to verify our code is correct. Copy and paste the code into the top left window.

const pizza = 'yummy';
const isPizza = true;
const pizzaSize = 'large';

The output in the console should be ... is an amazing variable name for isPizza and pizzaSize. That is Great. We have identified the pattern, which violates our custom rule.

To report the violation of the rule we have to use context.report(), see ESLint docs. It publishes a warning or error depending on the configuration being used. The object accepted by context.report(), has a required message property, which contains the message that will be reported.

Now,let's extend the code.

module.exports = {
  create(context) {
    return {
      Identifier(node) {
        if (node.name.toLowerCase() === 'pizza') {
          return context.report({
            node,
            message: 'Nope, the variable name "pizza" is reserved',
          });
        }
        return null;
      },
    };
  },
};

The output (bottom right) should be something like this:

// Nope, the variable name "pizza" is reserved (at 1:7)
const pizza = 'yummy';
// ------^
// ...

Our rule definition is now done. Additionally, the method context.report() also has an optional property fix, which would allow us to define a function which applies a fix for the rule violation. Though, this will be covered in another blog post. 😀

2. Create module with custom rule

Create a project with corresponding folders and files, and initialize with npm init -y.

mkdir eslint-custom-rules
cd eslint-custom-rules
npm init -y
touch index.js
mkdir rules
cd rules
touch pizza-reserved.js

We will need this later to upload the module or import it into our project.

Add the rule definition in the file pizza-reserved.js.

module.exports = {
  create(context) {
    return {
      Identifier(node) {
        if (node.name.toLowerCase() === 'pizza') {
          return context.report({
            node,
            message: 'Nope, the variable name "pizza" is reserved',
          });
        }
        return null;
      },
    };
  },
};

There are naming restrictions for creating custom eslint rules. Following formats are allowed, where plugin-name and scope can be customized:

eslint-plugin-plugin-name
@scope/eslint-plugin-plugin-name
@scope/eslint-plugin

For this example we choose eslint-plugin-pizza-reserved for the npm module.

We have to update the package.json in our index.js file with the name eslint-plugin-pizza-reserved.

The package.json should look like this:

{
  "name": "eslint-plugin-pizza-reserved",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Now we update our index.js files to export the rules.

module.exports = {
  rules: {
    'pizza-reserved': require('./rules/pizza-reserved'),
  },
};

Now we have a working custom eslint rule. We can now publish is to npm or only use it locally in our project.

3. Import custom module into ESLint

The import of the custom rule into your ESLint configuration depends on if you have published the rule or if you want to use it locally.

If you use the ESLint rule locally in your project, you can simply extend your package.json devDependencies with "<plugin-name>": "file:path/to/entrypoint".

The folder structure in this example is:

.
├── eslint-custom-rules # Custom ESLint rules
| ├── rules
| | └── pizza-reserved.js
| └── index.js
|
└── my-project # Project folder, where we want to use custom rules
    ├── src # Source files
    ├── test # Automated tests
    ├── .eslintrc.js # Automated tests
    ├── ... # Automated tests
    └── README.md

Hence, use "eslint-plugin-custom-rules": "file:eslint-custom-rules" to add your custom eslint plugin to package.json and run npm i to install it.

The final step would be to extend the ESLint configuration.

module.exports = {
  plugins: [
    'custom-rules',
    // other plugins
  ],
  rules: {
    // other configs
    'custom-rules/pizza-reserved': 'warn',
  },
};

That's it. You have written a custom ESLint rule. Congratulations.

TL;DR

To create a custom ESLint rule you have to create a custom ESLint plugin.
First you have to define the rule definition with the AST explorer.
Then you have to create an NPM module with the custom rule
Finally, you have to install the custom module in your project and add it into your ESLint configuration.

Thanks for reading and if you have any questions , use the comment function or send me a message @mariokandut. If you want to know more about typescript, have a look at these Typescript Tutorials.

References (and Big thanks):ESLint,Darragh ORiordan,Carrie Reid-Knox,MEWS - Daria

How to add husky to Angular

Mario — Mon, 31 Oct 2022 00:00:00 +0000

This article is based on Husky v8.0.1.

Husky makes modern native Git hooks easy to use in an Angular project. You can use it to lint your commit messages, run tests, lint code, or many more when you commit or push.

But what are Git hooks and how can you add husky to any Angular project?

What are Git hooks?

Git hooks allow developers to enforce standards by automating other scripts to run those tasks, like run npm test before a commit, or run eslint to avoid eslint errors and warnings.

Husky supports all Git hooks. You can find a list with all available Git hooks here.

Add husky to your Angular project

There are two ways to install husky in your project:

Automatic (recommended)
Manual

Automatic installation (recommended)

The package husky-init is used to quickly install and initialize a project with husky.

From your project root, type the following commands (depending on your package manager) to install husky.

Important: If your package.json is in a subdirectory, see how to set up a custom directory with husky.

npx husky-init && npm install # npm
npx husky-init && yarn # Yarn 1
yarn dlx husky-init --yarn2 && yarn # Yarn 2+

After successful execution of this script several things did happen:

A folder named .husky in your project root has been added. It contains a file called pre-commit, which is the initial pre-commit hook. And a folder _ which contains the automatically generated shell script for husky. (Do not commit this, see .gitignore)
The package.json was modified, with a prepare script and husky was added as a devDependency.
And your package-lock.json was updated.

That's it, you are ready to use husky in your Angular project. 😀

Manually installation

Three steps, though the outcome should be the same as with automatic installation.

Install husky

npm install husky --save-dev

Enable Git hooks

npx husky install

To automatically have Git hooks enabled after install, edit package.json

npm pkg set scripts.prepare="husky install"

Using hooks

After a successful installation you should already have a pre-commit hook installed.

The content of the generated pre-commit hook are:

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm test

Create a hook

The syntax to add a command to a hook or to create a new hook is:

husky add <file> [cmd]

For example, you want to run ng lint after npm test in your pre-commit hook.

husky add .husky/pre-commit ng lint

The pre-commit hook has been updated:

!/usr/bin/env sh

. "$(dirname -- "$0")/_/husky.sh"

npm test
ng lint
`

🌟Congratulations🌟You have husky successfully installed and setup husky in your Angular project.

TL;DR

Husky is a tool to use git hooks easily to automatically run scripts on git lifecycle events.
For example: If you want to run a npm script, before code is committed use a pre-commit hook.

References (and Big thanks):Git hooks,Angular,Husky,NPM - husky,itnext - Stavros Droutsas

How to create a web server in Node.js

Mario — Sat, 18 Jun 2022 00:00:00 +0000

This article is based on Node v16.15.1.

This article shows how to create a web server in Node.js with the core APIs. We are going to use the http module. In a real world scenario this is not recommended, and a web framework should be used. This article is only demonstrating that this is possible without a framework.

Create a minimal web server

A minimum viable web server would have the following requirements:

Responds to HTTP requests based on a HTTP verb (for example. GET)
Responds to request based on a given route
Responds with 404 status code, if route isn't found.
Sets applicable headers (for example: Content-Type:)

Next steps

Basic Setup
Create a basic web server
Add routes and status codes

1. Basic Setup

Node.js has to be installed. Use the node version manager nvm to install Node.

Create a folder http-web-server and cd into it.

mkdir http-web-server
cd http-web-server

2. Create a basic web server

Now, create a file server.js.

touch server.js

And then copy the following code into it.

'use strict';
const http = require('http');
const PORT = process.env.PORT || 3000;

const helloWorld = `<html>
  <head>
    <style>
     body { background: white; margin: 1.5rem }
     h1 { color: red; font-family: sans-serif }
    </style>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>`;

const server = http.createServer((req, res) => {
  res.setHeader('Content-Type', 'text/html');
  res.end(helloWorld);
});

server.listen(PORT);

In the code above, we have used the http module to create a server with the createServer method. The createServer method is passed a function with two objects in, the request object and the response object. This function is called every time the server receives a request and the objects are created for every request. In the function we set the header to Content-Type: text/html and return the constant helloWorld to return the HTML string. The response object is a writable stream , because in the node core it inherits from stream.Stream), and calling end writes the content and closes the connection. The listen method binds the defined PORT to the object created from createServer.

Now execute the code with node server.js and open a browser tab with http://localhost:3000. You should see a Hello World in red on a white background.

The Node process will not exit by itself, because the created server keeps the process open.

3. Add routes and status codes

Our example is not meeting the criteria. Currently, for any route the same response is given, we don't return any status codes and have no error handling.

Let's update our server.js with a response based on route.

'use strict';
const http = require('http');
const url = require('url');

const PORT = process.env.PORT || 3000;

const helloWorld = `<html>
  <head>
    <style>
     body { background: white; margin: 1.5rem }
     h1 { color: red; font-family: sans-serif }
    </style>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>`;

const root = `<html>
  <head>
    <style>
     body { background: white; margin: 1.5rem }
     h1 { color: black; font-family: sans-serif }
     a { color: green; text-decoration: underline; }
    </style>
  </head>
  <body>
    <h1>ROOT</h1>
    <a href='/hello'>Hello</a>
  </body>
</html>`;

const server = http.createServer((req, res) => {
  res.setHeader('Content-Type', 'text/html');
  const { pathname } = url.parse(req.url);

  if (pathname === '/') {
    res.end(root);
    return;
  }

  if (pathname === '/hello') {
    res.end(helloWorld);
    return;
  }
});

server.listen(PORT);

Now with the help of the url module we are parsing the request url and returning a different HTML string based on the route. The parse method in the url module turns a URL string into an object containing various segments of the URL.

Restart your node server. When you navigate to http://localhost:3000/hello you should see in black ROOT and if you go to http://localhost:3000/hello you should see hello world red.

Now let's add the status codes and error handling for route not found and wrong HTTP verb.

'use strict';
const http = require('http');
const url = require('url');

const PORT = process.env.PORT || 3000;
const { STATUS_CODES } = http;

const helloWorld = `<html>
  <head>
    <style>
     body { background: white; margin: 1.5rem }
     h1 { color: red; font-family: sans-serif }
    </style>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>`;

const root = `<html>
  <head>
    <style>
     body { background: white; margin: 1.5rem }
     h1 { color: black; font-family: sans-serif }
     a { color: green; text-decoration: underline; }
    </style>
  </head>
  <body>
    <h1>ROOT</h1>
    <a href='/hello'>Hello</a>
  </body>
</html>`;

const server = http.createServer((req, res) => {
  res.setHeader('Content-Type', 'text/html');
  const { pathname } = url.parse(req.url);

  // check http method
  if (req.method !== 'GET') {
    res.statusCode = 405;
    res.end(STATUS_CODES[res.statusCode] + '\r\n');
    return;
  }

  if (pathname === '/') {
    res.end(root);
    return;
  }

  if (pathname === '/hello') {
    res.end(helloWorld);
    return;
  }

  // no route found
  res.statusCode = 404;
  res.end(STATUS_CODES[res.statusCode] + '\r\n');
});

server.listen(PORT);

We have destructured the STATUS_CODES object, which contains the status codes from the http module, see docs. If the request method is not GET, we are returning the status code 405 (Method not allowed) and end the response with the status message from the key-values of STATUS_CODES.

If the route is not / or /hello, we return status code 404 (Page not found) and end the response with the applicable message from STATUS_CODES.

Restart your node server and check if the routes are handled correctly. For testing the wrong http verb, only GET is supported in our server, open postman or insomnia or use the following code to make a POST request with the http module

node -e "http.request('http://localhost:3000', {method: 'POST'}, (res) => res.pipe(process.stdout)).end()"

In any case the response should be Method not allowed.

The status code 200 (OK) is the default status code, hence, there is no need to set it for the routes / and /hello.

We have now met all criteria and have created a basic web server.

This approach is very rigid and cumbersome, especially when you try to add more functionality. Node.js frameworks like Express or Fastify enables us to write a more flexible, maintainable and declarative way.

TL;DR

It is possible to create a web server with the core modules of Node.js, but the code becomes rigid and unmanageable.
In a real-world scenario you would write web servers with Node.js frameworks.

Thanks for reading and if you have any questions , use the comment function or send me a message @mariokandut.

If you want to know more about Node, have a look at these Node Tutorials.

References (and Big thanks):

NodeJS,NodeJS - http,JSNAD,

How to dynamically load ESM in CJS

Mario — Mon, 21 Feb 2022 00:00:00 +0000

This article is based on Node v16.14.0.

The main distinction between ESM and CJS is the loading of modules. ESM loads asynchronous and CJS loads synchronous. There are limitations in interoperability, while ESM can import CJS, CJS cannot require ESM, because it would break the synchronous constraint.

For modules to work in both worlds (ESM and CJS), they would have to expose a CJS interface, but ESM is JavaScripts native module system. As you can see, this is quite a tension point in the node ecosystem.

There is a workaround to asynchronously load an ESM module for use in a CJS module, it is based on dynamic import.

Dynamic `import()`

Dynamic import() introduces a new function-like form of import. import(moduleSpecifier) returns a promise for the module namespace object, which is created after fetching, instantiating, and evaluating all the module’s dependencies, as well as the module itself. Read more about it on v8.dev.

The sample code below (from the v8 docs), shows how to dynamically load the module utils.mjs.

<script type="module">
  const moduleSpecifier = './utils.mjs';
  import(moduleSpecifier).then(module => {
    module.default();
    // → logs 'Hi from the default export!'
    module.doStuff();
    // → logs 'Doing stuff…'
  });
</script>

In the previous article How to convert a CJS module to an ESM, we were converting a CJS to an ESM and were not able to load it, because of the synchronous constraint. Let's fix this.

Open the index.js file and load the module format.mjs dynamically, since import returns a promise we can use then, thoughasync/await can be used as well.

import('./format.mjs').then(format => {
  console.log(format.toUpper('this will be uppercase'));
});

Try to run it with node index.js. You should not get an error and the output should be THIS WILL BE UPPERCASE.

Using dynamic import to load an ESM module into CJS can force a change to the application API, a synchronous function becomes asynchronous. In some cases it might be worth to consider changing the entire project to an ESM package.

TL;DR

Dynamic import enables loading of ESM into CJS.
Using dynamic import can change the application API (sync to async).

Thanks for reading and if you have any questions , use the comment function or send me a message @mariokandut.

If you want to know more about Node, have a look at these Node Tutorials.

References (and Big thanks):

NodeJS,v8.dev,TC39,JSNAD,CommonJS

How to convert a CJS module to an ESM

Mario — Mon, 07 Feb 2022 00:00:00 +0000

This article is based on Node v16.14.0.

Since Node v14 , there are two kinds of modules, CommonJS Modules (CJS) and EcmaScript Modules (ESM). EcmaScript Modules (ESM) were introduced as part of ES6 (EcmaScript 2015). The main goal was for module includes to be statically analyzable, so browsers would be able to pre-parse out imports. This behaviour is similar to collecting all <script> tags as the web page loads.

It took more than three years for major browsers to implement this retrofitting of a static module system into a dynamic language. And even longer for ESM to be implemented in NodeJS, because of interoperability with the existing CJS module system, though there are still some issues.

The main difference between CJS and ESM is that CJS loads every module synchronously , and ESM loads every module asynchronously.

There are also two types of ESM: native ESM and "transpiled ESM". Transpiled ESM is ESM-like syntax that would be typically be transpiled with Babel. The syntax looks similar, but the behaviour can vary. "Transpiled ESM" compiles to CommonJS in Node and will be compiled in the browser using a bundled synchronous loader. This means, that "transpiled ESM" loads modules synchronously, native ESM loads modules asynchronously.A Node application (or module) can contain CJS and ESM files.

Let's convert the module created in How to create a CSJ module.

The CSJ module contains this code:

'use strict';

const toUpper = str => {
  if (typeof str === 'symbol') str = str.toString(); // convert to string if symbol is used as input
  str += '';
  return str.toUpperCase();
};

module.exports = { toUpper };

To convert it to an ESM module, the only we have to do change the file extension from .js to .mjs. If you are on linux you can use the mv command.

mv format.js format.mjs

CJS modules modify the module.exports object, in ESM its native syntax. Hence, to create a named export, we can just use the export keyword.

Let's update our module:

export const toUpper = str => {
  if (typeof str === 'symbol') str = str.toString(); // convert to string if symbol is used as input
  str += '';
  return str.toUpperCase();
};

The 'use strict' pragma to enforce strict mode is also not needed anymore, since ESM executes in strict-mode.

That's it for converting CSJ to ESM. There is only one thing, try to run the node application with node index. You will see an error.

internal/modules/cjs/loader.js:948
    throw new ERR_REQUIRE_ESM(filename);
    ^

This error occurs because the require function will not automatically resolve a filename without an extension ('./format') to an .mjs extension.

Ok, so let's fix this and try again.

node -p "require('./format.mjs')"

We will get an error again.Error [ERR_REQUIRE_ESM]: Must use import to load ES Module.

The major difference between CSJ and ESM, is that CJS is synchronous. CJS cannot require ESM since that would break the synchronous constraint, but ESM can import CJS.

There is a way around this constraint with dynamic import. Have a look at this article How to dynamically load an ESM Module in CJS.

TL;DR

Since Node v14 , there are two kinds of modules, CommonJS Modules (CJS) and EcmaScript Modules (ESM).
The main difference between CJS and ESM is that CJS loads every module synchronously , and ESM loads every module asynchronously.
To convert a CSJ module to ESM, change the file ending to .mjs and use the export keyword instead of module.exports.
CJS cannot require ESM since that would break the synchronous constraint, but ESM can import CJS.
Use dynamic import for importing ESM in CSJ.

Thanks for reading and if you have any questions , use the comment function or send me a message @mariokandut.

If you want to know more about Node, have a look at these Node Tutorials.

References (and Big thanks):

NodeJS,JSNAD,CommonJS

DEV Community: Mario

How to add husky to React

What are Git hooks?

Add husky to your React project

Automatic installation (recommended)

Manually installation

Using hooks

Create a hook

!/usr/bin/env sh

TL;DR

Getting started with Webpack

What is Webpack?

Code example

How to create a bundle with webpack

TL;DR

References (and Big thanks):

How to list/debug npm packages?

How to fix version conflicts in installed NPM Packages?

How to list installed NPM Packages?

How to list installed globally packages?

TL;DR

References (and Big thanks):

How to specify a Node.js version

How to specify your Node.js version?

How to specify Node.js when using NVM?

How to specify Node.js version in NPM?

How to specify Node.js version with a custom script?

How to specify the Node.js version in React or Angular?

TL;DR

References (and Big thanks):

How to use fontawesome - Angular

How to use fontawesome 5+ in Angular 15?

1. Add the module in app.module.ts

2. Tie the icon to the property in your component

3. Use the icon in your template

TL;DR

How to add fontawesome - Angular

How to add fontawesome 5+ in Angular 15?

Use ng add to install Font Awesome

Use npm i to install Font Awesome

Use yarn add to install Font Awesome

How to add fontawesome to Angular versions 5 to 14?

Install Font Awesome without the official package

Three steps to install Font Awesome 4.7 in Angular

TL;DR

Introduction to routing in Angular

Basic routing

1. Create basic application with routing module

2. Import Routermodule and Routes into routing module

3. Define and add application routes

TL;DR

How to write a custom ESLint rule

Writing a custom ESLint rule

1. Create custom rule in AST explorer

2. Create module with custom rule

3. Import custom module into ESLint

TL;DR

How to add husky to Angular

What are Git hooks?

Add husky to your Angular project

Automatic installation (recommended)

Manually installation

Using hooks

Create a hook

!/usr/bin/env sh

TL;DR

How to create a web server in Node.js

Create a minimal web server

1. Basic Setup

2. Create a basic web server

3. Add routes and status codes

TL;DR

References (and Big thanks):

How to dynamically load ESM in CJS

Dynamic import()

TL;DR

References (and Big thanks):

How to convert a CJS module to an ESM

TL;DR

References (and Big thanks):

1. Add the module in `app.module.ts`

Use `ng add` to install Font Awesome

Use `npm i` to install Font Awesome

Use `yarn add` to install Font Awesome

2. Import `Routermodule` and `Routes` into routing module

Dynamic `import()`