Environment variables (zsh terminal) installed through npm on MacOS 12.4 Monterey - SOLVED - npm

Question

Background:
Dear Stackoverflow community. I recently switched from Windows to MacOS and am at a loss how to configure environment variables. Many of the previous questions asked here are about bash instead of zsh.
Goal:
I am trying to install an npm package globally. For instance:
npm install -g vercel
or any other package, and use it in my Visual Studio Code terminal (also zsh). If I want to deploy code I have to use 'npx vercel deploy' every time. I want to be able to use "vercel deploy" but instead I get:
zsh: command not found: vercel
What I tried so far:
Installing the package in zsh and visual studio code terminals (didn't work)
Setting the path equal on both VS and terminal: export PATH=/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin
I learned that you need to add environment variabels to a .zshrc file. I don't seem to have a zshrc file. When I do:
sudo ~/.zshrc
Password: XXXXXX
sudo: /Users/vincent/.zshrc: command not found
I am getting another error.
I read in the zsh man file that you should use $HOME/.zshrc instead. Again I am getting the same errors:
vincent#Vincents-MacBook-Air-2 ~ % $HOME/.zshrc
zsh: permission denied: /Users/vincent/.zshrc
vincent#Vincents-MacBook-Air-2 ~ % sudo $HOME/.zshrc
sudo: /Users/vincent/.zshrc: command not found
Update 1:
#slebetman Thank you for your explanation. When I open the terminal I go to home via "cd $HOME" which puts me in in the home directory. However there is no way for me to create a .zshrc file in that directory. Neither via touch or vs code. I am getting the following error: "Unable to write file '/home/.zshrc' (Unknown (FileSystemError): Error: ENOTSUP: operation not supported on socket, open '/home/.zshrc')"
Update 2:
I did manage to find the .zshrc file in visual studio code under /etc. I hope this will work. I was able to overwrite the file with Sudo and add environment variables to it.
Add this to the file .zshrc file under /etc and force overwrite it:
export vercel=/Users/vincent/.npm-global/bin/vercel
Screenshots below for those who will try in the future:
Image with .zshrc file layout
Final remarks:
I don't understand how it is so difficult to add environment variables on Mac while everything else is so easy.
I have read many different questions on stackoverflow, and I can't seem to solve it. Also since I am a newbie I am not allowed to comment on there so I post here in the hope that anyone can help me :)
Best,
Vincent

Answer 1

Note that when you do:
npx vercel deploy
Npm will execute vercel for you without installing it. It does that by temporarily downloading vercel. If you want to run vercel directly without using npx then simply don't use npx. Install it instead:
npm install -g vercel
The -g flag installs the module globally and if the module has a CLI it will be available globally as well (note that depending on your setup you may need admin/sudo privileges to use the -g flag). Now you can run vercel by simply typing:
vercel deploy
This works in all operating systems supported by node.js and npm. That means you can even do this in Windows. In fact I use npm to distribute my tools in a simple cross-platform way so I don't have to support multiple package managers like chocolatey (Windows), homebrew (Mac OS), deb (Debian based distros), rpm (Redhat based distros) etc. (npm does not require your software to be written in node.js - I have published packages on npm written in tcl and bash).