NPM is an important web development tool that helps you to install JavaScript packages.
We’ll set up a little project to see what it can do.
Step 1
Install node and NPM.
Windows
If you’re using Windows, I would recommend downloading git bash. Then, you can skip to Step 2.
Mac
If you’re using a Mac, open up your terminal and follow the steps below.
We’ll install node using a package called NVM (Node Version Manager). Managing Node versions can be useful. Since we already have brew installed, this will be a breeze.
brew install nvm
nvm install node
nvm use node
Next, you can run the following command in your terminal OR add some commands to your .bash_profile file.
Option 1. Run the following command in your terminal.
export NVM_DIR="$HOME/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion
Option 2. Add the following commands to your .bash_profile file.
Create the .bash_profile file if it doesn’t already exist. You can any text editor you like, or you can use the terminal. Open up your terminal and run the following command.
vi ~/.bash_profile
export NVM_DIR=~/.nvm source $(brew --prefix nvm)/nvm.sh
Add the contents above to the file.
Save the file and quit (type :q and hit enter if you’re using vi to save and exit the file).
Close the terminal and open it up, again. You should be able to check the NPM version.
npm -v
Installing Node will automatically install NPM for you.
Windows or Mac
There’s a really neat alternative to installing node on your host machine if you have Docker installed
docker run -w /app -v “$(pwd)”:/app node npm init -y
I’ll explain each part of the command below.
-w /app
Set the working directory of the container. Without setting this option, docker would create the package.json file in the root of the container (/), and it wouldn’t appear in your host machine’s folder.
“$(pwd)”:/app
Connect your terminal’s current directory to /app in the container.
node
Run the node image.
npm init -y
Initialize a package.json file. The “y” option sets all of the defaults (no prompts to enter).
docker run -w /app -v “$(pwd)”:/app node npm install
Install all of the packages in the package.json file. It will create a node_modules folder and package-lock.json file.
Step 2
Create the files.
Create a folder called jsone and a file called index.html.
mkdir ~/Code/jsone
cd ~/Code/jsone
touch index.html
Add the following code to that file.
<script src="src/index.js"></script>
Next, initialize a package.json file in the jsone folder.
cd ~/Code/jsone
npm init -y
Using the “-y” flag causes all of the questions to be skipped, and you’ll immediately get the package.json file.
Now, it’s time to install a couple different packages that will help immensely with local development
npm install –save-dev webpack
Webpack helps a lot with local development and managing assets like JavaScript and CSS.
npm install –save-dev webpack-cli
This package gives us a couple useful commands.
npm install –save-dev webpack-dev-server
Instead of using Docker or Vagrant to serve our static website, we can use this webpack package.
Create a folder called src and a file called index.js in that folder.
cd ~/Code/json
mkdir src
touch index.js
Add the following code to the index.js file.
console.log('Hello, World!');
Run the command to fire up your dev server and visit it in the browser.
npx webpack serve
Visit localhost:8080 in your browser. Open up dev tools. You should see “Hello, World!” printed to the console.
These are just a couple useful packages you can install with NPM.