> ## Documentation Index
> Fetch the complete documentation index at: https://internal.docs.wcrbusiness.online/llms.txt
> Use this file to discover all available pages before exploring further.

# Frontend Development Setup

> Complete guide for setting up WCR frontend development environment

<Note>
  **Internal Use Only** - WCR Development Team
</Note>

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                                |

<Card title="Download Node.js" icon="download" href="https://nodejs.org/">
  Node.js can be downloaded from the official website
</Card>

<Info>
  **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.
</Info>

## 2. Quick Start Workflow

This section provides a condensed workflow for experienced users:

<Steps>
  <Step title="Clone Repository">
    ```bash theme={null}
    git clone https://github.com/WeCareRemote/wcr.is
    ```
  </Step>

  <Step title="Configure Hosts">
    Modify `/etc/hosts` (or equivalent) to add `72.144.25.104` mappings
  </Step>

  <Step title="Update Config">
    Replace the contents of `src/environments/environment.ts` (see Section 3.3)
  </Step>

  <Step title="Install">
    ```bash theme={null}
    npm install
    ```
  </Step>

  <Step title="Serve">
    ```bash theme={null}
    npx ng serve --port 4200
    ```
  </Step>

  <Step title="Access">
    Open `http://localhost:4200`
  </Step>
</Steps>

## 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:

```bash theme={null}
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.

<Tabs>
  <Tab title="macOS / Linux">
    Open your hosts file in Terminal (requires administrator/root password):

    ```bash theme={null}
    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`.
  </Tab>

  <Tab title="Windows">
    <Warning>
      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.
    </Warning>

    1. Right-click Notepad → "Run as Administrator"
    2. Open `C:\Windows\System32\drivers\etc\hosts`
    3. Add the following line:

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

    4. Save the file
  </Tab>
</Tabs>

**Verification**: Confirm the domain resolves to the correct IP:

```bash theme={null}
ping getme.global
# Expected output should show: 72.144.25.104
```

### Step 3.3: Update Environment Configuration

<Warning>
  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.
</Warning>

Edit the environment file:

```bash theme={null}
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:

```typescript src/environments/environment.ts theme={null}
// 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`):

```bash theme={null}
npm install
```

This installs all dependencies from `package.json`.

<Accordion title="Troubleshooting: Dependency Errors">
  If you encounter dependency or peer-dependency errors, try one of the following commands:

  ```bash theme={null}
  npm install --legacy-peer-deps
  # OR
  rm -rf node_modules package-lock.json && npm install
  ```
</Accordion>

## 4. Running the Application

### 4.1 Start the Development Server

Start the Angular development server using the Angular CLI command:

<Warning>
  **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.
</Warning>

Run the command:

```bash theme={null}
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 **
```

<Steps>
  <Step title="Open your browser" />

  <Step title="Navigate to">
    ```
    http://localhost:4200
    ```
  </Step>

  <Step title="Login">
    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`
  </Step>
</Steps>

<Info>
  To stop the running server, press `Ctrl + C` in the terminal window.
</Info>