Angular Front end(UI)

 Perfect 👍 Let’s do this with Angular (latest) frontend. 5 clear steps + code so that it works with the backend and Ollama inside the same docker-compose setup.

---

✅ Step 1: Create Angular Frontend

Run this on your host machine (outside Docker):

npm install -g @angular/cli
ng new frontend --routing --style=css

This creates a new Angular app in frontend/.

Move into the folder:

cd frontend

---

✅ Step 2: Add an API Service

Inside Angular, create a service for backend calls:

ng generate service services/api

This generates src/app/services/api.service.ts. Replace with:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private apiUrl = (window as any)['env']?.API_URL || 'http://localhost:8000';

  constructor(private http: HttpClient) {}

  getRecommendation(payload: any): Observable<any> {
    return this.http.post(`${this.apiUrl}/recommend`, payload);
  }

  chat(payload: any): Observable<any> {
    return this.http.post(`${this.apiUrl}/chat`, payload);
  }
}

---

✅ Step 3: Allow Environment Config at Runtime

Angular normally hardcodes environment.ts, but for Docker we want runtime config.

Create a file: src/assets/env.js:

(function(window) {
  window["env"] = window["env"] || {};
  window["env"]["API_URL"] = "${REACT_APP_API_URL}";
})(this);

Add it in angular.json under assets so it’s copied into the build:

"assets": [
  "src/favicon.ico",
  "src/assets",
  "src/assets/env.js"
]

---

✅ Step 4: Update AppComponent to Call Backend

Modify src/app/app.component.ts:

import { Component } from '@angular/core';
import { ApiService } from './services/api.service';

@Component({
  selector: 'app-root',
  template: `
    <h1>AI Company Recommender</h1>
    <button (click)="getRecommendation()">Get Recommendation</button>
    <p *ngIf="response">{{ response }}</p>
  `
})
export class AppComponent {
  response: string | null = null;

  constructor(private api: ApiService) {}

  getRecommendation() {
    const payload = {
      business_type: "IT Startup",
      investment_amount: 100000,
      number_of_partners: 2,
      is_foreign_citizen: false,
      session_id: "demo-session"
    };
    this.api.getRecommendation(payload).subscribe(res => {
      this.response = res.response;
    });
  }
}

---

✅ Step 5: Dockerize Angular Frontend

Create frontend/Dockerfile:

# Stage 1: Build Angular app
FROM node:18-slim as build

WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build -- --configuration production

# Stage 2: Serve with Nginx
FROM nginx:alpine

# Copy build output
COPY --from=build /app/dist/frontend /usr/share/nginx/html

# Replace env vars in env.js at runtime
COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Create frontend/nginx.conf:

server {
  listen 80;

  location / {
    root   /usr/share/nginx/html;
    index  index.html;
    try_files $uri /index.html;
  }

  # Allow API proxy if needed
  location /api/ {
    proxy_pass http://backend:8000/;
  }
}

---

✅ docker-compose.yml (final with Angular frontend)

version: "3.9"

services:
  backend:
    build: .
    container_name: company-recommender-backend
    ports:
      - "8000:8000"
    environment:
      - OLLAMA_URL=http://ollama:11434
    depends_on:
      - ollama

  ollama:
    image: ollama/ollama:latest
    container_name: ollama
    ports:
      - "11434:11434"
    volumes:
      - ollama_data:/root/.ollama

  frontend:
    build: ./frontend
    container_name: company-recommender-frontend
    ports:
      - "3000:80"
    environment:
      - REACT_APP_API_URL=http://backend:8000
    depends_on:
      - backend

volumes:
  ollama_data:

---

✅ Usage

From project root (where docker-compose.yml is):

docker-compose up --build

Now:

• Frontend → http://localhost:3000

• Backend → http://localhost:8000

• Ollama → http://localhost:11434

---

👉 Do you want me to also set up live API URL injection (so Angular doesn’t need rebuilds when backend URL changes), or is the static env.js approach good enough for your case?