cleanup console & landing page

.drone.yml

@@ -91,12 +91,15 @@ steps:
     settings:
       registry: ghcr.io
       repo: ghcr.io/kevinmidboe/varnish-infra-map
-      dockerfile: varnish/Dockerfile
+      contexT: varnish
+      dockerfile: Dockerfile
       compress: true
       username:
         from_secret: GITHUB_USERNAME
       password:
         from_secret: GHCR_UPLOAD_TOKEN
+      build_args_from_env:
+        - 
       tags:
         - latest
         - ${DRONE_COMMIT_SHA}

.env.example

@@ -1,5 +1,11 @@
+DATABASE_URL=
+TRAEFIK_URL=
+HTTP_HEALTH_ENDPOINTS=
 PROXMOX_URL=
 PROXMOX_TOKEN=
 HOMEASSISTANT_URL=
 HOMEASSISTANT_TOKEN=
-TRAEFIK_URL=
+KUBERNETES_SERVICE_HOST=
+KUBERNETES_SA_TOKEN=
+KUBERNETES_CA_CERT_PATH=
+

Dockerfile

@@ -16,5 +16,6 @@ COPY --from=builder /app/build build
 
 EXPOSE 3000
 ENV NODE_ENV=production
+ENV PORT=3000
 
 CMD [ "node", "build/index.js" ]

README.md

@@ -61,20 +61,50 @@ Follow hass documentation on generating a api token: https://developers.home-ass
 Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
 
 ```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
+yarn dev
 ```
 
 ## Building
 
-To create a production version of your app:
+To create a production version to be run from node:
 
 ```bash
-npm run build
+yarn build
 ```
 
-You can preview the production build with `npm run preview`.
+To preview either use vite to serve or execute node entrypoint:
 
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+```bash
+yarn preview
+```
+
+or
+
+```bash
+node build/index.js
+```
+
+## Run using docker
+
+The application is configure to be used either standalone or behind a webserver. To build the svelte-application docker image run:
+
+> NB! Remember to configure .env, which is automatically picked up by docker-compose. Set and override for both containers in this file.
+
+Svelte-kit application:
+
+```bash
+docker build -t infra-map .
+```
+
+Varnish cache:
+
+```bash
+cd varnish
+docker build -t infra-varnish-cache .
+```
+
+Or both using docker compose:
+
+```bash
+docker compose up
+```

docker-compose.yml

@@ -6,8 +6,9 @@ services:
       context: varnish
       dockerfile: Dockerfile
       args:
-        HASS_HOST: 10.0.0.82
-        FRONTEND_HOST: app
+        # sets build variables. Overridden by env, but has sane defaults
+        IMAGE_HOST: ${IMAGE_HOST:-homeassistant.local}
+        PROXY_HOST: ${PROXY_HOST:-app}
     ports:
       - '6081:6081'
     depends_on:
@@ -17,8 +18,9 @@ services:
     build:
       context: .
       dockerfile: Dockerfile
-    env_file: '.env'
+    env_file: .env # sets container's environment
     environment:
       - NODE_ENV=production
-      - PORT=3000
-      - ORIGIN=http://localhost:3000
+      - PROTOCOL_HEADER=x-forwarded-proto
+      - HOST_HEADER=x-forwarded-host
+      - PORT_HEADER=x-forwarded-port

src/lib/components/Header.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { page } from '$app/stores';
-	import User from '$lib/icons/user.svelte';
 	import { derived } from 'svelte/store';
 
 	// Create a derived store to extract breadcrumb data
@@ -9,14 +8,6 @@
 
 		return segments.map((segment, index) => {
 			let label = decodeURI(segment);
-
-			// if not uuid pattern, this is weird order of ops
-			/*
-			if (!segment.match(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/)) {
-				label = label.replace(/-/g, ' ')
-			}
-			*/
-
 			return {
 				label,
 				path: '/' + segments.slice(0, index + 1).join('/')
@@ -40,10 +31,6 @@
 			<a href={crumb.path}>{crumb.label}</a>
 		{/each}
 	</div>
-
-	<div class="right">
-		<User />
-	</div>
 </div>
 
 <style lang="scss">

varnish/Dockerfile

@@ -23,15 +23,13 @@ RUN git clone https://github.com/varnish/libvmod-digest.git /opt/libvmod-digest
 
 COPY --from=hairyhenderson/gomplate:stable /gomplate /bin/gomplate
 
-ARG HASS_HOST
-ARG FRONTEND_HOST
-ENV HASS_HOST=$HASS_HOST
-ENV FRONTEND_HOST=$FRONTEND_HOST
-
 COPY default.vcl.tmpl /etc/varnish/
 COPY *.vcl /etc/varnish/
 COPY includes /etc/varnish/includes
 
+ARG PROXY_HOST=$PROXY_HOST
+ARG IMAGE_HOST=$IMAGE_HOST
+
 RUN gomplate -f /etc/varnish/default.vcl.tmpl -o /etc/varnish/default.vcl
 RUN rm /etc/varnish/default.vcl.tmpl
 

varnish/default.vcl.tmpl

@@ -2,18 +2,19 @@ vcl 4.0;
 
 import std;
 import digest;
+import directors;
 
 include "includes/x-cache-header.vcl";
 include "vcl_deliver.vcl";
 
 # Define backend pointing to Home Assistant IP
 backend hass_backend {
-    .host = "{{ getenv `HASS_HOST` `homeassistant.local` }}";
+    .host = "{{ getenv `IMAGE_HOST` `homeassistant.local` }}";
     .port = "8123";
 }
 
 backend app_frontend {
-    .host = "{{ getenv `FRONTEND_HOST` `localhost` }}";
+    .host = "{{ getenv `PROXY_HOST` `localhost` }}";
     .port = "3000";
 }
 
@@ -45,6 +46,17 @@ sub vcl_recv {
     unset req.http.Cookie;
 }
 
+// Svelte-kit needs to distinguish between it's own files and the Host header.
+// The X-Forwarded-* headers below are to tell svelte-kit where it's local files are,
+// and the Host header is included in the returned html & js referencing the external
+// domain or proxy requested by client.
+// https://svelte.dev/docs/kit/adapter-node#Environment-variables-ORIGIN-PROTOCOL_HEADER-HOST_HEADER-and-PORT_HEADER
+sub vcl_backend_fetch {
+    set bereq.http.X-Forwarded-Host = "localhost";
+    set bereq.http.X-Forwarded-Port = "3000";
+    set bereq.http.X-Forwarded-Proto = "http";
+}
+
 sub vcl_synth {
     if (resp.status == 204) {
         set resp.http.Access-Control-Allow-Origin = "*";