chore: improve dev workflow

.air.compose.toml

@@ -7,7 +7,7 @@ tmp_dir = "tmp"
   bin = "./tmp/main"
   cmd = "go build -o ./tmp/main ."
   delay = 1000
-  exclude_dir = ["assets", "tmp", "vendor", "testdata"]
+  exclude_dir = ["assets", "tmp", "vendor", "testdata", "frontend", "db", "docs"]
   exclude_file = []
   exclude_regex = ["_test.go"]
   exclude_unchanged = false
@@ -42,5 +42,5 @@ tmp_dir = "tmp"
   clean_on_exit = true
 
 [screen]
-  clear_on_rebuild = true
+  clear_on_rebuild = false
   keep_scroll = true

.air.toml

@@ -7,7 +7,7 @@ tmp_dir = "tmp"
   bin = ";export $(grep -v '^#' .env | xargs); ./tmp/main"
   cmd = "go build -o ./tmp/main ."
   delay = 1000
-  exclude_dir = ["assets", "tmp", "vendor", "testdata"]
+  exclude_dir = ["assets", "tmp", "vendor", "testdata", "frontend", "db", "docs"]
   exclude_file = []
   exclude_regex = ["_test.go"]
   exclude_unchanged = false

.dockerignore

@@ -1,5 +1,11 @@
 .env
+.env*
 static/3rdparty/*
 *.mmdb
 .git*
-docs
+docs
+db
+.air.toml
+.vscode
+frontend/node_modules
+tmp

.gitignore

@@ -1,7 +1,7 @@
 rest-geoip
 GeoLite2*
 db.mmdb
-.env
+.env*
 static/3rdparty
 .vscode
 main

Dockerfile

@@ -1,14 +1,17 @@
-# Build spa
-FROM node:20.11.1-alpine3.19 AS spa-builder
+FROM node:20.11.1-alpine3.19 AS frontend-builder
 WORKDIR /app
 RUN npm install -g pnpm@8.10.0
 COPY frontend /app
 RUN rm -rf /app/node_modules
 RUN pnpm install --frozen-lockfile
+
+# Build spa
+FROM frontend-builder AS spa-builder
 RUN npx vite build --outDir /app/dist
 
 # Build app
 FROM golang:1.21.3-alpine3.18 AS builder
+EXPOSE 1323
 RUN apk add --no-cache upx=4.0.2-r0
 WORKDIR /app
 COPY go.mod .
@@ -25,6 +28,10 @@ FROM golang:1.21.3-alpine3.18 AS dev
 RUN go install github.com/cosmtrek/air@latest
 WORKDIR /app
 
+# dev frontend image
+FROM frontend-builder AS dev-frontend
+EXPOSE 5173
+
 # Main docker image
 FROM alpine:3.18.4
 COPY --from=builder /app/rest-geoip /usr/bin/

README.md

@@ -4,7 +4,7 @@
 [![main build](https://github.com/TwistTheNeil/rest-geoip/actions/workflows/docker-build-latest.yml/badge.svg?branch=main)](https://github.com/TwistTheNeil/rest-geoip/actions/workflows/docker-build-latest.yml)
 [![main docker image](https://github.com/TwistTheNeil/rest-geoip/actions/workflows/docker-publish-tags.yml/badge.svg)](https://github.com/TwistTheNeil/rest-geoip/actions/workflows/docker-publish-tags.yml)
 
-***For any current or previous stable versions, look in the appropriate tag's branch. `main` will be in continuous development***
+***For any current or previous stable versions, look in the appropriate tag's branch. [`main`](https://github.com/TwistTheNeil/rest-geoip) will be in continuous development***
 
 A self hosted geoip lookup application written in Go and Vue.js 3 which provides a client with information about their IP address or any other. It uses the [Maxmind](https://www.maxmind.com) GeoLite2-City database.
 

docker-compose.dev.yml

@@ -1,10 +1,22 @@
 version: '3.4'
 
 services:
+  frontend:
+    build:
+      context: .
+      target: dev-frontend
+    ports:
+      - 5173:5173
+    volumes:
+      - ./frontend:/app
+    command: "npx vite --mode testing --host 0.0.0.0"
   rest-geoip:
     build:
       context: .
       target: dev
     volumes:
       - .:/app
+    env_file:
+      # create this file
+      - .env.compose.dev
     command: "air -c .air.compose.toml"

docker-compose.yml

@@ -2,20 +2,13 @@ version: '3.4'
 
 services:
   rest-geoip:
-    image: twistedneil/eleven:main
+    #image: twistedneil/eleven:main
+    build:
+      context: .
     ports:
       - 1323:1323
     volumes:
       - ./db:/opt/
-    environment:
-      - GOIP_MAXMIND__DB_LOCATION=/opt/
-      - GOIP_MAXMIND__DB_FILE_NAME=GeoLite2-City.mmdb
-      - GOIP_PROGRAM__API_KEY=${GOIP_PROGRAM__API_KEY}
-      - GOIP_MAPTILER__TOKEN=${GOIP_MAPTILER__TOKEN}
-      - GOIP_MAXMIND__LICENSE_KEY=${GOIP_MAXMIND__LICENSE_KEY}
-      - GOIP_PROGRAM__ENABLE_LOGGING=${GOIP_PROGRAM__ENABLE_LOGGING}
-      - GOIP_PROGRAM__ENABLE_WEB=${GOIP_PROGRAM__ENABLE_WEB}
-      - GOIP_PROGRAM__LISTEN_ADDRESS=${GOIP_PROGRAM__LISTEN_ADDRESS}
-      - GOIP_PROGRAM__LISTEN_PORT=${GOIP_PROGRAM__LISTEN_PORT}
-      - GOIP_PROGRAM__RELEASE_MODE=${GOIP_PROGRAM__RELEASE_MODE}
-
+    env_file:
+      # create this file
+      - .env.compose.production

frontend/.env.production

@@ -0,0 +1 @@
+VITE_BACKEND_HOST=

frontend/.env.testing

@@ -1 +1,2 @@
 NODE_ENV=development
+VITE_BACKEND_HOST=http://localhost:1323

frontend/src/composables/useFetch.ts

@@ -3,14 +3,16 @@ import type { Ref } from 'vue'
 
 import type { MaxmindBackendResponse, ConfigBackendResponse } from '@/types/MaxmindBackend';
 
+const BACKEND_HOST = import.meta.env.VITE_BACKEND_HOST;
+
 export async function getMaxmindData(ipAddress?: string): Promise<{ data: Ref<MaxmindBackendResponse| null>, error: Ref<string | null> }> {
   const data: Ref<MaxmindBackendResponse | null> = ref(null);
   const error: Ref<string | null> = ref(null);
 
   try {
-    let url = '/api/geoip';
+    let url = `${BACKEND_HOST}/api/geoip`;
     if (ipAddress) {
-      url = `/api/geoip/${ipAddress}`;
+      url = `${url}/${ipAddress}`;
     }
     const fetchPromise = await fetch(url);
     data.value = await fetchPromise.json();
@@ -23,7 +25,7 @@ export async function getMaxmindData(ipAddress?: string): Promise<{ data: Ref<Ma
 
 export async function getConfig(): Promise<{ data: ConfigBackendResponse | null, error: string | null }> {
   try {
-    const fetchPromise = await fetch("/api/config");
+    const fetchPromise = await fetch(`${BACKEND_HOST}/api/config`);
     const data: ConfigBackendResponse = await fetchPromise.json();
     return { data, error: null };
   } catch (err: any) {

internal/router/router.go

@@ -5,7 +5,6 @@ import (
 	"fmt"
 	"net"
 	"net/http"
-	"os"
 	"rest-geoip/internal/config"
 	"rest-geoip/internal/maxmind"
 	"strings"
@@ -109,11 +108,10 @@ func InitRouter() {
 				Filesystem: http.FS(spaFS),
 			}))
 		} else {
-			// Development mode - static fs handler
-			e.Use(middleware.StaticWithConfig(middleware.StaticConfig{
-				Browse:     false,
-				HTML5:      true,
-				Filesystem: http.FS(os.DirFS("./internal/router/dist/")),
+			// Development mode - cors with vite dev
+			e.Use(middleware.CORSWithConfig(middleware.CORSConfig{
+				AllowOrigins: []string{"http://localhost:5173"},
+				AllowHeaders: []string{echo.HeaderOrigin, echo.HeaderContentType, echo.HeaderAccept},
 			}))
 		}
 	}