finish updating frontends (config, node version, etc.)

Author: misto

customer-management-frontend/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18 as build
+FROM node:16 as build
 WORKDIR /usr/src/app
 COPY package.json ./
 COPY package-lock.json ./
@@ -14,6 +14,7 @@ WORKDIR /usr/share/nginx/html
 
 RUN apk add --no-cache nodejs npm
 RUN npm install -g @beam-australia/[email protected]
+ADD .env ./
 ADD entrypoint.sh /var/entrypoint.sh
 ENTRYPOINT ["/var/entrypoint.sh"]
 

customer-management-frontend/package-lock.json

@@ -44,4 +44,4 @@
     "not ie <= 11",
     "not op_mini all"
   ]
-}
+}

customer-management-frontend/package.json

@@ -1,4 +1,4 @@
-FROM node:18 as build
+FROM node:16 as build
 WORKDIR /usr/src/app
 COPY package.json ./
 COPY package-lock.json ./
@@ -14,6 +14,7 @@ WORKDIR /usr/share/nginx/html
 
 RUN apk add --no-cache nodejs npm
 RUN npm install -g @beam-australia/[email protected]
+ADD .env ./
 ADD entrypoint.sh /var/entrypoint.sh
 ENTRYPOINT ["/var/entrypoint.sh"]
 

customer-self-service-frontend/Dockerfile

@@ -39,4 +39,4 @@
     "not ie <= 11",
     "not op_mini all"
   ]
-}
+}

customer-self-service-frontend/package-lock.json

@@ -2,7 +2,7 @@
 
 import React from "react"
 import { BrowserRouter, Route } from "react-router-dom"
-import { Container } from "semantic-ui-react"
+import { Container, Message } from "semantic-ui-react"
 import { Provider, Subscribe } from "unstated"
 
 import Home from "./pages/Home"
@@ -16,6 +16,7 @@ import SiteHeader from "./components/SiteHeader"
 import MenuBar from "./components/MenuBar"
 import PrivateRoute from "./components/PrivateRoute"
 import Store from "./Store"
+import { customerSelfServiceBackend, policyManagementBackend, customerManagementBackend } from "./config"
 
 const store = new Store()
 
@@ -181,6 +182,21 @@ export default class App extends React.Component<{}> {
                       />
                     )}
                   />
+                  <Message style={{ color: "#BBB" }} size="mini">
+                    <Message.Header>
+                      Environment Variable Debug Information
+                    </Message.Header>
+                    <p>
+                      REACT_APP_CUSTOMER_SELF_SERVICE_BACKEND:{" "}
+                      {customerSelfServiceBackend}
+                      <br />
+                      REACT_APP_POLICY_MANAGEMENT_BACKEND:{" "}
+                      {policyManagementBackend}
+                      <br />
+                      REACT_APP_CUSTOMER_MANAGEMENT_BACKEND:{" "}
+                      {customerManagementBackend}
+                    </p>
+                  </Message>
                 </Container>
               </BrowserRouter>
             )

customer-self-service-frontend/package.json

@@ -4,13 +4,19 @@
 # run in production mode, so there won't be any live-reloading of changes
 # or other development features. For development, we recommend to start
 # the applications invidually or use the run_all_applications scripts.
-##
+#
 # To build the Docker images:
 #   docker-compose build
 #
 # To run the applications:
 #   docker-compose up
 #
+# Note that you might have to adjust the REACT_APP_ and VUE_APP environment
+# variables pointing to the backend services, depending on your hosting
+# environment. By default, they point to localhost, which is fine when running 
+# the services locally. In a cloud deployment, these should be changed to the 
+# public domainname of the respective backend service.
+# 
 # To shut down the applications, simply terminate the previous command.
 #
 
@@ -46,6 +52,9 @@ services:
     image: lakesidemutual/customer-management-frontend
     depends_on:
       - customer-management-backend
+    environment:
+      - "REACT_APP_CUSTOMER_SELF_SERVICE_BACKEND=http://localhost:8080"
+      - "REACT_APP_CUSTOMER_MANAGEMENT_BACKEND=http://localhost:8100"
     ports:
       - "3020:80"
 
@@ -67,6 +76,8 @@ services:
     image: lakesidemutual/policy-management-frontend
     depends_on:
       - policy-management-backend
+    environment:
+      - "REACT_APP_POLICY_MANAGEMENT_BACKEND=http://localhost:8090"
     ports:
       - "3010:80"
 
@@ -90,6 +101,10 @@ services:
       - customer-self-service-backend
       - customer-management-backend
       - policy-management-backend
+    environment:
+      - "REACT_APP_CUSTOMER_SELF_SERVICE_BACKEND=http://localhost:8080"
+      - "REACT_APP_POLICY_MANAGEMENT_BACKEND=http://localhost:8090"
+      - "REACT_APP_CUSTOMER_MANAGEMENT_BACKEND=http://localhost:8100"
     ports:
       - "3000:80"
 

customer-self-service-frontend/src/App.js

@@ -8,10 +8,10 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
-    "vue": "^2.6.14",
     "moment": "^2.29.4",
-    "semantic-ui-vue": "^0.11.0",
     "semantic-ui-css": "^2.5.0",
+    "semantic-ui-vue": "^0.11.0",
+    "vue": "^2.6.14",
     "vue-router": "^3.5.3"
   },
   "devDependencies": {
@@ -48,4 +48,4 @@
     "last 2 versions",
     "not ie <= 8"
   ]
-}
+}

docker-compose.yml

@@ -13,9 +13,12 @@
     <sui-segment>
       <router-view />
     </sui-segment>
-    <p style="color: #0000">
-      VUE_APP_POLICY_MANAGEMENT_BACKEND: {{ policyManagementBackend }}
-    </p>
+    <sui-message style="color: #BBB" class="mini">
+      <sui-message-header>Environment Variable Debug Information</sui-message-header>
+      <p>
+        VUE_APP_POLICY_MANAGEMENT_BACKEND: {{ policyManagementBackend }}
+      </p>
+    </sui-message>
   </div>
 </template>
 

policy-management-frontend/package-lock.json

@@ -1,4 +1,4 @@
-FROM node:18
+FROM node:16
 WORKDIR /usr/src/app
 COPY package.json ./
 COPY package-lock.json ./