From cfd7ca1a26d64366b9987f17286b89c5e783a661 Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Thu, 14 Aug 2025 00:12:39 +0100
Subject: [PATCH] refactor(app): default backend: localhost (#303)

* use api config everywhere, default to localhost, ignore .env file, provide .env.dist

* fix lint
---
 app/{.env => .env.dist}        | 3 ++-
 app/.gitignore                 | 1 +
 app/src/App.tsx                | 6 +++---
 app/src/ModalContent.tsx       | 4 +++-
 app/src/api/directus.ts        | 5 ++++-
 app/src/config/index.ts        | 2 +-
 app/src/pages/Landingpage.tsx  | 3 ++-
 app/src/pages/MapContainer.tsx | 3 ++-
 8 files changed, 18 insertions(+), 9 deletions(-)
 rename app/{.env => .env.dist} (68%)

diff --git a/app/.env b/app/.env.dist
similarity index 68%
rename from app/.env
rename to app/.env.dist
index 4d364d32..9d9b38ca 100644
--- a/app/.env
+++ b/app/.env.dist
@@ -1,4 +1,5 @@
 VITE_OPEN_COLLECTIVE_API_KEY=your_key
-VITE_API_URL=https://api.utopia-lab.org
+VITE_API_URL=http://localhost:8055/
+#VITE_API_URL=https://api.utopia-lab.org
 VITE_VALIDATE_INVITE_FLOW_ID=01d61db0-25aa-4bfa-bc24-c6a8f208a455
 VITE_REDEEM_INVITE_FLOW_ID=cc80ec73-ecf5-4789-bee5-1127fb1a6ed4
diff --git a/app/.gitignore b/app/.gitignore
index 3bdd52eb..3a773879 100644
--- a/app/.gitignore
+++ b/app/.gitignore
@@ -1,3 +1,4 @@
 node_modules/
 dist/
 .DS_Store
+.env
\ No newline at end of file
diff --git a/app/src/App.tsx b/app/src/App.tsx
index 39b07772..56b95f24 100644
--- a/app/src/App.tsx
+++ b/app/src/App.tsx
@@ -113,7 +113,7 @@ function App() {
           path: '/' + l.name, // url
           icon: (
             <SVG
-              src={'https://api.utopia-lab.org/assets/' + l.indexIcon}
+              src={config.apiUrl + 'assets/' + l.indexIcon}
               className='tw:w-6 tw:h-6'
               preProcessor={(code: string) =>
                 code.replace(/stroke=".*?"/g, 'stroke="currentColor"')
@@ -134,7 +134,7 @@ function App() {
         link.rel = 'icon'
         document.getElementsByTagName('head')[0].appendChild(link)
       }
-      link.href = map?.logo && 'https://api.utopia-lab.org/assets/' + map.logo // Specify the path to your favicon
+      link.href = map?.logo && config.apiUrl + 'assets/' + map.logo // Specify the path to your favicon
     }
 
     setLoading(false)
@@ -148,7 +148,7 @@ function App() {
       <div className='App tw:overflow-x-hidden'>
         <AuthProvider userApi={userApi} inviteApi={inviteApi}>
           <AppShell
-            assetsApi={new assetsApi('https://api.utopia-lab.org/assets/')}
+            assetsApi={new assetsApi(config.apiUrl + 'assets/')}
             appName={map.name}
             embedded={embedded}
             openCollectiveApiKey={config.openCollectiveApiKey}
diff --git a/app/src/ModalContent.tsx b/app/src/ModalContent.tsx
index 65e849dc..96232cc8 100644
--- a/app/src/ModalContent.tsx
+++ b/app/src/ModalContent.tsx
@@ -6,6 +6,8 @@
 import { useEffect, useState } from 'react'
 import { TextView } from 'utopia-ui'
 
+import { config } from './config'
+
 interface ChapterProps {
   clickAction1: () => void
   map?: any
@@ -31,7 +33,7 @@ export function Welcome1({ clickAction1, map }: ChapterProps) {
           <h3 className='tw:font-bold tw:text-lg'>Welcome to {map?.name || 'Utopia Map'}</h3>
           <img
             className='tw:float-right tw:w-32 tw:m-2'
-            src={'https://api.utopia-lab.org/assets/' + map.logo}
+            src={config.apiUrl + 'assets/' + map.logo}
           ></img>
           <p className='tw:py-3'>
             It is a tool for collaborative mapping to connect local initiatives, people and events.
diff --git a/app/src/api/directus.ts b/app/src/api/directus.ts
index 7b32f8b4..140ca4ba 100644
--- a/app/src/api/directus.ts
+++ b/app/src/api/directus.ts
@@ -4,6 +4,9 @@
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 import { createDirectus, rest, authentication } from '@directus/sdk'
 
+// eslint-disable-next-line import/no-relative-parent-imports
+import { config } from '../config'
+
 import type { AuthenticationData, AuthenticationStorage } from '@directus/sdk'
 import type { Point } from 'geojson'
 import type { Item } from 'utopia-ui'
@@ -94,7 +97,7 @@ export async function getRefreshToken() {
   return auth!.refresh_token
 }
 
-export const directusClient = createDirectus<MyCollections>('https://api.utopia-lab.org/')
+export const directusClient = createDirectus<MyCollections>(config.apiUrl)
   .with(rest())
   .with(
     authentication('json', {
diff --git a/app/src/config/index.ts b/app/src/config/index.ts
index 28ab494c..e82ac975 100644
--- a/app/src/config/index.ts
+++ b/app/src/config/index.ts
@@ -1,5 +1,5 @@
 export const config = {
-  apiUrl: String(import.meta.env.VITE_API_URL ?? 'https://api.utopia-lab.org'),
+  apiUrl: String(import.meta.env.VITE_API_URL ?? 'http://localhost:8055/'),
   validateInviteFlowId: String(
     import.meta.env.VITE_VALIDATE_INVITE_FLOW_ID ?? '01d61db0-25aa-4bfa-bc24-c6a8f208a455',
   ),
diff --git a/app/src/pages/Landingpage.tsx b/app/src/pages/Landingpage.tsx
index ce11c382..9387411c 100644
--- a/app/src/pages/Landingpage.tsx
+++ b/app/src/pages/Landingpage.tsx
@@ -12,6 +12,7 @@ import { useNavigate } from 'react-router-dom'
 import { MapOverlayPage } from 'utopia-ui'
 
 import { itemsApi } from '../api/itemsApi'
+import { config } from '../config'
 
 export const Landingpage = () => {
   const [isLandingpageVisible, setIsLandingpageVisible] = useState(true)
@@ -137,7 +138,7 @@ export const Landingpage = () => {
                     <li key={idx}>
                       <div className='w-24 h-24 mx-auto'>
                         <img
-                          src={`https://api.utopia-lab.org/assets/${item.image}`}
+                          src={`${config.apiUrl}assets/${item.image}`}
                           className='w-full h-full rounded-full'
                           alt=''
                         />
diff --git a/app/src/pages/MapContainer.tsx b/app/src/pages/MapContainer.tsx
index fe3140a1..9818286e 100644
--- a/app/src/pages/MapContainer.tsx
+++ b/app/src/pages/MapContainer.tsx
@@ -23,6 +23,7 @@ import {
 } from 'utopia-ui'
 
 import { itemsApi } from '../api/itemsApi'
+import { config } from '../config'
 
 import type { Place } from '../api/directus'
 import type { LayerProps } from 'utopia-ui'
@@ -94,7 +95,7 @@ function MapContainer({ layers, map }: { layers: LayerProps[]; map: any }) {
               id={layer.id}
               key={layer.id}
               name={layer.name}
-              menuIcon={'https://api.utopia-lab.org/assets/' + layer.menuIcon}
+              menuIcon={config.apiUrl + 'assets/' + layer.menuIcon}
               menuText={layer.menuText}
               menuColor={layer.menuColor}
               markerIcon={layer.markerIcon}