npm package mgmt

npm setup, initialization, permissions

Resolving permissions issues encountered when trying to install Node.js packages globally using npm (Node Package Manager) on macOS.

Example: The error message indicates that there is a permissions issue when trying to copy the irestore binary to /usr/local/bin/irestore. This is a common issue on macOS when attempting to install packages globally without sufficient permissions.

Specifically, the issue arises when the user does not have the necessary permissions to copy files to the /usr/local/bin directory, which is a common location for installing executable binaries.

download node.js/npm installer for macOS https://nodejs.org/en/download/prebuilt-installer

Here are a few ways you can resolve this issue:

1. Use `sudo`

You can run the installation command with sudo to grant elevated permissions:

sudo npm install

This will prompt you for your password and then run the command with administrative rights.

2. Change Ownership of `/usr/local/bin`

If you prefer not to use sudo every time, you can change the ownership of the /usr/local/bin directory to your user account:

sudo chown -R $(whoami) /usr/local/bin

After changing the ownership, try running the npm install command again.

3. Use nvm (Node Version Manager)

If you're not already using nvm, consider installing it. nvm allows you to manage multiple versions of Node.js and installs them in your home directory, eliminating the need for elevated permissions:

Install nvm: Follow the instructions on the nvm GitHub page.
Install Node.js via nvm:
```
nvm install node
```
Use nvm's Node.js: Set the default Node.js version if necessary:
```
nvm alias default node
```
Try Installing Again: Now run the npm install command again in your project directory.

4. Check npm's Prefix Configuration

If you want to avoid using sudo and don't want to change permissions, you can configure npm to use a different directory for global installs:

Create a directory in your home:
```
mkdir "${HOME}/.npm-global"
```

Configure npm to use this directory:

npm config set prefix "${HOME}/.npm-global"

Add the new directory to your PATH: Add the following line to your shell profile (e.g., ~/.bashrc, ~/.zshrc, etc.):
```
export PATH="$HOME/.npm-global/bin:$PATH"
```
Reload your shell:
```
source ~/.bashrc  # or source ~/.zshrc
```
Try Installing Again: Now run npm install again.

Initializing React Apps (Setup)

Create React App (CRA)

Create a new React application:
```
npx create-react-app <project_name>
```

Next.js Next.js is a React framework specialized in server-side rendering (SSR), static site generation (SSG), and hybrid applications. It provides features like file-based routing, image optimization, and is particularly suited for projects where SEO and fast initial load times are priorities.

npx create-next-app my-app
cd my-app
npm run dev

Vite.js https://vite.dev/guide/ Vite.js is a build tool that supports various frameworks including React, Vue, and Svelte. It focuses on client-side rendering, offering fast development setup and hot module replacement. Vite.js is ideal for projects where rapid development and reduced server load are key considerations.

npm create vite@latest my-app --template react
cd my-app
npm install
npm run dev

cd my-app
npm init vite@latest . --template react

Rollup Rollup is a module bundler that can be configured for React projects. It provides a more manual setup but allows for more customization.

Basic setup:

Install dependencies:

npm init -y 
npm install react react-dom rollup rollup-plugin-babel @babel/preset-react

Create a rollup.config.js file for your configuration.

Manual Setup with Webpack If you want complete control, you can set up a React application manually using Webpack and Babel.

Basic steps:

Create a new directory and initialize npm:

npm init -y

Install dependencies:

npm install react react-dom webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react

Set up Webpack and Babel configuration files.

List Dependencies

List all installed dependencies in the current project:
```
npm list
```
List globally installed dependencies:
```
npm list -g
```
List dependencies with different depths:
- Depth 0 (only top-level dependencies):
```
npm list --depth=0
```
- Depth 1:
```
npm list --depth=1
```
- Depth 2:
```
npm list --depth=2
```
- Depth 3:
```
npm list --depth=3
```
Print the dependency tree for production packages (omit dev dependencies):
```
npm list --all --omit=dev
```
List dependencies of a specific package (e.g., react-scripts version 5.0.1):
```
npm view [email protected] dependencies
```
View the dependency tree of an npm module:
- Dependency Tree Listing

Track Dependencies

depcheck - Track unused dependencies:
- Install:
```
npm install -g depcheck
```
- Run:
```
depcheck
```
npm-check - Interactive dependency check and cleanup:
- Install:
```
npm install -g npm-check
```
- Run:
```
npm-check
```
Guide to removing unused dependencies in React:
- How to Remove Unused Dependencies

Uninstall Packages

Uninstall a package:
```
npm uninstall <package_name>
```

Clean Cache

Force clean npm cache:
```
npm cache clean --force
```

`.npmrc` Configuration

Flags for npm installations:
- --force: Forces npm to perform actions that might be considered unsafe.
- --legacy-peer-deps: Ignores peer dependencies when building a package tree. This was default behavior in npm versions 3 through 6.
  - More about --legacy-peer-deps

Common Create React App Tasks

Create React App example and tasks:
- Create React App Example

React App Cleaners

npkill - Clean up unused npm packages:
- npkill GitHub
react-app-cleaner - Tool to clean React app files:
- React App Cleaner GitHub
Remove unnecessary files in a React app:
- Creating Shell Command for Formatting Files

Updating packages

Check outdated packages/ dependencies:

npm outdated

Using `npm update`

Open your terminal and navigate to your project directory.
Run the following command:
```
npm update
```
This command will update all the packages to the latest version according to the version ranges specified in your package.json file.

Full Update (node_modules):

Clean the Project: Start fresh by removing node_modules and the lock file.

rm -rf node_modules package-lock.json
npm install

Before npm install Check the package.json: Check your package.json for unused packages, non-update dependencies == etc. if you intend to use a plugin that has a specific range. If you need a specific version, you can specify it there.

Update specific package:

Update specific package/dependency to latest version:

npm install package@latest

Manually Edit package.json

If you want to update to the latest versions (including breaking changes), you can manually edit your package.json:

Open package.json and change the version numbers for the dependencies and devDependencies to "latest" or the specific version you want. Example:
```
"dependencies": {
  "package-name": "latest"
}
```
After making changes, run:
```
npm install
```

Using `npm-check-updates`

npm-check-updates

For more control and to update to the latest versions without manually editing the package.json, you can use the npm-check-updates package:

Install npm-check-updates globally:
```
npm install -g npm-check-updates
```
Run npm-check-updates:
```
ncu
```
This will show you which packages can be updated.
Update all packages:
```
ncu -u
```
Install the updated packages:
```
npm install
```

After Updating

Check for Vulnerabilities: After updating, it's a good idea to check for vulnerabilities:
```
npm audit
```
Run Your Tests: Make sure to run your tests to confirm that everything works as expected after the updates.

cspence001/npmmgmt.md