Fix api urls

.envexample

@@ -12,4 +12,7 @@ FUSIONAUTH_POSTGRES_USER: fusionauth
 FUSIONAUTH_POSTGRES_PASSWORD: password
 FUSIONAUTH_API_KEY: 00c24029-e66a-43f2-9000-544e90e8d46e
 FUSIONAUTH_URL: http://fusionauth:9011
-FUSIONAUTH_APPLICATION_ID: 23e4b229-1219-42e5-aed6-f9b6f1eedef8
+FUSIONAUTH_APPLICATION_ID: 23e4b229-1219-42e5-aed6-f9b6f1eedef8
+
+# Frontend
+API_BASE_URL=http://proxy/cpf/api

README.md

@@ -14,6 +14,21 @@ Kellton Europe CPF app is an innovative web-based platform – a seamless soluti
 # Installation
 Instructions on how to install and set up the project.
 
+1. Copy variables to `.env` files.
+    ```
+    cp .envexample .env
+    ```
+2. Build and run the project
+    ```
+   docker compose build
+   docker compose up
+   ```
+   or just
+    ```
+    docker compose up --build
+    ```
+3. Open http://0.0.0.0:8080/ with your browser to see the result.
+
 # Usage
 Instructions on how to use the project.
 

docker-compose.yml

@@ -29,6 +29,8 @@ services:
       - ./frontend/public:/code/public
     ports:
       - '3000:3000'
+    env_file:
+      - .env
 
   api-server:
     image: cpf/backend-image

frontend/src/api/index.ts

@@ -0,0 +1,8 @@
+const baseUrl = process.env.API_BASE_URL;
+
+export const API_URLS = {
+  library: {
+    ladders: `${baseUrl}/library/ladders`,
+    buckets: `${baseUrl}/library/buckets`,
+  },
+};

frontend/src/app/(app)/library/[ladder]/[bucket]/page.tsx

@@ -1,8 +1,9 @@
 import { Breadcrumbs } from '@app/components/modules/Breadcrumbs';
 import { mapKeysToCamelCase } from '@app/utils';
+import { API_URLS } from '@app/api';
 
 async function getBucketDetails(slug: string) {
-  const response = await fetch(`https://proxy/cpf/api/library/buckets/${slug}`);
+  const response = await fetch(`${API_URLS.library.buckets}/${slug}`);
 
   if (!response.ok) {
     throw new Error('Failed to fetch bucket details');

frontend/src/app/(app)/library/[ladder]/page.tsx

@@ -1,9 +1,10 @@
 import { Breadcrumbs } from '@app/components/modules/Breadcrumbs';
 import { LibraryDetailed } from '@app/components/modules/LibraryDetailed';
 import { mapKeysToCamelCase } from '@app/utils';
+import { API_URLS } from '@app/api';
 
 async function getLadderDetails(slug: string) {
-  const response = await fetch(`https://proxy/cpf/api/library/ladders/${slug}`);
+  const response = await fetch(`${API_URLS.library.ladders}/${slug}`);
 
   if (!response.ok) {
     throw new Error('Failed to fetch ladder details');

frontend/src/app/(app)/library/page.tsx

@@ -1,8 +1,9 @@
 import { mapKeysToCamelCase } from '@app/utils';
 import { LadderCard, LadderCardInterface } from '@app/components/common/LadderCard';
+import { API_URLS } from '@app/api';
 
 async function getLadders() {
-  const response = await fetch('https://proxy/cpf/api/library/ladders');
+  const response = await fetch(API_URLS.library.ladders);
 
   if (!response.ok) {
     throw new Error('Failed to fetch ladders');