Skip to main content

​
Overview

This guide provides comprehensive installation instructions for ScreenPulse, including system requirements, step-by-step setup, and solutions to common issues.

​
System Requirements

​
Required Software

ScreenPulse requires the following software to be installed on your system:

Node.js

Version: v18.19.1 (LTS) or higherDownload: nodejs.orgVerify installation:
node --version

npm

Version: v8.0.0 or higherIncluded with Node.js installationVerify installation:
npm --version

Angular CLI

Version: v16.2.16Install globally:
npm install -g @angular/[email protected]
Verify installation:
ng version

Git

Version: Latest stableDownload: git-scm.comVerify installation:
git --version
ScreenPulse uses Angular 16.2.12, which has specific Node.js version requirements. Node.js v18.x LTS is strongly recommended for best compatibility.
For an optimal development experience, we recommend:
  • Visual Studio Code - Lightweight code editor with excellent Angular support
  • Chrome or Firefox - Modern browsers with DevTools
  • Angular DevTools - Browser extension for debugging Angular applications

​
Installation Steps

1

Verify Prerequisites

Before installing ScreenPulse, verify all prerequisites are met:
# Check Node.js version (should be 18.19.1 or higher)
node --version

# Check npm version (should be 8.0.0 or higher)
npm --version

# Check Angular CLI version (should be 16.2.16)
ng version

# Check Git version
git --version
If any of these commands fail, install the missing software before continuing.
2

Clone the Repository

Clone the ScreenPulse frontend application from GitHub:
git clone https://github.com/EduGese/ScreenPulse-frontApp.git
Navigate to the project directory:
cd ScreenPulse-frontApp
3

Install Dependencies

Install all required npm packages:
npm install
This installs:Core Dependencies:Development Tools:
The installation may take 2-5 minutes depending on your internet connection and system performance.
4

Verify Installation

Verify the installation was successful by checking the project structure:
# List installed packages
npm list --depth=0

# Check Angular CLI can detect the project
ng version
You should see Angular CLI v16.2.16 and the project packages listed.
5

Start Development Server

Test that everything is working by starting the development server:
npm start
Wait for the compilation to complete. You should see:
** Angular Live Development Server is listening on localhost:4200 **
✔ Compiled successfully.
6

Open in Browser

Open your web browser and navigate to:
http://localhost:4200/
You should see the ScreenPulse home page load successfully.
If the page doesn’t load, check the terminal for compilation errors and refer to the troubleshooting section below.

​
Environment Configuration

After installation, ScreenPulse uses environment files for API configuration: 
src/environments/
├── environment.development.ts  # Development settings (default)
├── environment.production.ts   # Production settings
└── environment.ts             # Base environment file
By default, ScreenPulse connects to the production backend API at screenpulse-api.onrender.com. To use a local backend, see the Configuration Guide.

​
Verify Installation

Run these commands to ensure everything is set up correctly: 
# Run linter
npm run lint

# Run tests
npm test

# Build for production
npm run build
All commands should complete without errors.

​
Troubleshooting Common Issues

Problem: Angular requires a specific Node.js version range.Solution:
  1. Check your Node.js version:
node --version
  1. If you have the wrong version, install Node.js v18.19.1 LTS:
    • Download from nodejs.org
    • Or use a version manager like nvm:
# Using nvm
nvm install 18.19.1
nvm use 18.19.1
  1. Verify the correct version is active:
node --version  # Should show v18.19.1
  1. Reinstall dependencies:
rm -rf node_modules package-lock.json
npm install
Problem: Permission denied errors during npm install.Solution:On Linux/Mac:
# Fix npm permissions (recommended)
mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.bashrc
source ~/.bashrc
On Windows: Run your terminal as Administrator, or:
npm install --global --production windows-build-tools
Avoid using sudo npm install as it can cause permission issues later.
Problem: ng serve fails because port 4200 is already in use.Solution:Option 1: Use a different port
ng serve --port 4300
Option 2: Kill the process using port 4200On Linux/Mac:
lsof -ti:4200 | xargs kill -9
On Windows:
netstat -ano | findstr :4200
taskkill /PID <PID> /F
Problem: Import errors like Cannot find module '@angular/core'.Solution:
  1. Delete node_modules and package-lock.json:
rm -rf node_modules package-lock.json
  1. Clear npm cache:
npm cache clean --force
  1. Reinstall dependencies:
npm install
  1. If the issue persists, check your Node.js version:
node --version  # Should be 18.x
Problem: Command ng not recognized.Solution:Install Angular CLI globally:
npm install -g @angular/[email protected]
Verify installation:
ng version
If still not working, check your PATH:
# On Linux/Mac
echo $PATH

# On Windows
echo %PATH%
Ensure npm’s global bin directory is in your PATH.
Problem: TypeScript compilation errors when running ng serve.Solution:
  1. Ensure you’re using TypeScript 5.1.x:
npm list typescript
  1. If wrong version, reinstall:
npm install --save-dev [email protected]
  1. Clear Angular cache:
rm -rf .angular
  1. Restart the dev server:
npm start
Problem: Build process fails with JavaScript heap out of memory.Solution:Increase Node.js memory limit:
# Increase to 4GB
export NODE_OPTIONS="--max-old-space-size=4096"
npm run build
Or add to package.json scripts:
"scripts": {
  "build": "node --max-old-space-size=4096 node_modules/@angular/cli/bin/ng build"
}

​
Next Steps

Environment Setup

Configure Node.js, Angular CLI, and recommended tools

Configuration

Set up API endpoints and environment variables

Development Workflow

Learn the development process and available tools

Architecture

Understand the ScreenPulse application structure

​
Additional Resources

Build docs developers (and LLMs) love

Get started for freeTalk to us