Skip to main content

JavaScript & Node.js Development Setup

Complete setup guide for JavaScript development with Node.js, covering modern tooling, package management, and development workflows.

Overview​

JavaScript is essential for web development, full-stack applications, and increasingly for desktop and mobile apps. This guide covers setting up a professional JavaScript development environment with Node.js, modern package managers, and essential tools.

Prerequisites​

Before starting, ensure you have:

  • Terminal Access: Command line interface (Terminal, PowerShell, or WSL)
  • Internet Connection: For downloading packages and dependencies
  • Administrator Access: For installing system-level tools
  • Basic familiarity with command line operations
  • RAM: 8GB minimum, 16GB recommended
  • Storage: 10GB+ free space for Node.js and dependencies
  • OS: macOS 10.15+, Windows 10+, or Linux (Ubuntu 18.04+)

Installation Options​

Node Version Manager allows you to install and switch between multiple Node.js versions easily.

macOS/Linux - Using NVM​

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

# Restart terminal or reload shell configuration
source ~/.bashrc
# or
source ~/.zshrc

# Install latest LTS Node.js
nvm install --lts
nvm use --lts
nvm alias default node

# Verify installation
node --version
npm --version

Windows - Using NVM-Windows​

# Download and install nvm-windows from:
# https://github.com/coreybutler/nvm-windows/releases

# After installation, restart PowerShell as Administrator
nvm install lts
nvm use lts

# Verify installation
node --version
npm --version

Option 2: Direct Installation​

macOS with Homebrew​

# Install Node.js directly
brew install node@20

# Add to PATH if needed
echo 'export PATH="/opt/homebrew/opt/node@20/bin:$PATH"' >> ~/.zshrc
source ~/.zshrc

Windows with Package Manager​

# Using winget
winget install OpenJS.NodeJS.LTS

# Using Chocolatey
choco install nodejs-lts

Linux (Ubuntu/Debian)​

# Add NodeSource repository
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -

# Install Node.js
sudo apt-get install -y nodejs

# Verify installation
node --version
npm --version

Essential Tools & Package Management​

1. Package Manager Setup​

PNPM is faster and more efficient than npm, with better dependency management.

# Install pnpm globally
npm install -g pnpm

# Verify installation
pnpm --version

# Configure pnpm for company registry (if applicable)
pnpm config set registry https://your-company-registry.com/

Yarn (Alternative)​

# Install Yarn
npm install -g yarn

# Verify installation
yarn --version

2. Build Tools and Dependencies​

macOS​

# Install Xcode Command Line Tools (required for native modules)
xcode-select --install

# Install additional build dependencies
brew install pkg-config cairo pango libpng jpeg giflib librsvg

Windows​

# Install Windows Build Tools
npm install -g windows-build-tools

# Or install Visual Studio Build Tools manually
winget install Microsoft.VisualStudio.2022.BuildTools

Linux​

# Install build essentials
sudo apt-get update
sudo apt-get install -y build-essential libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev

3. Global Development Tools​

# Essential development tools
pnpm install -g \
  typescript \
  ts-node \
  @types/node \
  nodemon \
  concurrently \
  cross-env \
  rimraf

# Linting and formatting
pnpm install -g \
  eslint \
  prettier \
  @typescript-eslint/parser \
  @typescript-eslint/eslint-plugin

# Testing tools
pnpm install -g \
  jest \
  @types/jest \
  vitest

# Framework CLIs (choose based on your needs)
pnpm install -g \
  create-react-app \
  @vue/cli \
  @angular/cli \
  create-next-app \
  vite

Development Environment & IDE Setup​

# Install VS Code
# macOS: brew install --cask visual-studio-code
# Windows: winget install Microsoft.VisualStudioCode
# Linux: sudo snap install code --classic

Essential VS Code Extensions​

# Install via command line
code --install-extension ms-vscode.vscode-typescript-next
code --install-extension esbenp.prettier-vscode
code --install-extension ms-vscode.vscode-eslint
code --install-extension bradlc.vscode-tailwindcss
code --install-extension ms-vscode.vscode-json
code --install-extension christian-kohler.path-intellisense
code --install-extension ms-vscode.vscode-npm-script

VS Code Settings​

Create .vscode/settings.json in your projects:

{
  "typescript.preferences.importModuleSpecifier": "relative",
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "typescript.updateImportsOnFileMove.enabled": "always",
  "emmet.includeLanguages": {
    "typescript": "html",
    "javascript": "html"
  }
}

Alternative IDEs​

  • WebStorm: Full-featured JavaScript IDE by JetBrains
  • Sublime Text: Lightweight with excellent JavaScript support
  • Vim/Neovim: With appropriate plugins for JavaScript development

Project Structure & Configuration​

Typical Project Structure​

my-js-project/
├── src/
│   ├── components/
│   ├── utils/
│   ├── types/
│   └── index.ts
├── tests/
├── public/
├── .vscode/
├── package.json
├── tsconfig.json
├── .eslintrc.js
├── .prettierrc
├── .gitignore
└── README.md

Essential Configuration Files​

package.json​

{
  "name": "my-project",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "test": "vitest",
    "lint": "eslint src --ext .ts,.tsx",
    "format": "prettier --write src"
  },
  "engines": {
    "node": ">=18.0.0",
    "pnpm": ">=8.0.0"
  }
}

tsconfig.json​

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

Common Workflows​

Project Initialization​

# Create new project
mkdir my-project && cd my-project

# Initialize package.json
pnpm init

# Install dependencies
pnpm add react react-dom
pnpm add -D typescript @types/react @types/react-dom vite

# Start development
pnpm dev

Dependency Management​

# Install production dependency
pnpm add lodash

# Install development dependency
pnpm add -D @types/lodash

# Update dependencies
pnpm update

# Check for outdated packages
pnpm outdated

# Audit for vulnerabilities
pnpm audit

Testing & Quality​

# Run tests
pnpm test

# Run linting
pnpm lint

# Format code
pnpm format

# Type checking
pnpm tsc --noEmit

Platform Considerations​

macOS​

  • Use Homebrew for system dependencies
  • Xcode Command Line Tools required for native modules
  • M1/M2 Macs: Some packages may need Rosetta 2

Windows​

  • Consider using WSL2 for better Unix tool compatibility
  • Windows Build Tools for native module compilation
  • PowerShell vs Command Prompt considerations

Linux​

  • Build tools and system libraries often need manual installation
  • Permission considerations for global npm packages
  • Consider using pnpm for better performance

Environment Verification​

Basic Verification​

# Check Node.js and npm versions
node --version
npm --version
pnpm --version

# Check global packages
pnpm list -g --depth=0

# Test basic functionality
node -e "console.log('Node.js is working!')"

Project Verification​

# Create test project
mkdir test-project && cd test-project
pnpm init -y
pnpm add -D typescript
echo 'console.log("TypeScript works!");' > test.ts
npx tsc test.ts && node test.js

Troubleshooting​

Common Issues​

Permission Errors with Global Packages​

# Fix npm permissions (macOS/Linux)
mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.bashrc
source ~/.bashrc

Node Version Conflicts​

# Check which node is being used
which node
node --version

# Use nvm to manage versions
nvm list
nvm use 18.18.0

Module Not Found Errors​

# Clear npm cache
npm cache clean --force

# Delete node_modules and reinstall
rm -rf node_modules package-lock.json
pnpm install

Native Module Compilation Errors​

# Rebuild native modules
pnpm rebuild

# Install build tools (Windows)
npm install -g windows-build-tools

# Install Xcode Command Line Tools (macOS)
xcode-select --install

Performance Issues​

Slow Package Installation​

# Use pnpm instead of npm
npm install -g pnpm

# Use registry mirrors
pnpm config set registry https://registry.npmmirror.com/

Memory Issues During Build​

# Increase Node.js memory limit
export NODE_OPTIONS="--max-old-space-size=8192"

# Or in package.json scripts
"build": "NODE_OPTIONS='--max-old-space-size=8192' vite build"

Integration & Next Steps​

Company-Specific Setup​

If you're working with company infrastructure:

  1. Artifact Management: Set up access to private npm registries

  2. Project Templates: Install company-specific generators

  3. CI/CD Integration: Configure for company build systems

  1. Start with basics: Learn JavaScript ES6+ features
  2. Master Node.js: Understand runtime and npm ecosystem
  3. Choose a framework: React, Vue, or Angular
  4. Learn TypeScript: Add type safety to your JavaScript
  5. Build tools: Understand Vite, Webpack, or similar bundlers

Next: Choose your frontend framework and start building!