Configuration

Overview

ScreenPulse uses Angular’s environment system for configuration management. This guide explains how to configure API endpoints, switch between development and production environments, and customize application settings.

Environment Files

ScreenPulse uses TypeScript-based environment files located in src/environments/:

src/environments/
├── environment.development.ts  # Local development settings
├── environment.production.ts   # Production deployment settings
└── environment.ts             # Default/fallback settings

Angular automatically selects the appropriate environment file based on your build configuration. You never need to manually change imports.

Development Configuration

Local Development Setup

File: src/environments/environment.development.ts This configuration is used when running ng serve or npm start:

environment.development.ts

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

Configuration Properties

serverFavoritesURL

string

required

Base URL for favorites management API endpoints.Development: http://localhost:9000/api/favoritesEndpoints:

GET / - Fetch user’s favorite items
POST / - Add new favorite
DELETE /:id - Remove favorite
PATCH /:id - Update favorite notes/reviews

serverSearchURL

string

required

Base URL for OMDB search API proxy.Development: http://localhost:9000/api/omdbEndpoints:

GET /search?title={query}&type={type}&year={year} - Search media
GET /details?id={imdbID} - Get detailed information

serverUserURL

string

required

Base URL for user authentication API endpoints.Development: http://localhost:9000/api/userEndpoints:

POST /register - User registration
POST /login - User authentication (returns JWT)
GET /profile - Get user profile
PUT /profile - Update user profile

Production Configuration

File: src/environments/environments.production.ts This configuration is used when building for production:

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'
};

The production environment points to the hosted backend API on Render. Ensure this API is accessible and properly configured before deploying.

Using Environment Variables

In Angular Services

Import and use environment variables in your services:

user.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from '../environments/environment.development';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  private apiUrl = environment.serverUserURL;

  constructor(private http: HttpClient) {}

  login(credentials: { email: string; password: string }) {
    return this.http.post(`${this.apiUrl}/login`, credentials);
  }

  register(userData: any) {
    return this.http.post(`${this.apiUrl}/register`, userData);
  }
}

In Angular Components

You can also access environment variables in components:

app.component.ts

import { Component } from '@angular/core';
import { environment } from '../environments/environment.development';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  apiBaseUrl = environment.serverSearchURL;

  constructor() {
    console.log('Using API:', this.apiBaseUrl);
  }
}

Always import from environment.development in your code. Angular’s build system automatically replaces it with the correct environment file based on your build configuration.

Switching Between Environments

Development Mode

Run the application in development mode:

npm start

This uses environment.development.ts and connects to localhost:9000.

Production Mode

Build the application for production:

npm run build

This uses environments.production.ts and connects to the hosted backend API.

Preview Production Build

To test the production build locally:

# Build for production
npm run build

# Serve the production build
npx http-server dist/controlli-challenge -p 8080

# Open http://localhost:8080

When testing production builds locally, the app will connect to the production API at screenpulse-api.onrender.com, not your local backend.

Angular Build Configuration

ScreenPulse’s build configuration is defined in angular.json:

angular.json

{
  "projects": {
    "controlli-challenge": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.development.ts",
                  "with": "src/environments/environments.production.ts"
                }
              ],
              "outputHashing": "all",
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "3mb"
                }
              ]
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "sourceMap": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.development.ts"
                }
              ]
            }
          }
        }
      }
    }
  }
}

Key Build Settings

File Replacements

Angular automatically swaps environment files during build:

Development: Uses environment.development.ts
Production: Uses environments.production.ts

This happens at build time, so the correct URLs are hard-coded into the bundle.

Build Optimization

Production builds include:

Ahead-of-Time (AOT) compilation
Build optimizer
Minification
Tree-shaking
Output hashing for cache busting

Development builds include:

Just-in-Time (JIT) compilation
Source maps for debugging
Named chunks for easier debugging
No optimization (faster rebuilds)

Build Budgets

ScreenPulse enforces bundle size limits:

"budgets": [
  {
    "type": "initial",
    "maximumWarning": "2mb",
    "maximumError": "3mb"
  },
  {
    "type": "anyComponentStyle",
    "maximumWarning": "2kb",
    "maximumError": "4kb"
  }
]

If your bundle exceeds these limits, the build will warn or fail.

Running Local Backend

To develop with a local backend API:

Clone Backend Repository

git clone https://github.com/EduGese/ScreenPulse-backend-Api.git
cd ScreenPulse-backend-Api

Install Dependencies

npm install

Configure Backend

Create a .env file in the backend project:

.env

PORT=9000
MONGODB_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret_key
OMDB_API_KEY=your_omdb_api_key

Get an OMDB API key from omdbapi.com

Start Backend Server

npm start

The backend will run on http://localhost:9000

Update Frontend Configuration

Ensure environment.development.ts points to localhost:9000:

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

Start Frontend

npm start

Now the frontend at localhost:4200 connects to your local backend at localhost:9000.

Custom Environment Configuration

You can create additional environment configurations for staging, testing, etc.

Create Staging Environment

Create Environment File

Create src/environments/environment.staging.ts:

environment.staging.ts

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

Update angular.json

Add staging configuration to angular.json:

"configurations": {
  "production": { /* existing config */ },
  "development": { /* existing config */ },
  "staging": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.development.ts",
        "with": "src/environments/environment.staging.ts"
      }
    ],
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false
  }
}

Build for Staging

ng build --configuration staging

CORS Configuration

If you encounter CORS issues during development:

Using Angular Proxy

Create proxy.conf.json in the project root:

proxy.conf.json

{
  "/api": {
    "target": "http://localhost:9000",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

Update package.json:

package.json

{
  "scripts": {
    "start": "ng serve --proxy-config proxy.conf.json"
  }
}

Then update your environment to use relative URLs:

environment.development.ts

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

The proxy rewrites /api/* requests to http://localhost:9000/api/*, bypassing CORS restrictions during development.

Environment Best Practices

Never Commit Secrets

Environment files are committed to Git. Never store:

API keys
Database passwords
JWT secrets
Private credentials

Use the backend .env file for secrets.

Keep URLs DRY

Define base URLs once in environment files:

// Good
const url = `${environment.serverUserURL}/login`;

// Bad
const url = 'http://localhost:9000/api/user/login';

Test Both Environments

Always test:

Development mode (ng serve)
Production build (ng build && serve)

Ensure both connect to the correct APIs.

Document API Changes

When backend APIs change:

Update environment URLs
Update service code
Update API documentation
Test all affected features

Troubleshooting

Wrong environment file is being used

Problem: Changes to environment file don’t appear in the app.Solution:

Stop the dev server (Ctrl+C)
Clear Angular cache:

rm -rf .angular

Restart the dev server:

npm start

Hard refresh the browser (Ctrl+Shift+R)

API requests failing with CORS errors

Problem: Browser blocks API requests due to CORS policy.Solution:Option 1: Configure backend CORS (recommended)

// In backend server.js or app.js
const cors = require('cors');
app.use(cors({
  origin: 'http://localhost:4200',
  credentials: true
}));

Option 2: Use Angular proxy See CORS Configuration above.

Environment changes not reflected in build

Problem: Production build still uses old environment values.Solution:

Delete the dist folder:

rm -rf dist

Rebuild:

ng build --configuration production

Verify the correct environment file is being used:

# Check build output
cat dist/controlli-challenge/main.*.js | grep -o 'screenpulse-api.onrender.com'

Can't connect to local backend

Problem: Frontend can’t connect to backend at localhost:9000.Solution:

Verify backend is running:

curl http://localhost:9000/api/user

Check backend logs for errors
Ensure environment.development.ts has correct URL:

serverUserURL: 'http://localhost:9000/api/user'

Check browser console for error details

Next Steps

Development Workflow

Learn about npm scripts, hot reload, and Storybook

Architecture Overview

Understand how ScreenPulse is structured

Introduction

Setup

Overview

Environment Files

Development Configuration

Local Development Setup

Configuration Properties

Production Configuration

Using Environment Variables

In Angular Services

In Angular Components

Switching Between Environments

Development Mode

Production Mode

Preview Production Build

Angular Build Configuration

Key Build Settings

Running Local Backend

Custom Environment Configuration

Create Staging Environment

CORS Configuration

Using Angular Proxy

Environment Best Practices

Never Commit Secrets

Keep URLs DRY

Test Both Environments

Document API Changes

Troubleshooting

Next Steps

Development Workflow

Architecture Overview

Build docs developers (and LLMs) love

Introduction

Setup

​Overview

​Environment Files

​Development Configuration

​Local Development Setup

​Configuration Properties

​Production Configuration

​Using Environment Variables

​In Angular Services

​In Angular Components

​Switching Between Environments

​Development Mode

​Production Mode

​Preview Production Build

​Angular Build Configuration

​Key Build Settings

​Running Local Backend

​Custom Environment Configuration

​Create Staging Environment

​CORS Configuration

​Using Angular Proxy

​Environment Best Practices

Never Commit Secrets

Keep URLs DRY

Test Both Environments

Document API Changes

​Troubleshooting

​Next Steps

Development Workflow

Architecture Overview

Build docs developers (and LLMs) love

Overview

Environment Files

Development Configuration

Local Development Setup

Configuration Properties

Production Configuration

Using Environment Variables

In Angular Services

In Angular Components

Switching Between Environments

Development Mode

Production Mode

Preview Production Build

Angular Build Configuration

Key Build Settings

Running Local Backend

Custom Environment Configuration

Create Staging Environment

CORS Configuration

Using Angular Proxy

Environment Best Practices

Troubleshooting

Next Steps