Frontend Development Setup

Internal Use Only - WCR Development Team

This comprehensive guide details the required steps to set up your local development environment. It configures the Angular frontend application to connect to the central dev server for all backend services (API, database, WebSockets).

1. Prerequisites

Ensure your system meets all required dependencies before proceeding with the setup.

Required Utilities

Utility	Required Version	Verification Command
Node.js & npm	v18 or higher	`node --version` / `npm --version`
Git	Any modern version	`git --version`
IDE	VS Code, Cursor, etc.	N/A

Download Node.js

Node.js can be downloaded from the official website

Note on Angular CLI: We utilize npx (Node Package Execute) to automatically run the project’s locally specified version of the Angular CLI (ng), eliminating the need for a global installation.

2. Quick Start Workflow

This section provides a condensed workflow for experienced users:

Clone Repository

git clone https://github.com/WeCareRemote/wcr.is

Configure Hosts

Modify /etc/hosts (or equivalent) to add 72.144.25.104 mappings

Update Config

Replace the contents of src/environments/environment.ts (see Section 3.3)

Install

npm install

Serve

npx ng serve --port 4200

Access

Open http://localhost:4200

3. Detailed Setup Instructions

These steps should be executed within your desired working directory.

Step 3.1: Clone the Frontend Repository

Acquire the WCR frontend code from the official GitHub repository. Navigate to your preferred development folder. Run the clone command and move into the project directory:

git clone https://github.com/WeCareRemote/wcr.is
cd wcr.is

Step 3.2: Configure /etc/hosts

This crucial step ensures that your local machine resolves the dev server domains directly to the correct IP address, bypassing public DNS.

macOS / Linux
Windows

Open your hosts file in Terminal (requires administrator/root password):

sudo nano /etc/hosts

Add the following line at the bottom of the file:

72.144.25.104 getme.global jitsi.getme.global n8n.getme.global

Save and exit: Press Ctrl+X, then Y (for Yes), then Enter.

This file is located at C:\Windows\System32\drivers\etc\hosts.It must be edited with administrative privileges, typically using Notepad or VS Code as Administrator.

Right-click Notepad → “Run as Administrator”
Open C:\Windows\System32\drivers\etc\hosts
Add the following line:

72.144.25.104 getme.global jitsi.getme.global n8n.getme.global

Save the file

Verification: Confirm the domain resolves to the correct IP:

ping getme.global
# Expected output should show: 72.144.25.104

Step 3.3: Update Environment Configuration

Angular utilizes TypeScript files (.ts) for configuration that is compiled into the build; therefore, external .env files are not supported for this type of build process.

Edit the environment file:

nano src/environments/environment.ts

Replace the entire contents of the file with the following configuration block, which points all services to the getme.global dev server:

src/environments/environment.ts

// Environment configuration for DEV SERVER connection
// This connects to getme.global backend instead of localhost

export const environment = {
  production: false,
  qa: false,
  analyticsEnabled: false,
  stripe: {
    pk: 'test',
    clientId: 'ca_GgO95cUekvDE3ICMKqIuleUryIUMU7Up',
  },
  baseUrl: 'https://getme.global/',
  apiUrl: 'https://getme.global/api/v1/',
  wsBase: 'wss://getme.global/cable',
  jitsiUrl: 'jitsi.getme.global',
  logRocketAppId: '82ifzt/prodgreytme',
  paypal: {
    clientID: 'test',
  },
  oneSignal: {
    appId: 'test',
    safari_web_id: 'test',
    allowLocalhostAsSecureOrigin: false,
  },
  revision: 'dev',
  mode: 'development',
  appTitle: 'WCR Dev',
  // LupAI API Configuration
  lupai: {
    wsUrl: 'ws://lupai.de:8000/lupai/multi_agent/chat',
    apiUrl: 'https://api.lupai.de',
    username: 'user1@sunflower.de',
    password: 'tXymzsViwG4P1NUbRql5',
  },
};

Save and exit (Ctrl+X, Y, Enter).

Configuration Reference

Setting	Value	Purpose
`baseUrl`	`https://getme.global/`	Main dev server backend URL
`apiUrl`	`https://getme.global/api/v1/`	API endpoints
`wsBase`	`wss://getme.global/cable`	Secure WebSocket connection
`jitsiUrl`	`jitsi.getme.global`	Video conferencing service domain

Step 3.4: Install Dependencies

Execute this command inside your project directory (wcr.is):

npm install

This installs all dependencies from package.json.

Troubleshooting: Dependency Errors

If you encounter dependency or peer-dependency errors, try one of the following commands:

npm install --legacy-peer-deps
# OR
rm -rf node_modules package-lock.json && npm install

4. Running the Application

4.1 Start the Development Server

Start the Angular development server using the Angular CLI command:

Crucial Note on Port and Protocol:The dev server backend is configured with CORS only for localhost:4200. You must specify this port, and you must use the secure https:// protocol for backend communication due to SSL certificates.

Run the command:

npx ng serve --port 4200

4.2 Access the Application

Wait for the terminal output indicating successful compilation:

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

Open your browser

Navigate to

http://localhost:4200

The WCR login page should load, running the frontend locally and connected to the remote dev backend.Test Credentials:

Email: frank.gerhardt@sunflower-care.org
Password: password123

To stop the running server, press Ctrl + C in the terminal window.

​1. Prerequisites

​Required Utilities

Download Node.js

​2. Quick Start Workflow

​3. Detailed Setup Instructions

​Step 3.1: Clone the Frontend Repository

​Step 3.2: Configure /etc/hosts

​Step 3.3: Update Environment Configuration

​Configuration Reference

​Step 3.4: Install Dependencies

​4. Running the Application

​4.1 Start the Development Server

​4.2 Access the Application

1. Prerequisites

Required Utilities

2. Quick Start Workflow

3. Detailed Setup Instructions

Step 3.1: Clone the Frontend Repository

Step 3.2: Configure /etc/hosts

Step 3.3: Update Environment Configuration

Configuration Reference

Step 3.4: Install Dependencies

4. Running the Application

4.1 Start the Development Server

4.2 Access the Application