Add defaults for API_ENDPOINT and UI_PUBLIC_URL

Dockerfile

@@ -4,8 +4,9 @@ FROM node:10 as ui
 ARG API_ENDPOINT
 ENV API_ENDPOINT=${API_ENDPOINT}
 
+# Set environment variable UI_PUBLIC_URL from build args, uses "/" as default
 ARG UI_PUBLIC_URL
-ENV UI_PUBLIC_URL=${UI_PUBLIC_URL}
+ENV UI_PUBLIC_URL=${UI_PUBLIC_URL:-/}
 
 RUN mkdir -p /app
 WORKDIR /app

docker-compose.example.yml

@@ -13,14 +13,7 @@ services:
       - db_data:/var/lib/mysql
 
   photoview:
-    build:
-      context: "."
-      args:
-        - UI_PUBLIC_URL=/
-
-        # Change This: The url from which the web ui can access the backend
-        # Should by default be the value of PUBLIC_ENDPOINT with /api appended to it
-        - API_ENDPOINT=http://localhost:8000/api/
+    build: "."
 
     restart: always
     ports:

ui/src/apolloClient.js

@@ -9,16 +9,18 @@ import { getMainDefinition } from 'apollo-utilities'
 import { MessageState } from './components/messages/Messages'
 import urlJoin from 'url-join'
 
-const GRAPHQL_ENDPOINT = urlJoin(process.env.API_ENDPOINT, '/graphql')
+const GRAPHQL_ENDPOINT = process.env.API_ENDPOINT
+  ? urlJoin(process.env.API_ENDPOINT, '/graphql')
+  : urlJoin(location.origin, '/api/graphql')
 
 const httpLink = new HttpLink({
   uri: GRAPHQL_ENDPOINT,
   credentials: 'same-origin',
 })
 
-console.log('API ENDPOINT', process.env.API_ENDPOINT)
+console.log('GRAPHQL ENDPOINT', GRAPHQL_ENDPOINT)
 
-const apiProtocol = new URL(process.env.API_ENDPOINT).protocol
+const apiProtocol = new URL(GRAPHQL_ENDPOINT).protocol
 
 let websocketUri = new URL(GRAPHQL_ENDPOINT)
 websocketUri.protocol = apiProtocol === 'https:' ? 'wss:' : 'ws:'
@@ -92,7 +94,7 @@ const linkError = onError(({ graphQLErrors, networkError }) => {
   }
 
   if (errorMessages.length > 0) {
-    const newMessages = errorMessages.map(msg => ({
+    const newMessages = errorMessages.map((msg) => ({
       key: Math.random().toString(26),
       type: 'message',
       props: {
@@ -100,7 +102,7 @@ const linkError = onError(({ graphQLErrors, networkError }) => {
         ...msg,
       },
     }))
-    MessageState.set(messages => [...messages, ...newMessages])
+    MessageState.set((messages) => [...messages, ...newMessages])
   }
 })