Separate Docker UI build

Author: vincent99

ui/.ackrc renamed to .ackrc

@@ -7,6 +7,7 @@
 --ignore-dir=coverage
 --ignore-dir=dist
 --ignore-dir=node_modules
+--ignore-dir=static/ui
 --ignore-dir=tmp
 --ignore-dir=vendor
 --ignore-file=ext:svg

Dockerfile

@@ -1,10 +1,18 @@
-FROM golang:1.22.0-alpine3.19 AS build
-RUN apk add -U --no-cache make git npm
+FROM node:18-alpine as build-ui
+RUN apk add -U --no-cache make git
+COPY ui /src
+WORKDIR /src
+RUN make
+
+FROM golang:1.22.0-alpine3.19 AS build-go
+RUN apk add -U --no-cache make git
 COPY . /src/gptscript
+COPY --from=build-ui /src/.output/public /src/gptscript/static/ui
 WORKDIR /src/gptscript
-
-RUN make all
+RUN make build
 
 FROM alpine AS release
-COPY --from=build /src/gptscript/bin /usr/local/bin/
+WORKDIR /src
+COPY --from=build-go /src/gptscript/bin /usr/local/bin/
+COPY --from=build-go /src/gptscript/examples /src/examples
 ENTRYPOINT ["/usr/local/bin/gptscript"]

Makefile

@@ -2,6 +2,10 @@ all: build-ui build
 
 build-ui:
 	$(MAKE) -C ui
+	rm -rf static/ui
+	mkdir -p static/ui/_nuxt
+	touch static/ui/placeholder static/ui/_nuxt/_placeholder
+	cp -rp ui/.output/public/* static/ui/
 
 build:
 	CGO_ENABLED=0 go build -o bin/gptscript -tags "${GO_TAGS}" -ldflags "-s -w" .

ui/Makefile

@@ -1,9 +1,6 @@
 build: clean
 	npm install
 	npm run generate
-	rm -rf ../static/ui/_nuxt
-	cp -rp .output/public/* ../static/ui/
-	touch ../static/ui/_nuxt/_placeholder
 
 clean:
 	npm run clean

ui/nuxt.config.ts

@@ -4,6 +4,8 @@ import pkg from './package.json'
 dotenv.config()
 
 const port = 9091
+const isDev = process.env.NODE_ENV === 'development'
+const api = process.env.NUXT_PUBLIC_API || (isDev ? 'http://localhost:9090/' : '/')
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
@@ -35,7 +37,7 @@ export default defineNuxtConfig({
   nitro: { sourceMap: true },
   runtimeConfig: {
     public: {
-      api: (process.env.NUXT_PUBLIC_API || 'http://localhost:9090/').replace(/\/+$/,'')+'/',
+      api: api.replace(/\/+$/,'')+'/',
     },
   },
   sourcemap: true,

ui/pages/index.vue

@@ -4,6 +4,6 @@
 
     <img src="~/assets/logo.svg" width="300px" style="aspect-ratio: preserve;" class="inline m-5" align="center" />
 
-    <h2 class="mt-20"><i class="i-heroicons-arrow-long-left align-middle text-lg"/> Choose a script to get started.</h2>
+    <h2 class="mt-10"><i class="i-heroicons-arrow-long-left align-middle text-lg"/> Choose a script to get started.</h2>
   </div>
 </template>

ui/stores/gpts.ts

@@ -18,7 +18,7 @@ export const useGpts = defineStore('gpts', {
       }
 
       const url = useRuntimeConfig().public.api + id
-      const data = reactive<Gpt>(await $fetch(url))
+      const data = reactive<Gpt>(await $fetch(url, {baseURL: '/'}))
 
       this.list.push(data)
       this.map[id] = data
@@ -27,7 +27,7 @@ export const useGpts = defineStore('gpts', {
 
     async listAll() {
       const url = useRuntimeConfig().public.api
-      const data = await $fetch(url, {headers: {'X-Requested-With': 'fetch'} }) as string[]
+      const data = await $fetch(url, {baseURL: '/', headers: {'X-Requested-With': 'fetch'} }) as string[]
       return reactive(data)
     }
   }

ui/stores/runs.ts

@@ -41,7 +41,7 @@ export const useRuns = defineStore('runs', {
         url = addParam(url, 'tool', toolName)
       }
 
-      const res = await $fetch(url, {method: 'POST', body: args}) as {id: string}
+      const res = await $fetch(url, {baseURL: '/', method: 'POST', body: args}) as {id: string}
       const id = res.id
 
       const obj: Run = reactive({

ui/stores/socket.ts

@@ -12,7 +12,13 @@ interface SocketState {
 
 export const useSocket = defineStore('socket', {
   state: () => {
-    const url = useRuntimeConfig().public.api.replace(/^http/,'ws')
+    let url = useRuntimeConfig().public.api
+    if ( url.startsWith('/') ) {
+      url = `${window.location.origin}${url}`
+    }
+
+    url = url.replace(/^http/,'ws')
+
     const sock = useWebSocket(url, {
       immediate: false,
       autoReconnect: true,