refactor(app): default backend: localhost (#303)

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

* fix lint

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

app/.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 dist/
 .DS_Store
+.env

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}

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.

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', {

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',
   ),

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=''
                         />

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}