JavaScript Environment Setup

Installing Node.js & Development Tools 🚀

CSCI 3403 - Web Programming

Week 9, Class 18

Let's get your JavaScript environment ready!

Today's Learning Objectives

🎯 Understand what Node.js is and why we need it
🎯 Install NVM (Node Version Manager)
🎯 Install Node.js using NVM
🎯 Learn the difference between NVM and NPM
🎯 Run the Node console (REPL)
🎯 Understand deployment considerations

What is Node.js? 🤔

JavaScript Outside the Browser!

Browser JavaScript

Runs in Chrome, Firefox, etc.
Access to DOM
window object
Client-side only

Node.js JavaScript

Runs on your computer
Access to file system
process object
Server-side capable

Think of it this way: Node.js lets JavaScript escape the browser sandbox!

Why Do We Need Node.js? 💡

Modern Web Development Requirements

📦 Package Management: Install and manage libraries (React, Vue, etc.)
🛠️ Build Tools: Compile, bundle, and optimize your code
🧪 Testing: Run automated tests for your JavaScript
🖥️ Server Development: Build APIs and backend services
⚡ Development Tools: Live reload, linting, formatting

Coming up: We'll use Node.js for React, build tools, and more!

Understanding the Tools 🔧

NVM vs Node vs NPM - What's What?

NVM 🔄

Node Version Manager

Manages multiple Node.js versions

Like a wardrobe for Node versions

Node.js ⚙️

JavaScript Runtime

Executes JavaScript code

The actual engine

NPM 📦

Node Package Manager

Installs JavaScript libraries

Your library shopping cart

Don't Confuse: NVM manages Node versions. NPM manages packages. They sound similar but do different things!

Installation Strategy 📋

Why Use NVM Instead of Direct Installation?

✅ With NVM

Switch Node versions easily
Test on multiple versions
No permission issues
Project-specific versions
Easy upgrades

❌ Without NVM

Stuck with one version
Complex upgrade process
Potential permission problems
System-wide installation only
Harder to troubleshoot

Pre-Installation Check 🔍

Do You Already Have Node?

Let's check if you already have Node.js installed:

$ node --version
-bash: node: command not found

$ which node
# No output means not installed

If you see a version number: You have Node! But we'll still install NVM for better management.

Installing NVM on Linux 🐧

Step 1: Download and Install Script

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

Step 2: Add to Shell Profile

                    export NVM_DIR="$HOME/.nvm"

                    [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

                    [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"

Step 3: Reload Configuration

source ~/.bashrc

Ubuntu/Debian Users: You might need to install curl first: sudo apt install curl

Installing NVM on macOS 🍎

Step 1: Install Homebrew (if needed)

                    /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
                

Step 2: Install NVM via Homebrew

brew install nvm

Step 3: Create NVM Directory & Configure

                    mkdir ~/.nvm

                    echo 'export NVM_DIR="$HOME/.nvm"' >> ~/.zshrc

                    echo '[ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && \. "/opt/homebrew/opt/nvm/nvm.sh"' >> ~/.zshrc

                    source ~/.zshrc

Note: macOS uses zsh by default. If using bash, replace .zshrc with .bash_profile

Verifying NVM Installation ✅

Make Sure Everything Works!

$ nvm --version
0.39.0

$ command -v nvm
nvm

$ nvm list
No versions installed yet

Troubleshooting:

If "command not found": Close and reopen terminal
Still not working? Run: source ~/.bashrc or source ~/.zshrc

Installing Node.js with NVM 📥

Step 1: Install LTS Version

$ nvm install --lts
Downloading and installing node v20.11.0...
##################################################### 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v20.11.0 (npm v10.2.4)

What is LTS?

Long Term Support - Stable version supported for 30 months. Best for production!

Setting Your Node Version ⚙️

Step 2: Configure Default Version

$ nvm use --lts
Now using node v20.11.0 (npm v10.2.4)

$ nvm alias default lts/*
default -> lts/* (-> v20.11.0)

$ node --version
v20.11.0

$ npm --version
10.2.4

Success! You now have Node.js and npm installed! 🎉

Essential NVM Commands 📝

Your NVM Cheat Sheet

                # List installed versions

                nvm list

                # List available versions to install

                nvm list-remote

                # Install specific version

                nvm install 18.19.0

                # Switch to a version

                nvm use 18.19.0

                # Set default version

                nvm alias default 20.11.0

                # Uninstall a version

                nvm uninstall 16.14.0

Pro Tip: Create a .nvmrc file in your project with the Node version!

Using the Node Console 💻

Interactive JavaScript in Your Terminal!

$ node
Welcome to Node.js v20.11.0.
Type ".help" for more information.
> console.log("Hello, Node!")
Hello, Node!
> 2 + 2
4
> const name = "Student"
> `Hello, ${name}!`
'Hello, Student!'
> .exit
$

REPL = Read-Eval-Print Loop: Perfect for testing small code snippets!

Node REPL Special Commands 🎮

                # Exit the REPL

                .exit

                # Show help

                .help

                # Save session to file

                .save mySession.js

                # Load JavaScript file

                .load myCode.js

                # Clear the REPL context

                .clear

                # Break out of multiline expression

                .break

Try This:

Open Node console and create a simple function to calculate area of a circle!

Let's Practice! 🏃‍♂️

10-Minute Setup Challenge

Verify NVM is installed: nvm --version
Install Node LTS: nvm install --lts
Set as default: nvm use --lts
Check versions: node -v and npm -v
Open Node REPL: node
Create a function that reverses a string
Test with: reverseString("hello")
Exit with .exit

Troubleshooting Common Issues 🔧

Issue 1: "nvm: command not found"

Solution: Source your profile file or restart terminal

source ~/.bashrc or source ~/.zshrc

Issue 2: "Permission denied" errors with npm

Solution: Never use sudo with npm! NVM prevents this issue.

Issue 3: Node version keeps resetting

Solution: Set a default: nvm alias default node

Golden Rule: When in doubt, close terminal and reopen!

Quick NPM Preview 📦

Your Package Manager is Ready!

NPM came with Node.js - you already have it!

                # Check npm version

                npm --version

                # Initialize a new project

                npm init -y

                # Install a package (example)

                npm install lodash

                # Install dev dependency

                npm install --save-dev eslint

                # Run scripts

                npm run start

Coming Soon: We'll dive deep into NPM when we start building projects!

Node.js: Development Superpower 💪

How Node Makes Development Easier

✨ Development Benefits

One language everywhere (JavaScript)
Huge ecosystem (NPM packages)
Fast development cycles
Great for APIs and microservices
Excellent tooling support
Hot reloading & live development
Easy to get started

🚀 What You Can Build

REST APIs
Real-time applications
Command-line tools
Build tools & bundlers
Desktop apps (Electron)
Mobile apps (React Native)
Serverless functions

But... Deployment Gets Interesting 😅

The Other Side of the Coin

⚠️ Deployment Considerations

While Node.js makes development smooth, deployment can be... educational:

📚 Learning Opportunities

Managing dependencies in production
Handling different Node versions
Process management (PM2, forever)
Memory management concerns
Security updates & patches
Scaling considerations

🎓 Growth Areas

DevOps skills become important
Docker containers often needed
Monitoring becomes crucial
Error handling is critical
Performance tuning required
Infrastructure knowledge helps

The Good News: These challenges make you a better developer! Every deployment issue is a learning opportunity.

The Professional Perspective 👔

Growing Into Production-Ready Development

The Journey from Local to Production

"It works on my machine!" → "It works in production!"

🌱 Starting Out

npm install everything
node_modules = 500MB
Works locally perfectly
"Why is deployment hard?"

🌳 Growing Experience

Understanding package-lock.json
Using environment variables
Learning about CI/CD
Containerization makes sense

Remember: Every senior developer was once confused by deployment. The complexity is what makes it valuable to learn!

Setting Yourself Up for Success 🎯

Node.js Best Practices from Day One

✅ Always use NVM for version management
✅ Stick to LTS versions for important projects
✅ Commit package-lock.json to git
✅ Never commit node_modules/
✅ Use .nvmrc files in projects
✅ Learn about environment variables early
✅ Understand the difference between dependencies and devDependencies

Pro Tip: Create a .gitignore file with node_modules/ as the first line in every project!

What's Coming Next 🚀

Your Node.js Journey Continues

Upcoming Topics:

📦 Deep dive into NPM and package.json
⚛️ Installing and using React
🛠️ Build tools (Webpack, Vite)
🧪 Testing with Jest
🖥️ Creating a Node.js server
🔌 Working with APIs

Homework: Create a simple Node.js script that reads a file and counts words!

Today's Takeaways 🎓

You Can Now:

✅ Explain what Node.js is and why we need it
✅ Install and manage Node versions with NVM
✅ Use the Node REPL for testing code
✅ Understand the ecosystem (NVM, Node, NPM)
✅ Troubleshoot common installation issues

Quick Check:

Run node -v and npm -v - You should see version numbers!

Next Class: We'll start building with NPM packages!