diff --git a/Caddyfile.dev b/Caddyfile.dev index 74f6e63..d8fb896 100644 --- a/Caddyfile.dev +++ b/Caddyfile.dev @@ -2,15 +2,14 @@ debug } -localhost { - tls internal +http://localhost { encode gzip handle_path /api/* { reverse_proxy meshinfo:9000 } handle_path /next/* { rewrite * /next{uri} - reverse_proxy frontend:80 + reverse_proxy frontend:5173 } handle /* { root * /srv diff --git a/Dockerfile.spa b/Dockerfile.spa index 498ac14..24beb3a 100644 --- a/Dockerfile.spa +++ b/Dockerfile.spa @@ -8,10 +8,13 @@ COPY . . WORKDIR /frontend +ARG env=production +ENV NODE_ENV=$env + RUN corepack enable RUN yarn RUN yarn build --base=/next/ EXPOSE 80 -CMD ["/frontend/scripts/run-frontend.sh"] \ No newline at end of file +CMD ["/frontend/scripts/run-frontend.sh"] diff --git a/Dockerfile.spa.dev b/Dockerfile.spa.dev new file mode 100644 index 0000000..3ca9f42 --- /dev/null +++ b/Dockerfile.spa.dev @@ -0,0 +1,18 @@ +# trunk-ignore-all(checkov/CKV_DOCKER_3) +FROM node:20.11.1-alpine + +LABEL org.opencontainers.image.source="https://github.com/MeshAddicts/meshinfo" +LABEL org.opencontainers.image.description="Realtime web UI to run against a Meshtastic regional or private mesh network." + +COPY . . + +WORKDIR /frontend + +ENV NODE_ENV=dev + +RUN corepack enable +RUN yarn + +EXPOSE 5173 + +CMD ["/frontend/scripts/run-frontend.sh"] diff --git a/api/api.py b/api/api.py index 40b3497..8f264a1 100644 --- a/api/api.py +++ b/api/api.py @@ -186,6 +186,7 @@ async def server_config(request: Request) -> JSONResponse: app.add_middleware( CORSMiddleware, allow_origins=allow_origins, + allow_credentials=True, allow_methods=["*"], allow_headers=["*"] ) diff --git a/docker-compose-dev.yml b/docker-compose-dev.yml index 8d74c2c..4bfcd79 100644 --- a/docker-compose-dev.yml +++ b/docker-compose-dev.yml @@ -2,8 +2,7 @@ services: caddy: image: caddy:latest ports: - - 8001:80 - - 8443:443 + - 8000:80 volumes: - ./caddy/data:/data/caddy - ./Caddyfile.dev:/etc/caddy/Caddyfile @@ -35,12 +34,12 @@ services: frontend: build: context: . - dockerfile: Dockerfile.spa + dockerfile: Dockerfile.spa.dev ports: - - 8000:80 + - 5173:5173 environment: - - VITE_API_BASE_URL=/api - - NODE_ENV=production + - VITE_API_BASE_URL=http://localhost:9000 + - NODE_ENV=dev restart: always meshinfo: @@ -52,12 +51,11 @@ services: - ./output:/app/output - ./templates:/app/templates - ./spa:/app/spa + ports: + - 9000:9000 environment: - PYTHONUNBUFFERED=1 - - MQTT_HOST=mqtt - - MQTT_PORT=1883 - - MQTT_USERNAME=meshinfo - - MQTT_PASSWORD=m3sht4st1c + - ALLOW_ORIGINS=* restart: always depends_on: - caddy diff --git a/docker-compose.yml b/docker-compose.yml index 60b010b..c06ddec 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -24,10 +24,6 @@ services: - ./output:/app/output environment: - PYTHONUNBUFFERED=1 - - MQTT_HOST=mqtt - - MQTT_PORT=1883 - - MQTT_USERNAME=meshinfo - - MQTT_PASSWORD=m3sht4st1c ports: - 9000:9000 restart: always diff --git a/frontend/package.json b/frontend/package.json index ae3e011..a6f6d94 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -5,6 +5,7 @@ "type": "module", "scripts": { "start": "vite", + "dev": "vite dev", "build": "tsc && vite build", "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview" diff --git a/frontend/scripts/run-frontend.sh b/frontend/scripts/run-frontend.sh index 6b39205..6ef632e 100755 --- a/frontend/scripts/run-frontend.sh +++ b/frontend/scripts/run-frontend.sh @@ -1,2 +1,8 @@ +echo "NODE_ENV: " $NODE_ENV echo "API BASE URL: " $VITE_API_BASE_URL -yarn build --base=/next/ && npx pm2-runtime /frontend/scripts/server.js + +if [ "$NODE_ENV" == "dev" ]; then + yarn run dev --host 0.0.0.0 +else + yarn build --base=/next/ && npx pm2-runtime /frontend/scripts/server.js +fi diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx index 2e556ba..e5a0cc3 100644 --- a/frontend/src/components/Layout.tsx +++ b/frontend/src/components/Layout.tsx @@ -46,7 +46,7 @@ export const Layout = ({ children }: { children: React.ReactNode }) => { src={`${import.meta.env.BASE_URL}images/icons/chat.svg`} width="20" height="20" - className="inline-block" + className="inline-block mr-2" alt="chat icon" style={{ verticalAlign: "middle" }} /> @@ -59,7 +59,7 @@ export const Layout = ({ children }: { children: React.ReactNode }) => { src={`${import.meta.env.BASE_URL}images/icons/map.svg`} width="20" height="20" - className="inline-block" + className="inline-block mr-2" alt="graph icon" style={{ verticalAlign: "middle" }} /> @@ -72,7 +72,7 @@ export const Layout = ({ children }: { children: React.ReactNode }) => { src={`${import.meta.env.BASE_URL}images/icons/map.svg`} width="20" height="20" - className="inline-block" + className="inline-block mr-2" alt="map icon" style={{ verticalAlign: "middle" }} /> @@ -85,7 +85,7 @@ export const Layout = ({ children }: { children: React.ReactNode }) => { src={`${import.meta.env.BASE_URL}images/icons/node.svg`} width="20" height="20" - className="inline-block" + className="inline-block mr-2" alt="node icon" style={{ verticalAlign: "middle" }} /> @@ -98,7 +98,7 @@ export const Layout = ({ children }: { children: React.ReactNode }) => { src={`${import.meta.env.BASE_URL}images/icons/neighbors.svg`} width="20" height="20" - className="inline-block" + className="inline-block mr-2" alt="neighbors icon" style={{ verticalAlign: "middle" }} /> @@ -111,7 +111,7 @@ export const Layout = ({ children }: { children: React.ReactNode }) => { src={`${import.meta.env.BASE_URL}images/icons/stats.svg`} width="20" height="20" - className="inline-block" + className="inline-block mr-2" alt="stats icon" style={{ verticalAlign: "middle" }} /> @@ -124,7 +124,7 @@ export const Layout = ({ children }: { children: React.ReactNode }) => { src={`${import.meta.env.BASE_URL}images/icons/telemetry.svg`} width="20" height="20" - className="inline-block" + className="inline-block mr-2" alt="telemetry icon" style={{ verticalAlign: "middle" }} /> @@ -137,7 +137,7 @@ export const Layout = ({ children }: { children: React.ReactNode }) => { src={`${import.meta.env.BASE_URL}images/icons/route2.svg`} width="20" height="20" - className="inline-block" + className="inline-block mr-2" alt="traceroutes icon" style={{ verticalAlign: "middle" }} /> diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index 2db8b38..942d589 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -7,7 +7,7 @@ export default defineConfig({ server: { proxy: { "/api": { - target: process.env.API_BASE_URI ?? "http://localhost:9000", + target: process.env.VITE_API_BASE_URL ?? "http://localhost:9000", changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, ""), },