Merge pull request #15 from techgeek03/master

paulbouwer · web-flow · commit 5c0185813ee2 · 2021-02-13T15:18:16.000+10:00
Support context path for rendering static resources
diff --git a/README.md b/README.md
@@ -145,6 +145,36 @@ spec:
           value: "80"
 ```
 
+## Cutomize URL context path
+
+If you have an ingress that routes to a custom context path then you can customize the URL context path. The css files and the images will be loaded properly in that case.
+
+```yaml
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: hello-kubernetes-custom
+spec:
+  replicas: 3
+  selector:
+    matchLabels:
+      app: hello-kubernetes-custom
+  template:
+    metadata:
+      labels:
+        app: hello-kubernetes-custom
+    spec:
+      containers:
+      - name: hello-kubernetes
+        image: paulbouwer/hello-kubernetes:1.8
+        ports:
+        - containerPort: 8080
+        env:
+        - name: MESSAGE
+          value: I just deployed this on Kubernetes!
+        - name: CONTEXT_PATH
+          value: "/api/v1/hello-kubernetes/"
+```
 
 ## Build Container Image
 
diff --git a/app/server.js b/app/server.js
@@ -12,13 +12,15 @@ app.use(morgan('combined'));
 // Configuration
 var port = process.env.PORT || 8080;
 var message = process.env.MESSAGE || "Hello world!";
+var contextPath = process.env.CONTEXT_PATH || "/";
 
 app.get('/', function (req, res) {
     res.render('home', {
       message: message,
       platform: os.type(),
       release: os.release(),
-      hostName: os.hostname()
+      hostName: os.hostname(),
+      contextPath: contextPath
     });
 });
 
diff --git a/app/views/layouts/main.handlebars b/app/views/layouts/main.handlebars
@@ -2,13 +2,13 @@
 <html>
 <head>
     <title>Hello Kubernetes!</title>
-    <link rel="stylesheet" type="text/css" href="/css/main.css">
+    <link rel="stylesheet" type="text/css" href="{{ contextPath }}css/main.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu:300" >
 </head>
 <body>
 
   <div class="main">
-    <img src="/images/kubernetes.png"/>
+    <img src="{{ contextPath }}images/kubernetes.png"/>
     <div class="content">
       {{{body}}}
     </div>
