npm tips and tricks

npm-tips-and-tricks.md

package.json

engines

It's good practice to set the required node and npm version for your project. To do so add to the package.json:

"engines": {
  "npm": ">=9.0.0 <10.0.0",
  "node": ">=18.0.0 <19.0.0"
}

Then create a new file .npmrc in the same path of the package.json and add:

engine-strict=true

Then create a new file .nvmrc in the same path of the package.json and add (adjust the version on your needs):

v18.20.1

In this way by calling nvm use the correct node version will always be used.

updates

Simply running npm update isn't always ideal, since the command will always stick to the defined semantic versioning sintax inside the package.json itself. A quick way to check which packages are behind the real latest version available on npmjs.com is to use raineorshine/npm-check-updates with npx npm-check-updates (no installation needed). When you finally decide to upgrade the packages to the latest version available, type this: npx npm-check-updates -u (it will simply update the versioning rules for all the outdated packages inside the package.json) followed by npm install (the actual update). Otherwise you can manually select which packages to update with npm install package-name@latest (you can add as many packages as you want here).

packages

Some useful packages to install when developing.

Tailwind CSS

Refer the official documentation and choose the correct guide depending on your current framework/stack. Also add the plugin package for Prettier that will add "Automatic class sorting with Prettier". If handling md/mdx files for a blog like setup, consider adding "@tailwindcss/typography".

Prettier

Install Prettier with the following command.

npm install --save-dev --save-exact prettier

Add the two following scripts to the package.json file.

"prettier:check": "prettier --check .",
"prettier:write": "prettier --write ."

Create ".prettierrc.json" in the project root.

{
  "printWidth": 120,
  "tabWidth": 2,
  "singleQuote": false,
  "trailingComma": "es5"
}

Create ".prettierignore" in the project root. Fill this file configuration based on the current project.

# Ignore artifacts:
node_modules/

ESLint

Install ESLint with the following command.

npm init @eslint/config

TODO: Add the steps for making ESLint work well with Prettier.

JSON Server

Install JSON Server with the following command (globally or locally).

npm install -g json-server
npm install json-server

Add the following script to the package.json file.

"server": "json-server --watch server/db.json",
"server:static": "json-server --watch server/db.json --static server"

Create "/server/db.json" (the content can be empty initially). Create "/server/assets/" sub folder. Here you can provide any extra file that will be served under "/assets/file-name.example" (you must run "server:static").

licenses

• https://github.com/ironSource/license-report
• https://github.com/davglass/license-checker
• https://spdx.org/licenses
• https://opensource.org/licenses
• https://joinup.ec.europa.eu/collection/eupl/solution/joinup-licensing-assistant/jla-compatibility-checker
• https://docs.npmjs.com/cli/v10/configuring-npm/package-json#license

npx license-report
npx license-checker --summary