Environment Setup

Overview

This guide walks you through setting up a complete development environment for ScreenPulse, including Node.js, Angular CLI, IDE configuration, and recommended tools.

Node.js Setup

ScreenPulse requires Node.js v18.19.1 (LTS) for optimal compatibility with Angular 16.2.12.

Install Node.js

Using Official Installer
Using nvm (Recommended)
Using Homebrew (Mac)

Download Node.js v18.19.1 LTS from nodejs.org
Run the installer for your operating system
Verify installation:

node --version  # Should show v18.19.1 or higher
npm --version   # Should show v8.0.0 or higher

Node Version Manager (nvm) allows you to easily switch between Node.js versions.On Linux/Mac:

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

# Reload shell
source ~/.bashrc  # or ~/.zshrc

# Install Node.js 18.19.1
nvm install 18.19.1
nvm use 18.19.1
nvm alias default 18.19.1

On Windows:

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

# Then install Node.js
nvm install 18.19.1
nvm use 18.19.1

Verify installation:

node --version
npm --version

# Install Node.js 18
brew install node@18

# Link the installed version
brew link --overwrite node@18

# Verify installation
node --version
npm --version

Always use Node.js LTS versions for production applications. Avoid using odd-numbered versions (17, 19, 21, etc.) as they are not long-term support releases.

Configure npm

Optimize npm for better performance and security:

# Set up global packages directory (avoids permission issues)
mkdir ~/.npm-global
npm config set prefix '~/.npm-global'

# Add to PATH (add to ~/.bashrc or ~/.zshrc)
export PATH=~/.npm-global/bin:$PATH

# Configure npm settings
npm config set save-exact true        # Use exact versions
npm config set engine-strict true     # Enforce engine requirements

Using exact versions in package.json ensures consistent builds across different environments.

Angular CLI Setup

ScreenPulse uses Angular CLI v16.2.16 for development and build tasks.

Install Angular CLI

Install Angular CLI globally:

npm install -g @angular/[email protected]

Verify installation:

ng version

You should see output similar to:

Angular CLI: 16.2.16
Node: 18.19.1
Package Manager: npm 8.19.3
OS: linux x64

Angular CLI Configuration

Configure Angular CLI for optimal development experience:

# Disable analytics (optional)
ng analytics off

# Enable CLI autocompletion (bash/zsh)
ng completion

# Set default package manager
ng config -g cli.packageManager npm

ScreenPulse’s angular.json is already configured with optimal build settings. You don’t need to modify it for basic development.

IDE Setup

Visual Studio Code (Recommended)

VS Code is the recommended editor for Angular development.

Install VS Code

Download from code.visualstudio.com

Essential Extensions

ScreenPulse’s .vscode/extensions.json recommends the following extension:

{
  "recommendations": [
    "angular.ng-template"
  ]
}

Install additional recommended extensions:

Angular Language Service

Extension ID: angular.ng-templateProvides:

IntelliSense for Angular templates
Error checking in HTML templates
Go to definition for components and directives
Auto-completion for Angular syntax

code --install-extension angular.ng-template

ESLint

Extension ID: dbaeumer.vscode-eslintIntegrates ESLint into VS Code for real-time linting.

code --install-extension dbaeumer.vscode-eslint

TypeScript Importer

Extension ID: pmneo.tsimporterAuto-imports TypeScript modules.

code --install-extension pmneo.tsimporter

Prettier

Extension ID: esbenp.prettier-vscodeCode formatter for consistent styling.

code --install-extension esbenp.prettier-vscode

Angular Snippets

Extension ID: johnpapa.angular2Code snippets for Angular development.

code --install-extension johnpapa.angular2

VS Code Settings

Create or update .vscode/settings.json in your project:

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true,
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Other IDEs

WebStorm / IntelliJ IDEA

JetBrains IDEs have built-in Angular support:

Install from jetbrains.com
Open ScreenPulse project
Enable Angular plugin (usually enabled by default)
Configure TypeScript version: Settings → Languages & Frameworks → TypeScript → Use project TypeScript

Vim / Neovim

For Vim users:

Install coc.nvim
Install coc-angular:

:CocInstall coc-angular coc-tsserver coc-html coc-css

Configure coc-settings.json for Angular support

Git Configuration

Configure Git for contributing to ScreenPulse:

# Set your identity
git config --global user.name "Your Name"
git config --global user.email "[email protected]"

# Set default branch name
git config --global init.defaultBranch main

# Enable color output
git config --global color.ui auto

# Set default editor
git config --global core.editor "code --wait"  # VS Code

# Configure line endings
# On Windows:
git config --global core.autocrlf true
# On Mac/Linux:
git config --global core.autocrlf input

Use git config --list to view all your Git configuration settings.

Environment Variables Overview

ScreenPulse uses TypeScript environment files instead of .env files. These are located in src/environments/:

Development Environment

File: src/environments/environment.development.ts

export const environment = {
  serverFavoritesURL: 'http://localhost:9000/api/favorites',
  serverSearchURL: 'http://localhost:9000/api/omdb',
  serverUserURL: 'http://localhost:9000/api/user'
};

Used when running:

ng serve  # Development mode by default

Production Environment

File: src/environments/environments.production.ts

export const environment = {
  serverFavoritesURL: 'https://screenpulse-api.onrender.com/api/favorites',
  serverSearchURL: 'https://screenpulse-api.onrender.com/api/omdb',
  serverUserURL: 'https://screenpulse-api.onrender.com/api/user'
};

Used when building for production:

ng build --configuration production

Angular automatically switches between environment files based on the build configuration. You don’t need to manually change imports.

Accessing Environment Variables

In your Angular components or services:

import { environment } from '../environments/environment.development';

// Use the environment variables
const apiUrl = environment.serverSearchURL;

Learn more in the Configuration Guide.

Browser DevTools

Install Browser Extensions

Angular DevTools

Chrome: Install from Chrome Web StoreFirefox: Install from Firefox Add-onsFeatures:

Component tree inspector
Change detection profiler
Injector hierarchy viewer
Router debugging

Redux DevTools

Useful if you add NgRx or other state management:Chrome: Install from Chrome Web StoreFirefox: Install from Firefox Add-ons

Additional Development Tools

Package Managers

While npm comes with Node.js, you may prefer alternatives:

npm (Default)
Yarn
pnpm

# Already installed with Node.js
npm --version

# Update npm
npm install -g npm@latest

# Install Yarn
npm install -g yarn

# Verify installation
yarn --version

# Use with ScreenPulse
yarn install
yarn start

# Install pnpm
npm install -g pnpm

# Verify installation
pnpm --version

# Use with ScreenPulse
pnpm install
pnpm start

Useful Global Tools

# TypeScript compiler (optional - included in project)
npm install -g typescript

# JSON Server (for mocking APIs)
npm install -g json-server

# HTTP Server (for serving static files)
npm install -g http-server

# Lighthouse (for performance auditing)
npm install -g lighthouse

Verify Setup

Ensure everything is configured correctly:

Check Node.js

node --version  # v18.19.1 or higher
npm --version   # v8.0.0 or higher

Check Angular CLI

ng version  # Should show Angular CLI 16.2.16

Check Git

git --version
git config --list  # Verify your settings

Test Project

cd ScreenPulse-frontApp
npm install
npm start

Open http://localhost:4200/ - the app should load successfully.

Next Steps

Configuration

Learn how to configure API endpoints and environments

Development Workflow

Master the ScreenPulse development process

Introduction

Setup

Overview

Node.js Setup

Install Node.js

Configure npm

Angular CLI Setup

Install Angular CLI

Angular CLI Configuration

IDE Setup

Visual Studio Code (Recommended)

Install VS Code

Essential Extensions

VS Code Settings

Other IDEs

Git Configuration

Environment Variables Overview

Development Environment

Production Environment

Accessing Environment Variables

Browser DevTools

Install Browser Extensions

Angular DevTools

Redux DevTools

Additional Development Tools

Package Managers

Useful Global Tools

Verify Setup

Next Steps

Configuration

Development Workflow

Build docs developers (and LLMs) love

Introduction

Setup

​Overview

​Node.js Setup

​Install Node.js

​Configure npm

​Angular CLI Setup

​Install Angular CLI

​Angular CLI Configuration

​IDE Setup

​Visual Studio Code (Recommended)

​Install VS Code

​Essential Extensions

​VS Code Settings

​Other IDEs

​Git Configuration

​Environment Variables Overview

​Development Environment

​Production Environment

​Accessing Environment Variables

​Browser DevTools

​Install Browser Extensions

Angular DevTools

Redux DevTools

​Additional Development Tools

​Package Managers

​Useful Global Tools

​Verify Setup

​Next Steps

Configuration

Development Workflow

Build docs developers (and LLMs) love

Overview

Node.js Setup

Install Node.js

Configure npm

Angular CLI Setup

Install Angular CLI

Angular CLI Configuration

IDE Setup

Visual Studio Code (Recommended)

Install VS Code

Essential Extensions

VS Code Settings

Other IDEs

Git Configuration

Environment Variables Overview

Development Environment

Production Environment

Accessing Environment Variables

Browser DevTools

Install Browser Extensions

Additional Development Tools

Package Managers

Useful Global Tools

Verify Setup

Next Steps