Forem: Erik Harutyunyan

Automate Like a Pro: Mastering Component Generation in React with Generate React CLI

Erik Harutyunyan — Sun, 15 Sep 2024 08:03:31 +0000

Simplify React component creation, automate file generation, and customize templates with Generate React CLI. Boost productivity and maintain code consistency effortlessly!

Being a React developer is exciting. With its component-based architecture, React has revolutionized the way we build user interfaces.

Creating new components manually in React can be a tedious and time-consuming task. As a software engineer or a front-end developer, you might often find yourself copying, pasting, and renaming files for every new component you create. This is where automating React components generation comes in. This article is a comprehensive guide that will help you master the process of generating React components automatically using a tool called "Generate React CLI."

A Brief Introduction to React Components

React is a popular JavaScript library for building user interfaces. It allows developers to create large web applications that can change data without reloading the page. The main building blocks of a React application are React components.

React components are independent, reusable pieces of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML via a render function.

The Need for Automating React Components Generation

Automating the generation of React components can significantly streamline the development process, especially for seasoned front-end developers. Manual creation of these components, although initially engaging for novices, can quickly become burdensome and time-consuming. This typically involves duplicating extensive code, configuring test and style files, and preparing Storybook files, among other repetitive actions.

With automation, developers can bypass the tedium of repetitive tasks, enabling quicker and more efficient code production. By automating component generation, developers can focus more on complex
problem-solving and creative aspects of development, thus optimizing productivity and project quality.

Introducing Generate React CLI

Generate React CLI is an open-source tool that automates the creation of React components. It generates a component folder and files for each component, including tests, styles, and Storybook files. This tool allows you to customize your components and create your component types and templates, making it a flexible solution for React developers.

This tool is available as an NPM package and can be installed into any React project. It can be used as a dependency or as a command in the console.

To use Generate React CLI, you need to have Node version 18.x or higher and NPM version 10.x or greater installed on your computer. You can install Generate React CLI as a dev dependency using the command:

npm install generate-react-cli --save-dev

yarn add -D generate-react-cli

Alternatively, you can run it directly using npx:

npx generate-react-cli component Box

Note: npx is a package runner tool that ships with npm 5.2+.

Using Generate React CLI

A simple command:

npx generate-react-cli component Box

Executed in the console begins the magic. A brief Q&A session is initiated, inquiring about your usage of TypeScript, styled-components, testing, and a lot more. And it creates a new React component named Box. The answers to these questions are stored in a generate-react-cli.json config file at the root of your project, ready for future references and customizations.

Here is an example of the generate-react-cli.json config file:

{
  "usesTypeScript": false,
  "usesStyledComponents": true,
  "testLibrary": "Testing Library",
  "component": {
    "default": {
      "path": "src/components",
      "withStyle": true,
      "withTest": true,
      "withStory": false,
      "withLazy": false
    }
  }
}

Override the default configuration with options

You can override some of the default configuration rules using one-off commands. For example, if you have set withTest to be true in the component.default property, you can override it like this:

npx generate-react-cli component Box --withTest=false

If you have set withTest to be false, you can override it like this:

npx generate-react-cli component Box --withTest=true

If you don't pass any options, the default values that you have set in the generate-react-cli.json config file under the component.default will be used.

Other options can be found on the Generate React CLI GitHub repository

Generate React CLI as a dev dependency

What is the disadvantage of using the utility as such a long command:

npx generate-react-cli component Box, this is that everyone inside the team must remember all this history to use and so on. It is better to just install generate-react-cli as a dev dependency.

npm i --save-dev generate-react-cli

yarn add -D generate-react-cli

As we obtained the dependence of D, we can create an npm script and the same story is a little shorter.

Suppose we have a script called component, and to create components we can now say either

npm run component ComponentName

yarn component ComponentName

and create the component name, the same thing happens, just a little shorter.

Also, no one needs to memorize a long command. We can always go to the package.json and execute the command that is there.

{
  "name": "component-generate-react-cli",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "component": "generate-react component"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "eslint": "^8.57.0",
    "eslint-plugin-react": "^7.34.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "vite": "^5.2.0"
  }
}

Customize Component Templates

Generate React CLI also provides a customTemplates object where the keys represent the file type, and the values are paths pointing to your custom template's location in your project.

Template File Examples:

An example of a customTemplates object:

{
  "usesTypeScript": false,
  "usesStyledComponents": true,
  "testLibrary": "Testing Library",
  "component": {
    "default": {
      "customTemplates": {
        "component": "templates/default/TemplateName.jsx",
        "style": "templates/default/TemplateName.styled.jsx"
      },
      "path": "src/components",
      "withStyle": true,
      "withTest": true,
      "withStory": false,
      "withLazy": false
    }
  }
}

Note: the TemplateName keyword, as this keyword is used by GRC and will replace it with our component name based on one of the formats in which we entered the component name into the command as a filename. However, you can use the following keywords in your custom templates to properly format component names in your templates:

Generate Custom Component Files

When you use Generate React CLI, it automatically generates essential files for your component, such as styles, tests, stories, and lazy loading support. However, you have the flexibility to customize this process by editing the generate-react-cli.json configuration file.

If you want additional files, you can specify them by adding new keys prefixed with "with" in the configuration. For instance, if you wish to include an index.js file for each component to streamline imports, you can enable this feature by setting "withIndex" to true and adding "index" to the "customTemplates" object.

{
 "usesTypeScript": false,
 "usesStyledComponents": true,
 "testLibrary": "Testing Library",
 "component": {
  "default": {
   "customTemplates": {
    "component": "templates/default/TemplateName.jsx",
    "style": "templates/default/TemplateName.styled.jsx",
    "index": "templates/default/index.jsx"
   },
   "path": "src/components",
   "withStyle": true,
   "withTest": true,
   "withStory": false,
   "withLazy": false,
   "withIndex": true
  }
 }
}

Similarly, we can create our own hook, let's say it will be called useTemplateName accordingly here we will have withHook: true

{
 "usesTypeScript": false,
 "usesStyledComponents": true,
 "testLibrary": "Testing Library",
 "component": {
  "default": {
   "customTemplates": {
    "component": "templates/default/TemplateName.jsx",
    "style": "templates/default/TemplateName.styled.jsx",
    "index": "templates/default/index.jsx",
    "hook": "templates/default/useTemplateName.jsx"
   },
   "path": "src/components",
   "withStyle": true,
   "withTest": true,
   "withStory": false,
   "withLazy": false,
   "withIndex": true,
   "withHook": true
  }
 }
}

Developing Personalized Component Types

By default, the Generate React CLI uses component.default configuration rules to generate new components. However, we may want to generate other types of components that have their own set of configuration rules, such as pages or layout components.

Additionally, we can also augment these types components with templates.
You can do this by extending the generate-react-cli.json configuration file as follows:

{
 "usesTypeScript": false,
 "usesStyledComponents": true,
 "testLibrary": "Testing Library",
 "component": {
  "default": {
     "customTemplates": {
      "component": "templates/default/TemplateName.jsx",
      "style": "templates/default/TemplateName.styled.jsx",
      "lazy": "templates/default/TemplateName.lazy.jsx",
      "index": "templates/default/index.jsx"
     },
     "path": "src/components",
     "withStyle": true,
     "withTest": false,
     "withStory": false,
     "withLazy": false,
     "withIndex": true
     },
    "page": {
     "customTemplates": {
      "component": "templates/page/TemplateName.jsx",
      "lazy": "templates/page/TemplateName.lazy.jsx",
      "style": "templates/page/TemplateName.styled.jsx",
      "index": "templates/page/index.jsx"
     },
     "path": "src/pages",
     "withLazy": true,
     "withStory": false,
     "withStyle": true,
     "withTest": false,
     "withIndex": true
    },
    "layout": {
     "customTemplates": {
      "component": "templates/layout/TemplateName.jsx",
      "index": "templates/layout/index.jsx"
     },
     "path": "src/layouts",
     "withIndex": true
   }
  }
 }
}

In the above configuration file, there are three types of components: default, page, and layout. Each type of component has its own configuration rules.
We can generate a component of a particular type using the - type option:

npx generate-react-cli component HomePage --type=page

The above command generates a new React component of the type page with the name HomePage.

We can also create our script for this by adding it to package.json to make it a bit faster and easier.

npm run page HomePage

{
  "name": "component-generate-react-cli",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "component": "generate-react component",
    "page": "generate-react component  --type=page",
    "layout": "generate-react component  --type=layout"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "eslint": "^8.57.0",
    "eslint-plugin-react": "^7.34.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "vite": "^5.2.0"
  }
}

You can see my proposed and finalized GLC component types in their final form on my GitHub, where not only are layouts and pages added, but there is also a template for quickly creating a redux store.

Benefits of Using Generate React CLI

While we have already discussed the basics of using Generate React CLI, let's dive deeper into its benefits and how it can transform your development process.

1. Increased Productivity

As mentioned earlier, manually creating React components can be a tedious and time-consuming task. With Generate React CLI, you can automate this process and save yourself hours of repetitive work. This allows you to focus on more critical aspects of your project, ultimately increasing your productivity.

2. Consistency in Code

Consistency is crucial in software development, especially when working with teams. With the Generate React CLI, all components are created using the same set of defaults, ensuring consistency throughout your codebase. This avoids any confusion or discrepancies in the code and makes it easier for team members to work together seamlessly.

3. Customizability

The ability to create custom templates and add them to Generate React CLI allows you to tailor the tool according to your specific project needs. This not only enhances its functionality but also makes it more versatile and suitable for a wide range of projects.

4. Time-Saving

With Generate React CLI, creating components is just a matter of executing a few simple commands. This not only saves time but also reduces the chances of errors that may occur while manually creating components. This feature is particularly useful when working on tight deadlines or complex projects.

Wrapping Up

Automating the process of generating React components can save a lot of time and improve productivity. With Generate React CLI, you can automate this process and customize it to suit your project's needs. Whether you are a novice or an experienced React developer, mastering component generation can make your work easier and more enjoyable.

Remember, being a successful software engineer is not just about writing code. It's also about finding ways to work smarter and making the most of the tools available to you.

I have tried to explain the practices with the best example that I know. If you know others, share in the comments for everyone!

Thanks For Reading, Follow Me For More

The Ultimate Guide to Node.js Version Managers: NVM, NVS, fnm, Volta, and asdf | Part 3

Erik Harutyunyan — Thu, 12 Sep 2024 12:27:39 +0000

asdf

asdf is a version manager that aims to be a “universal language version manager.” Created by Jean-Louis Reynaud in 2015, it supports a wide variety of programming languages and tools, including Node.js. It is designed to be easily extendable as new languages and tools are introduced.

asdf currently supports Node.js, Ruby, Python, Elixir, Java, Rust, PHP, Perl, Haskell, R, Lua, and Erlang. For all of these languages, you can manage different versions in one place via a single .tool-versions configuration file. This file can be included in your project repository so that the entire team uses the same versions of the tools.

How to Install and Use

Dependencies required for `asdf`:

First, we need to install some dependencies like coreutils, curl, and git. These dependencies are used by asdf to manage different language versions.

macOS:

Homebrew:

brew install coreutils curl git

Spack:

spack install coreutils curl git

Linux:

sudo apt install curl git

Installationon macOS and Linux:
Installation via Git:

Open the terminal and run the following command:

git clone https://github.com/asdf-vm/asdf.git ~/.asdf --branch v0.13.1

Or install via Homebrew (only for macOS):

brew install asdf

Shell Configuration: Add the following lines to your shell configuration file (e.g., ~/.bashrc or ~/.zshrc):

Bash/Zsh:

. $HOME/.asdf/asdf.sh

. $HOME/.asdf/completions/asdf.bash

Then apply the changes with:

source `~/.bashrc`

source `~/.zshrc`

Installation for Windows:
To install asdf on Windows, use the Windows Subsystem for Linux (WSL):

Set up WSL: Install and set up WSL on your system using the Microsoft guide.
Install asdf in WSL: Follow the installation instructions for asdf for Linux, as described above.

After setting up asdf in your shell configuration, plugins are installed to manage specific tools. When a tool is installed, shims (proxy files) are created, which intercept calls to executables, determine the tool version from .tool-versions, and execute the corresponding version.

Using asdf:

List all available plugins: asdf plugin list all
Add a plugin: asdf plugin add nodejs
List installed plugins: asdf plugin list
Remove a plugin: asdf plugin remove nodejs
Update a plugin: asdf plugin update nodejs
Update all plugins: asdf plugin update --all
Install a specific version or starting with a certain number of Node.js: asdf install nodejs 16.13.0 or asdf install nodejs latest:18
Install the latest available version: asdf install nodejs latest
Set the global version (default): asdf global nodejs 16.13.0
Set the version for the current project: asdf local nodejs 16.13.0
Remove a version of Node.js: asdf uninstall nodejs 16.13.0
View installed versions of Node.js: asdf list nodejs
View all available Node.js versions: asdf list all nodejs
Install versions from the .tool-versions file: asdf install
Show the current active version of Node.js: asdf current nodejs

.tool-versions Configuration File:

What it is: .tool-versions is a text file in the project's root directory that defines the versions of all tools used in the project.
Why it’s needed: Ensures that all team members use the same tool versions, simplifies environment setup, and prevents version conflicts.

Example content of the **.tool-versions** file:

nodejs 16.13.0

Advantages of asdf:

Versatility: Manage versions of various languages and tools with a single manager (one CLI).
Uniform commands: Using the same commands for all tools simplifies work and reduces the need to learn different commands.
Single configuration file: All tool versions for a project are specified in a single .tool-versions file, simplifying collaboration and preventing version conflicts.
Ease of migration: Supports existing configuration files like .nvmrc, .node-version, .ruby-version, making it easier to transition from other version managers.
Automatic version switching: asdf automatically switches tool versions based on the current directory.
Extensibility through plugins: Ability to add support for new languages and tools through plugins.
Autocompletion for shells: Supports autocompletion for popular shells (Bash, Zsh, Fish, Elvish).

Disadvantages of asdf:

Limited dependency support: Does not manage system package dependencies; requires manual installation.
Complex setup for beginners: Can be difficult to set up and integrate with the shell for beginners.
Low performance in some cases: Using shims can sometimes be slower than directly running tools.
Not suitable for all scenarios: Not always optimal for system tools or specific scenarios.
Less popular: Less known than specialized version managers, which can make it harder to find documentation and support.

Another tool quite similar to asdf is vfox. It supports version management for various programming languages. It also has an MSI installer, unlike asdf, and hence is painless to install for the majority of Windows users. In fact, the function is quite similar to asdf in that it supports Node.js versions by simply changing a configuration.

Comparing Node.js Version Management Tools

Selection of a tool that manages the version of Node.js requires considering every factor affecting performance, speed, and usability. Given below is a detailed comparison of key tools based on several factors:

Performance and Speed:

NVM: A reliable and flexible tool, but it can be slower when frequently switching versions due to using shell scripts. Suitable for most developers, especially if delays are not critical.
NVS: Provides good performance for managing Node.js versions in cross-platform environments. Its speed may be lower than tools written in faster languages, but it effectively handles the task and supports automatic version switching.
fnm: One of the fastest tools due to its Rust implementation. Provides instant version switching, making it ideal for large projects and developers who frequently change Node.js versions.
Volta: Automatically manages versions, saving time on setup and switching. An ideal choice for teams where automation and version consistency are important.
asdf: A universal tool for managing versions of many programming languages and tools. Suitable for multi-language projects, but may be slower and harder to set up for working only with Node.js.

Ease of Use:

NVM: Intuitive and easy to use, especially for beginners. Supports most operating systems and provides many useful commands for version management.
NVS: Convenient for experienced users thanks to support for automatic version switching and an interactive menu. However, beginners may need time to master the commands.
fnm: Provides high performance and is convenient for frequent version switching. Suitable for those who value speed and minimal response time.
Volta: Maximally simplifies version management through automation, reducing the likelihood of errors and saving time. Ideal for teamwork and process automation.
asdf: Suitable for developers working with multiple programming languages. Allows managing versions of different environments and tools through a single interface but requires more time to set up.

Conclusion

Version management of Node.js is one of the most common tasks that almost every developer does, whether it is supporting numerous projects or testing new features. Each tool here has its own advantages and disadvantages, so the decision about which tool to use will depend upon project and team needs.

Recommendations

NVM: Ideal for beginners and those looking for simplicity and flexibility. Provides convenient Node.js version management with a wide range of features.
NVS: Suitable for developers who need flexible Node.js version management in different environments. It is a good choice for working with multiple versions or forks, although it is not as fast as some alternatives.
fnm: Recommended for developers who value speed and performance. Due to its Rust implementation, fnm provides fast version switching. Suitable for those who frequently switch versions and work in a cross-platform environment.
Volta: Suitable for those who value automation and teamwork. This tool automatically manages Node.js versions for each project, saving time and reducing the risk of errors. Ideal for teams working on large projects where version consistency is important.
asdf: The best choice for developers working on multi-language projects. Its versatility and support for multiple languages make it convenient for diverse tasks. Suitable for those working with different programming languages and tools but requires a bit more time to set up.

No matter which of them to use, version management with Node.js is just such an important part of modern development that allows one to keep their applications stable and secure, with their performance optimized. Choose the tool that best fits your needs and your style.

The choice is yours! Depending on how you organize your work, each of these tools can become your faithful helper in managing Node.js versions.

Links to Additional Resources and Documentation

You can learn more about and decide on a Node.js version manager by following the official documentation and resources listed below:

Awesome Version Managers — a curated list of popular version management tools with helpful links and additional information.
Official NVM Documentation — a complete guide to installing and using NVM.
Official NVS Documentation — instructions for installing, configuring, and using NVS.
Official fnm Documentation — a guide for installing and applying fnm.
Official Volta Documentation — information about installing and using Volta.
Official asdf Documentation — a comprehensive guide to installing, configuring, and using asdf.

These resources will give you a much better understanding of what each tool can do and help you select the right version management method.

Prev to Part 2

The Ultimate Guide to Node.js Version Managers: NVM, NVS, fnm, Volta, and asdf | Part 2

Erik Harutyunyan — Thu, 12 Sep 2024 12:00:03 +0000

NVS (Node Version Switcher)

NVS is a handy, cross-platform utility for managing Node.js versions and their forks. It's written in JavaScript.

How to Install and Use

Installation on macOS and Linux:

Setting the installation path:

export NVS_HOME="$HOME/.nvs"

Clone the repository and install:

git clone https://github.com/jasongin/nvs "$NVS_HOME"
. "$NVS_HOME/nvs.sh" install

This adds NVS into the shell, making it ready for use.

Installation for Windows:

You can install using the MSI installer from GitHub.
You can also install via the winget command:

winget install jasongin.nvs

Or with Chocolatey:

choco install nvs

Using NVS:

Install the latest or LTS version of Node.js:** nvs add latest or nvs add lts
Install a specific version: nvs add 14.17.0 or nvs add 14
Remove versions: nvs rm 14.17.0 or nvs rm 14
View installed versions: nvs ls
View available versions for installation: nvs ls-remote
Switch to a specific Node.js version: nvs use 14
Set the default version: nvs link 20
Remove the default version link: nvs unlink 20
Enable automatic version switching based on the directory:** nvs auto on

This command enables NVS to automatically switch Node.js versions when entering directories containing .node-version or .nvmrc files.

Interactive NVS Menu:

When executed without parameters, NVS opens an interactive menu for switching and downloading Node.js versions.

Advantages of NVS:

Cross-platform: Works on Windows, macOS, and Linux.
Ease of use: Interactive menu for quick version management.
Automatic switching: Automatically selects the Node.js version based on the current directory.
Flexibility: Supports multiple remote sources and version aliases.
CI Support: Integration with CI environments like AppVeyor and Travis CI.

Disadvantages of NVS:

Node.js dependency: Requires Node.js to be installed to work.
Limited support in Windows Command Prompt: Automatic version switching is only supported in PowerShell and Bash.
Lower popularity: Smaller community and fewer resources for support compared to more well-known tools.
Limited interaction with system package managers: NVS does not integrate with system package managers like APT or Homebrew, which may limit its use in corporate or specialized environments.

fnm (Fast Node Manager)

fnm is one of the newest tools for managing Node.js versions, supporting caching and multithreading, making it significantly faster and more efficient. Written in Rust, fnm provides fast switching between Node.js versions and supports most operating systems.

How to Install and Use

Installation on macOS and Linux:

Script:

curl -fsSL https://fnm.vercel.app/install | bash

Homebrew:

brew install fnm

Installation for Windows:

Winget:

winget install Schniz.fnm

Scoop:

scoop install fnm

Chocolatey:

choco install fnm

Shell Configuration:

Bash: Add to the .bashrc file:

eval "$(fnm env --use-on-cd --shell bash)"

Bash: Add to the .bashrc file:

winget install Schniz.fnm

Zsh: Add to the.zshrc file:

winget install Schniz.fnm

Fish shell: Create ~/.config/fish/conf.d/fnm.fish and add:

fnm env --use-on-cd --shell fish | source

PowerShell: To edit the profile in PowerShell, run::

notepad $profile

Add the following line at the bottom of the profile file:

fnm env --use-on-cd --shell power-shell | Out-String | Invoke-Expression

Using NVS:

Install the latest Node.js version: fnm install latest
Show the current active version: fnm current
Install a specific version: fnm install 14.17.0 or fnm install 18
Remove versions: fnm uninstall 14.17.0 or fnm uninstall 18
View installed versions: fnm ls
View available versions for installation: fnm ls-remote
Switch versions: fnm use 16.13.0 or fnm use 20
Set the default version: fnm default 20
Automatic version switching based on specifications in .nvmrc or .node-version files: fnm use

Advantages of fnm:

High speed: Fast version switching due to Rust implementation.
Cross-platform: Supports most operating systems.
Minimal dependencies: fnm does not require many dependencies and works quickly even on old or low-powered machines.

Disadvantages of fnm:

Limited documentation: As a new tool, fnm has less documentation and resources for new users, which can make it harder to learn.
Less community support: fnm has fewer users, which can make it harder to find solutions to problems.

Volta

Volta is a brand new version manager for Node.js, based on Rust. It makes installing and managing Node.js-easier among other tools. It was created by Kevin Sawicki in 2019 and is still actively maintained. Volta works a little bit different from NVM; instead of keeping track of multiple Node.js versions, it maintains projects and their dependencies but supports other tools like npm and Yarn.

How to Install and Use

Installation on macOS and Linux:

curl https://get.volta.sh | bash

By default, the script will run and it will automatically update your shell's configuration file. If you don't want that, you can configure the shell yourself:

Set the VOLTA_HOME variable to $HOME/.volta.
Add $VOLTA_HOME/bin to the beginning of the PATH variable.

Installation for Windows։

Install Volta using Winget:

winget install Volta.Volta

Alternatively, you may download an installer and perform a manual installation from GitHub.

Using Volta:

Install a specific Node.js version: volta install node@16.13.0 or volta install node@22
Install the latest available or LTS version of Node.js: volta install node@latest or volta install node
Set the default version: volta install node@16
Show the current active Node.js version: volta which node
View installed tool versions: volta list all or volta list node for Node.js, volta list yarn for Yarn
Remove a Node.js version: volta uninstall node@16.13.0 or volta uninstall node@22
Update a tool to the latest version: volta install <tool>@latest
Pin a version for the project: volta pin node@20.16 or volta pin yarn@1.19

Example pinning in package.json**:

"volta": {
  "node": "20.16.0",
  "yarn": "1.19.2"
}

Advantages of Volta:

Automatic version management: Selects the required tool versions for each project.
High speed: Quickly installs and switches versions due to local caching.
Unified environment: All project participants use the same tool versions.
Avoids conflicts: Global packages are isolated, preventing dependency issues.
Convenience: Automatically locks tool versions for each project, simplifying dependency management and teamwork in CI/CD.
Security: Ensures that changes in one project do not affect others.
Versatility: Supports installing and managing not only Node.js but also tools like npm, Yarn, and even TypeScript, making it a versatile solution for JavaScript developers.
Cross-platform: Supports Windows, macOS, and Linux.

Disadvantages of Volta:

Only supports the Node.js ecosystem: Works only with Node.js, npm, Yarn, and JavaScript tools. This limits its use for developers working with other programming languages.
Smaller community and support: Less documentation and support compared to NVM or fnm.
Limited configuration flexibility: Fewer options for detailed environment configuration.
Not all features work the same across platforms: Some features may have limitations or work differently on Windows compared to Unix platforms, causing unpredictable behavior.
Dependency on package.json configuration: For Volta to work correctly, it requires precise settings in package.json, adding a dependency on the proper filling of this file.

Prev to Part 1

Next to Part 3

The Ultimate Guide to Node.js Version Managers: NVM, NVS, fnm, Volta, and asdf | Part 1

Erik Harutyunyan — Thu, 12 Sep 2024 10:28:30 +0000

Introduction

Hey! If you ever developed with Node.js, you understand that quite often for projects, there’s a need to use different versions. Probably one project would work on version 10, another on version 14, and a new one requires the latest, say 20. Along with new features on each new release, a set of new challenges emerge. These are compatibility with libraries and frameworks, tests of new functionality, and stability for existing projects.

I faced this problem myself when I was working on several projects at one time. What seemed to be a very simple task — installation of Node.js — turned into chaos when each project required its version. In this article, I will tell you how I solved this problem using Node.js version management tools like NVM, NVS, fnm, Volta, and asdf. I’ll be describing how they work, listing pros and cons, and giving you my personal experience in order to help you choose the best node version manager for your needs.

Why is Version Management Important for Developers?

Compatibility with Libraries and Frameworks

Node.js itself is rapidly developing, and so is its tooling ecosystem. New libraries, frameworks, and versions require a great deal of flexibility in using different Node.js versions. Some view frameworks may only be compatible with particular Node.js LTS versions that one would have to switch to according to the project being developed. Switching between different Node.js versions will help avoid compatibility problems and keep the code running smoothly.

Consider that you work on some old project, which depends on a specific version of the library. You at the same time run some new project depending on the latest version of Node.js since it uses the features available only within the recent version. New versions of Node.js may include functions incompatible with versions of these libraries, and that will lead to application performance errors or instability.

One day, I got into such a predicament where I needed to install different versions of Node.js manually, work with that, then reinstall another version, and so on and so forth. Believe me, that was a nightmare. And then, it dawned on my mind that without a node version manager utility tool, I couldn’t do anything.

New Feature Testing

Software development is all about continuous testing and implementation of new features. Each new version of Node.js exposes developers to additional language and platform capabilities, such as enhanced asynchronous programming support, improvements in the module system, and new APIs. Such features would then be tested on real projects to ascertain how effective they were and whether to implement them into the main application.

But what if your current project is running stable under an older version of Node.js, and this might get broken after upgrading Node.js?

That often meant checking new features in the master branch, or a copy of the project using the new Node.js version. Luckily, tooling for version management allowed me to switch between different versions with no brokenness in the master branch.

Ensuring Stability and Security

Stability and security are the major factors for any project. In older versions of Node.js, some bugs may be held, which get fixed with new releases. Upgrading to a recent version is pretty risky if an application depends on the older libraries that support new platform version upgrades.

Versioning Node.js allows you to safely upgrade the platform version while retaining the possibility to roll back in the case of problems, thus helping developers to keep their application stable and safe from vulnerabilities.

Ways to Manage Node.js Versions

Standard Installation

If you are a newcomer to Node.js, you’ve probably downloaded it from its official website and installed it. That is the most straightforward way that is great when you need only one version of Node.js. You download the installer, follow the instructions, and voilà — Node.js is on your computer.

But imagine that you work with several projects and all of them require some specific versions of Node.js. For example, you have some old project on Node.js 10 and some new one on Node.js 20. Constant reinstalling of Node.js is too time-consuming and just inconvenient.

Node.js Version Management Tools

There are plenty of tools for managing Node.js versions. In this article, I’m going to discuss five popular options: NVM (Node Version Manager), NVS (Node Version Switcher), fnm, or Fast Node Manager, Volta, and asdf. All of these come with their ways and features to manage the versions, which might be applicable for various tasks and teams.

Those version managers will automate the management process, manage the consistency of the versions, and avoid compatibility issues, helping you choose the right tool for your needs.

Integration with CI/CD Tools

When you start working in a team, version management becomes way more important. Each developer might own their version of Node.js, which may get very problematic at different development and deployment stages as different bugs could arise. In large projects and teams where automation plays a huge role, such Node.js version management tools can be integrated into the CI/CD processes.

Tools like NVM can be integrated into CI/CD processes, allowing each build to use the required version of Node.js without manual intervention, ensuring that every team member uses the correct Node.js version for their tasks. This helps maintain stability and consistency across different environments, such as development environment, testing, and production.

Overview of Node.js Version Management Tools

Now, the different tools managing different Node.js versions have their pros and cons, and I’ll try to explain what situation each tool fits best.

NVM (Node Version Manager)

NVM is short for Node Version Manager. It is one of the oldest and still very popular managers of Node.js versions. NVM was created by Tim Caswell in 2010 and is still actively maintained.

NVM downloads each Node.js version into its own, self-contained directory at ~/.nvm/versions/node/. When you’re switching between versions by using nvm use, it updates your $PATH environment variable to point to the appropriate directory.

How to Install and Use

Installation on macOS and Linux:

To install NVM on macOS and Linux, follow these steps:

Open the terminal and enter the following:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

This will download and run the install script for NVM from the official NVM GitHub repository, and the NVM will be installed on your system. Once it has been installed you can verify that NVM has been installed using the command:
nvm — version

If everything went smoothly, you should see the NVM version.

Installation for Windows:

Download the nvm-windows installer from its GitHub repository.
Run the installer and follow the on-screen instructions, making sure to choose the correct installation path.

During the installation process, it will automatically set up NVM configurations in your profile. If you are using zsh, that would be ~/.zshrc; or if you’re using bash, that would be ~/.bashrc, ~/.bash_profile, or some other profile.

If that does not happen automatically, add the NVM configuration to the profile file yourself:

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")" [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

Using NVM:

List available Node.js versions: nvm ls-remote
Install the latest Node.js version: nvm install node
Install a specific version: nvm install 14.17.0 or nvm install 14
Switch between versions: nvm use 14.17.0 or nvm use 14
Set default version: nvm alias default 18
View installed versions: nvm ls
Version from .nvmrc: If your project directory contains a .nvmrc file specifying the Node.js version required—e.g., 16.13.0 or 20—you can automatically switch to that version with nvm use.

Advantages of NVM:

Installation and Usage: Done within a few minutes, and thereafter, it's quite easy to handle various Node.js versions.
Flexibility: It allows one to run or install many Node.js versions on one device without conflicts.
Compatibility: NVM works on most Unix-like systems and runs on macOS or Linux. For Windows, there's a port called nvm-windows.
Support for .nvmrc files: This file allows you to automatically switch to the desired Node.js version when entering a project directory.
Community and documentation: A substantial user base with good documentation makes NVM a trustworthy choice.

Disadvantages of NVM:

Performance: Sometimes, NVM can be slower than other tools, especially when frequently switching between versions.
Manual management: For some developers, manually switching versions may seem inconvenient, especially if automation is required.
Inconvenience on Windows: If you are working on Windows, using NVM through WSL can be inconvenient.

Next to Part 2

Forem: Erik Harutyunyan

Automate Like a Pro: Mastering Component Generation in React with Generate React CLI

A Brief Introduction to React Components

The Need for Automating React Components Generation

Introducing Generate React CLI

Using Generate React CLI

Override the default configuration with options

Generate React CLI as a dev dependency

Customize Component Templates

Generate Custom Component Files

Developing Personalized Component Types

Benefits of Using Generate React CLI

1. Increased Productivity

2. Consistency in Code

3. Customizability

4. Time-Saving

Wrapping Up

The Ultimate Guide to Node.js Version Managers: NVM, NVS, fnm, Volta, and asdf | Part 3

asdf

How to Install and Use

Dependencies required for asdf:

macOS:

Linux:

Using asdf:

Advantages of asdf:

Disadvantages of asdf:

Comparing Node.js Version Management Tools

Performance and Speed:

Ease of Use:

Conclusion

Recommendations

Links to Additional Resources and Documentation

The Ultimate Guide to Node.js Version Managers: NVM, NVS, fnm, Volta, and asdf | Part 2

NVS (Node Version Switcher)

How to Install and Use

Using NVS:

Interactive NVS Menu:

Advantages of NVS:

Disadvantages of NVS:

fnm (Fast Node Manager)

How to Install and Use

Using NVS:

Advantages of fnm:

Disadvantages of fnm:

Volta

How to Install and Use

Using Volta:

Advantages of Volta:

Disadvantages of Volta:

The Ultimate Guide to Node.js Version Managers: NVM, NVS, fnm, Volta, and asdf | Part 1

Introduction

Why is Version Management Important for Developers?

Compatibility with Libraries and Frameworks

New Feature Testing

Ensuring Stability and Security

Ways to Manage Node.js Versions

Standard Installation

Node.js Version Management Tools

Integration with CI/CD Tools

Overview of Node.js Version Management Tools

NVM (Node Version Manager)

How to Install and Use

Using NVM:

Advantages of NVM:

Disadvantages of NVM:

Dependencies required for `asdf`: