Development Workflow

Overview

This guide covers the complete development workflow for ScreenPulse, including running the dev server, using npm scripts, working with Storybook for component development, and building for production.

Development Server

Starting the Server

ScreenPulse uses Angular’s development server with hot module replacement (HMR) for instant feedback:

npm start

The server will:

Compile TypeScript and SCSS
Bundle the application
Start the dev server on http://localhost:4200/
Open your default browser (if configured)
Watch for file changes

The initial compilation may take 10-30 seconds. Subsequent rebuilds are much faster (1-3 seconds) thanks to incremental compilation.

Development Server Options

--port

number

default:"4200"

Run the server on a different port:

ng serve --port 4300

--open

boolean

default:"false"

Automatically open the browser:

ng serve --open

--host

string

default:"localhost"

Specify the host for the dev server:

ng serve --host 0.0.0.0

Use --host 0.0.0.0 to access the app from other devices on your network.

--configuration

string

default:"development"

Use a specific build configuration:

ng serve --configuration production

--ssl

boolean

default:"false"

Run server with HTTPS:

ng serve --ssl

Hot Module Replacement (HMR)

Angular’s dev server automatically reloads changes:

TypeScript Changes
HTML Template Changes
SCSS Style Changes

What happens:

TypeScript files are recompiled
Changes are injected into the running app
Browser refreshes automatically
Application state is preserved when possible

Example:

// Edit a component
export class SearchComponent {
  title = 'Search Movies'; // Change this
}
// Save → Browser updates in 1-2 seconds

What happens:

Template is recompiled
Component is re-rendered
Browser updates instantly

Example:

<!-- Edit a template -->
<h1>{{ title }}</h1>
<!-- Save → Browser updates immediately -->

What happens:

SCSS is recompiled to CSS
Styles are injected without full reload
No page refresh needed

Example:

.search-container {
  background: #f0f0f0; // Change this
}
// Save → Styles update instantly

Changes to angular.json, tsconfig.json, or package.json require restarting the dev server.

Available npm Scripts

ScreenPulse includes several npm scripts defined in package.json:

Core Development Scripts

package.json

{
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "deploy": "ng build && firebase deploy --only hosting",
    "lint": "ng lint",
    "compodoc": "compodoc -p tsconfig.json -e json -d .",
    "storybook": "ng run controlli-challenge:storybook",
    "build-storybook": "ng run controlli-challenge:build-storybook"
  }
}

Script Reference

npm start - Development Server

Command: npm start or npm run startWhat it does:

Starts Angular dev server on port 4200
Enables hot module replacement
Watches for file changes
Uses development configuration

Use when:

Developing new features
Testing changes locally
Debugging issues

Output:

✔ Browser application bundle generation complete.
Initial Chunk Files   | Names         |  Raw Size
vendor.js            | vendor        |   2.45 MB |
polyfills.js         | polyfills     | 333.17 kB |
styles.css, styles.js| styles        | 231.31 kB |
main.js              | main          | 124.58 kB |
runtime.js           | runtime       |  12.85 kB |

** Angular Live Development Server is listening on localhost:4200 **
✔ Compiled successfully.

npm run build - Production Build

Command: npm run buildWhat it does:

Compiles app for production
Enables AOT compilation
Minifies and optimizes code
Generates output in dist/controlli-challenge/
Uses production environment file

Use when:

Preparing for deployment
Testing production build
Generating optimized bundle

Output:

✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.

Initial Chunk Files | Names         |  Raw Size
main.js             | main          | 245.17 kB |
polyfills.js        | polyfills     |  33.04 kB |
runtime.js          | runtime       |   1.02 kB |
styles.css          | styles        |  89.43 kB |

Output location: dist/controlli-challenge

Production builds are 60-80% smaller than development builds due to optimization and tree-shaking.

npm run watch - Continuous Build

Command: npm run watchWhat it does:

Builds app in development mode
Watches for file changes
Rebuilds automatically
Does NOT serve files (no HTTP server)

Use when:

Testing build process
Validating compilation
CI/CD pipelines

Example:

npm run watch
# Make changes to files
# Build automatically triggers

npm test - Unit Tests

Command: npm test or npm run testWhat it does:

Runs Jasmine unit tests
Launches Karma test runner
Opens Chrome browser for tests
Watches for file changes
Re-runs tests on change

Use when:

Writing new tests
Debugging failing tests
Validating code changes

Test Output:

Chrome Headless 120.0.0.0 (Mac OS 10.15.7): Executed 47 of 47 SUCCESS (0.892 secs / 0.765 secs)
TOTAL: 47 SUCCESS

Run tests once (for CI):

ng test --watch=false --browsers=ChromeHeadless

npm run lint - Code Linting

Command: npm run lintWhat it does:

Runs ESLint on TypeScript files
Checks HTML templates
Enforces code style rules
Reports warnings and errors

Use when:

Before committing code
Fixing code quality issues
Ensuring consistent style

Configuration: eslint.config.jsFix auto-fixable issues:

ng lint --fix

npm run storybook - Component Development

Command: npm run storybookWhat it does:

Launches Storybook dev server on port 6006
Shows component documentation
Provides interactive component playground
Hot reloads on changes

Use when:

Developing UI components in isolation
Testing component variations
Writing component documentation
Showcasing component library

See Storybook for Component Development below.

npm run build-storybook - Build Storybook

Command: npm run build-storybookWhat it does:

Builds static Storybook site
Outputs to storybook-static/
Ready for deployment

Use when:

Deploying component documentation
Sharing with team
Hosting on GitHub Pages

Example:

npm run build-storybook
# Deploy to GitHub Pages
npx gh-pages -d storybook-static

npm run deploy - Firebase Deployment

Command: npm run deployWhat it does:

Builds app for production
Deploys to Firebase Hosting
Updates live site at sreenpulse.web.app

Prerequisites:

Firebase CLI installed: npm install -g firebase-tools
Authenticated: firebase login
Firebase project configured (see .firebaserc)

Use when:

Deploying to production
Publishing new releases

Only deploy after thorough testing. This updates the live production site.

npm run compodoc - Generate Documentation

Command: npm run compodocWhat it does:

Generates TypeScript code documentation
Creates JSON output for Storybook
Documents components, services, modules

Use when:

Updating Storybook documentation
Generating architecture diagrams

Output: documentation.json

Storybook for Component Development

ScreenPulse uses Storybook 8.3.7 for component-driven development.

What is Storybook?

Storybook is a tool for developing UI components in isolation. It allows you to:

Build components outside the main app
Test different states and props
Document component APIs
Share components with designers and stakeholders
Catch UI bugs early

Launching Storybook

npm run storybook

Storybook will open at http://localhost:6006/

ScreenPulse’s Storybook is deployed at edugese.github.io/ScreenPulse-frontApp

Storybook Configuration

Storybook configuration is in .storybook/:

.storybook/
├── main.ts        # Storybook configuration
├── preview.ts     # Global decorators and parameters
└── tsconfig.json  # TypeScript config for Storybook

Angular.json configuration:

angular.json

{
  "storybook": {
    "builder": "@storybook/angular:start-storybook",
    "options": {
      "configDir": ".storybook",
      "browserTarget": "controlli-challenge:build",
      "compodoc": false,
      "port": 6006
    }
  }
}

Writing Stories

Create stories for your components in the src/stories/ directory:

button.stories.ts

import { Meta, StoryObj } from '@storybook/angular';
import { ButtonComponent } from '../app/shared/components/button/button.component';

const meta: Meta<ButtonComponent> = {
  title: 'Shared/Button',
  component: ButtonComponent,
  tags: ['autodocs'],
  argTypes: {
    variant: {
      control: 'select',
      options: ['primary', 'secondary', 'danger']
    },
    size: {
      control: 'select',
      options: ['small', 'medium', 'large']
    }
  }
};

export default meta;
type Story = StoryObj<ButtonComponent>;

export const Primary: Story = {
  args: {
    label: 'Click Me',
    variant: 'primary',
    size: 'medium'
  }
};

export const Secondary: Story = {
  args: {
    label: 'Secondary Button',
    variant: 'secondary',
    size: 'medium'
  }
};

export const Danger: Story = {
  args: {
    label: 'Delete',
    variant: 'danger',
    size: 'small'
  }
};

Using Storybook

Browse Components

Navigate through the component tree in the sidebar to see all available components.

Interact with Controls

Use the Controls panel to change component props in real-time:

Text inputs for strings
Sliders for numbers
Dropdowns for select options
Toggles for booleans

View Documentation

Click the “Docs” tab to see:

Component API documentation
Prop types and descriptions
Usage examples
Live component preview

Test Different States

Create multiple stories to test:

Loading states
Error states
Empty states
Different data variations

Storybook runs independently from the main app, so you can develop components without worrying about routing, authentication, or other app concerns.

Building for Production

Production Build Command

npm run build

Build Output

Production builds are output to dist/controlli-challenge/:

dist/controlli-challenge/
├── index.html              # Entry HTML file
├── main.[hash].js          # Main application bundle
├── polyfills.[hash].js     # Browser polyfills
├── runtime.[hash].js       # Angular runtime
├── styles.[hash].css       # Compiled styles
├── assets/                 # Static assets
│   ├── images/
│   └── fonts/
└── favicon.ico

File names include content hashes (e.g., main.abc123.js) for cache busting. The hash changes only when the file content changes.

Build Optimizations

Production builds include:

AOT Compilation

Ahead-of-Time compilation converts templates to JavaScript at build time, reducing bundle size and improving performance.

Tree Shaking

Removes unused code from bundles, significantly reducing file size.

Minification

Removes whitespace, shortens variable names, and compresses code.

Bundling

Combines multiple files into fewer bundles for faster loading.

Serve Production Build Locally

Test the production build before deploying:

# Build for production
npm run build

# Serve with http-server
npx http-server dist/controlli-challenge -p 8080 -o

# Or with Angular's built-in server
ng serve --configuration production

Open http://localhost:8080/ to test.

The production build connects to the production API at screenpulse-api.onrender.com, not your local backend.

Build Performance

Typical build times:

Development build: 10-30 seconds (initial), 1-3 seconds (incremental)
Production build: 30-60 seconds (includes optimization)

Improve build performance:

# Increase Node.js memory
export NODE_OPTIONS="--max-old-space-size=4096"
npm run build

# Use production config with source maps (for debugging)
ng build --configuration production --source-map

Development Best Practices

Use TypeScript Strict Mode

ScreenPulse uses TypeScript 5.1 with strict type checking:

tsconfig.json

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true
  }
}

Benefits:

Catch errors at compile time
Better IDE support
Safer refactoring

Run Linter Before Committing

Always lint your code before committing:

# Check for issues
npm run lint

# Auto-fix issues
ng lint --fix

# Stage fixed files
git add .
git commit -m "fix: resolve linting issues"

Test Changes in Both Modes

Test your changes in both development and production:

# Test in development
npm start

# Test production build
npm run build
npx http-server dist/controlli-challenge

Production builds may reveal issues not visible in development.

Use Component-Driven Development

Develop components in isolation using Storybook:

Create component
Write story for component
Test all states in Storybook
Integrate into app
Write unit tests

This approach leads to more reusable, testable components.

Keep Dev Server Running

Keep npm start running while developing:

Fast hot reload on changes
Immediate feedback
Catch compilation errors quickly

Restart only when changing:

angular.json
tsconfig.json
package.json
Environment files

Debugging Tips

Browser DevTools

Angular DevTools
Console Debugging
Network Panel
Source Maps

Install Angular DevTools extension:

Features:

Component tree inspector
Change detection profiler
Injector hierarchy
Router debugging

Use browser console to debug:

// Add debug logs
console.log('Component initialized:', this.data);
console.table(this.items);
console.group('API Call');
console.log('Request:', request);
console.log('Response:', response);
console.groupEnd();

// Add breakpoints
debugger; // Pauses execution here

Development builds include source maps for debugging:

Original TypeScript code in Sources panel
Set breakpoints in TypeScript files
Step through original code

Enable in production:

ng build --source-map

VS Code Debugging

ScreenPulse includes VS Code debug configuration in .vscode/launch.json. To debug:

Start Dev Server

npm start

Set Breakpoints

Click in the gutter next to line numbers to set breakpoints.

Start Debugging

Press F5 or click Run → Start Debugging

Debug in VS Code

Step through code
Inspect variables
Evaluate expressions
View call stack

Next Steps

Architecture Overview

Learn about ScreenPulse’s application structure

Component Guide

Understand the component library

API Integration

Learn how to work with the backend API

Testing Guide

Write and run tests for your code

Resources

Live Demo: sreenpulse.web.app
Storybook: Component Documentation
Backend API: GitHub Repository
Angular Docs: angular.io/docs
Storybook Docs: storybook.js.org

Introduction

Setup

Overview

Development Server

Starting the Server

Development Server Options

Hot Module Replacement (HMR)

Available npm Scripts

Core Development Scripts

Script Reference

Storybook for Component Development

What is Storybook?

Launching Storybook

Storybook Configuration

Writing Stories

Using Storybook

Building for Production

Production Build Command

Build Output

Build Optimizations

AOT Compilation

Tree Shaking

Minification

Bundling

Serve Production Build Locally

Build Performance

Development Best Practices

Debugging Tips

Browser DevTools

VS Code Debugging

Next Steps

Architecture Overview

Component Guide

API Integration

Testing Guide

Resources

Build docs developers (and LLMs) love

Introduction

Setup

​Overview

​Development Server

​Starting the Server

​Development Server Options

​Hot Module Replacement (HMR)

​Available npm Scripts

​Core Development Scripts

​Script Reference

​Storybook for Component Development

​What is Storybook?

​Launching Storybook

​Storybook Configuration

​Writing Stories

​Using Storybook

​Building for Production

​Production Build Command

​Build Output

​Build Optimizations

AOT Compilation

Tree Shaking

Minification

Bundling

​Serve Production Build Locally

​Build Performance

​Development Best Practices

​Debugging Tips

​Browser DevTools

​VS Code Debugging

​Next Steps

Architecture Overview

Component Guide

API Integration

Testing Guide

​Resources

Build docs developers (and LLMs) love

Overview

Development Server

Starting the Server

Development Server Options

Hot Module Replacement (HMR)

Available npm Scripts

Core Development Scripts

Script Reference

Storybook for Component Development

What is Storybook?

Launching Storybook

Storybook Configuration

Writing Stories

Using Storybook

Building for Production

Production Build Command

Build Output

Build Optimizations

Serve Production Build Locally

Build Performance

Development Best Practices

Debugging Tips

Browser DevTools

VS Code Debugging

Next Steps

Resources