Merge pull request #24 from mcode/intermediary-env-vars

intermediary vars

.env

@@ -10,8 +10,13 @@ USE_HTTPS = false
 WHITELIST = http://localhost, http://localhost:3005
 VITE_REALM = ClientFhirServer
 VITE_AUTH = http://localhost:8180
+FRONTEND_VITE_AUTH = http://localhost:8180
 VITE_USER = alice
 VITE_PASSWORD = alice
 VITE_CLIENT = app-login
+VITE_SCOPE_ID = intermediary
 REMS_ADMIN_HOOK_PATH=http://localhost:8090/cds-services/rems-
 REMS_ADMIN_FHIR_PATH=http://localhost:8090/4_0_0
+FRONTEND_PORT = 9080
+BACKEND_API_BASE = http://localhost:3003
+EHR_URL = http://localhost:8080/test-ehr/r4

Dockerfile

@@ -3,7 +3,12 @@ WORKDIR /rems-intermediary
 COPY --chown=node:node . .
 
 RUN npm install
+WORKDIR /rems-intermediary/frontend
+RUN npm install 
 
-HEALTHCHECK --interval=30s --start-period=15s --timeout=10m --retries=10 CMD wget --no-verbose --tries=1 --spider http://localhost:3003 || exit 1
+WORKDIR /rems-intermediary
+
+HEALTHCHECK --interval=45s --start-period=45s --timeout=10m --retries=10 CMD (wget --no-verbose --tries=1 --spider http://localhost:3003 && wget --no-verbose --tries=1 --spider http://localhost:9080) || exit 1
 EXPOSE 3003
-CMD npm start
+EXPOSE 9080
+CMD ./dockerRunnerProd.sh

Dockerfile.dev

@@ -3,7 +3,13 @@ WORKDIR /rems-intermediary
 COPY --chown=node:node . .
 
 RUN npm install
+WORKDIR /rems-intermediary/frontend
+RUN npm install 
 
-HEALTHCHECK --interval=30s --start-period=15s --timeout=10m --retries=10 CMD wget --no-verbose --tries=1 --spider http://localhost:3003 || exit 1
+WORKDIR /rems-intermediary
+
+
+HEALTHCHECK --interval=45s --start-period=45s --timeout=10m --retries=10 CMD (wget --no-verbose --tries=1 --spider http://localhost:3003 && wget --no-verbose --tries=1 --spider http://localhost:9080) || exit 1
 EXPOSE 3003
+EXPOSE 9080
 CMD ./dockerRunnerDev.sh

README.md

@@ -42,7 +42,7 @@ Next, start the frontend with the following:
 
 ### `npm start`
 
-Go to the UI running on http://localhost:5173/ (or whichever port it was run on)
+Go to the UI running on http://localhost:9080/ (or whichever port it was run on)
 
 Still need to update docker to start the UI automatically. 
 
@@ -116,3 +116,6 @@ Following are a list of modifiable paths:
 | VITE_CLIENT     | `app-login`                                        | Client used for connecting to keycloak authentication server.                                         |
 | REMS_ADMIN_HOOK_PATH | `http://localhost:8090/cds-services/rems-`    | REMS Administrator default base path for CDS Hooks.   |
 | REMS_ADMIN_FHIR_PATH   |  `http://localhost:8090/4_0_0`   | REMS Administrator default base path for the FHIR Server   |
+| FRONTEND_PORT            | `9080`                                             | Port that the frontend  server should run on, change if there are conflicts with port usage.                   |
+| BACKEND_API_BASE            | `http://localhost:3003`                                             | Base URL for the backend server of the intermediary                   |
+| EHR_URL           | `http://localhost:8080/test-ehr/r4`                                            | URL for the EHR System                  |

dockerRunnerDev.sh

@@ -1,44 +1,71 @@
 #!/bin/sh
 
 # Handle closing application on signal interrupt (ctrl + c)
-trap 'kill $CONTINUOUS_INSTALL_PID $SERVER_PID; gradle --stop; exit' INT
+trap 'kill $CONTINUOUS_INSTALL_PID $SERVER_PID $BACKEND_SERVER_PID; exit' INT
 
 mkdir logs 
+touch ./logs/frontend_installer.log
+touch ./logs/frontend_runner.log
+touch ./logs/backend_installer.log
+touch ./logs/backend_runner.log
+
 # Reset log file content for new application boot
-echo "*** Logs for continuous installer ***" > ./logs/installer.log
-echo "*** Logs for 'npm run start' ***" > ./logs/runner.log
+echo "*** Logs for continuous frontend installer ***" > ./logs/frontend_installer.log
+echo "*** Logs for frontend 'npm run start' ***" > ./logs/frontend_runner.log
+
+echo "*** Logs for continuous backend installer ***" > ./logs/backend_installer.log
+echo "*** Logs for backend 'npm run start' ***" > ./logs/backend_runner.log
 
 # Print that the application is starting in watch mode
 echo "starting application in watch mode..."
 
 # Start the continious build listener process
-echo "starting continuous installer..."
-npm install
+echo "starting continuous installers..."
+
+cd frontend
+npm install | tee ./logs/frontend_installer.log
+cd ..
+npm install | tee ./logs/backend_installer.log
 
-( package_modify_time=$(stat -c %Y package.json)
-package_lock_modify_time=$(stat -c %Y package-lock.json)
+( package_modify_time=$(stat -c %Y frontend/package.json)
+package_lock_modify_time=$(stat -c %Y frontend/package-lock.json)
+backend_modify_time=$(stat -c %Y package.json)
+backend_lock_modify_time=$(stat -c %Y package-lock.json)
 while sleep 1
 do
-    new_package_modify_time=$(stat -c %Y package.json)
-    new_package_lock_modify_time=$(stat -c %Y package-lock.json)    
+    new_package_modify_time=$(stat -c %Y frontend/package.json)
+    new_package_lock_modify_time=$(stat -c %Y frontend/package-lock.json)
+    new_backend_modify_time=$(stat -c %Y package.json)
+    new_backend_lock_modify_time=$(stat -c %Y package-lock.json)
 
-    if [[ "$package_modify_time" != "$new_package_modify_time" ]] || [[ "$package_lock_modify_time" != "$new_package_lock_modify_time" ]]
+    if [[ "$package_modify_time" != "$new_package_modify_time" ]] || [[ "$package_lock_modify_time" != "$new_package_lock_modify_time" ]] || [[ "$backend_lock_modify_time" != "$new_backend_lock_modify_time" ]]|| [[ "$backend_modify_time" != "$new_backend_modify_time" ]]
     then
-        echo "running npm install..."
-        npm install | tee ./logs/installer.log
+        echo "running frontent npm install..."
+        cd frontend
+        npm install | tee ./logs/frontend_installer.log
+        cd ..
+    elif [[ "$backend_lock_modify_time" != "$new_backend_lock_modify_time" ]]|| [[ "$backend_modify_time" != "$new_backend_modify_time" ]]
+    then
+        echo "running backend npm install..."
+        npm install | tee ./logs/backend_installer.log
     fi
 
     package_modify_time=$new_package_modify_time
     package_lock_modify_time=$new_package_lock_modify_time
+    backend_modify_time=$new_backend_modify_time
+    backend_lock_modify_time=$new_backend_lock_modify_time
 
 done )  & CONTINUOUS_INSTALL_PID=$!
 
 # Start server process once initial build finishes  
-( npm start | tee ./logs/runner.log ) & SERVER_PID=$!
+cd frontend
+( npm run start | tee ./logs/frontend_runner.log ) & SERVER_PID=$!
+
+cd ..
+( npm run start | tee ./logs/backend_runner.log ) & BACKEND_SERVER_PID=$!
 
 # Handle application background process exiting
-wait $CONTINUOUS_INSTALL_PID $SERVER_PID
+wait $CONTINUOUS_INSTALL_PID $SERVER_PID $BACKEND_SERVER_PID
 EXIT_CODE=$?
 echo "application exited with exit code $EXIT_CODE..."
 
-

dockerRunnerProd.sh

@@ -0,0 +1,12 @@
+#!/bin/sh
+
+cd frontend
+( npm run start ) & SERVER_PID=$!
+
+cd ..
+( npm run start ) & BACKEND_SERVER_PID=$!
+
+# Handle application background process exiting
+wait $SERVER_PID $BACKEND_SERVER_PID
+EXIT_CODE=$?
+echo "application exited with exit code $EXIT_CODE..."

frontend/package.json

@@ -15,11 +15,13 @@
     "@mui/icons-material": "^6.1.1",
     "@mui/material": "^6.1.1",
     "axios": "^1.7.7",
+    "dotenv": "^16.4.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",
+    "@types/node": "^22.7.5",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",

frontend/src/views/Connections.tsx

@@ -25,7 +25,7 @@ const Connections = () => {
       }, []);
 
     const getExistingConnections = async () => {
-    const url = 'http://localhost:3003/api/connections';
+    const url = process.env.BACKEND_API_BASE + '/api/connections';
     await axios
         .get(url)
         .then(function (response: { data }) {

frontend/src/views/DataViews/Connections.tsx

@@ -44,7 +44,7 @@ const Connections = () => {
       }, []);
 
     const getExistingConnections = async () => {
-        const url = 'http://localhost:3003/api/connections';
+        const url = process.env.BACKEND_API_BASE + '/api/connections';
         await axios
         .get(url)
         .then(function (response: { data: SetStateAction<Connection[]> }) {
@@ -58,7 +58,7 @@ const Connections = () => {
     };
 
     const deleteConnection = async (event: any, row: Connection) => {
-        const url = `http://localhost:3003/api/connections/${row._id}`;
+        const url = process.env.BACKEND_API_BASE + `/api/connections/${row._id}`;
         await axios
         .delete(url)
         .then(async function (response: any) {

frontend/src/views/DataViews/EditPopup.tsx

@@ -23,7 +23,7 @@ const EditPopup = (props) => {
     }, [data])
 
     const saveConnection = async () => {
-        const url = `http://localhost:3003/api/connections/${updatedConnection._id}`;
+        const url = process.env.BACKEND_API_BASE + `/api/connections/${updatedConnection._id}`;
         await axios
         .put(url, updatedConnection)
         .then(async function (response: any) {
@@ -39,7 +39,7 @@ const EditPopup = (props) => {
 
     const createConnection = async () => {
         console.log('want to create connection -- > ', updatedConnection);
-        const url = 'http://localhost:3003/api/connections';
+        const url = process.env.BACKEND_API_BASE + '/api/connections';
         await axios
         .post(url, updatedConnection)
         .then(function (response: { status: any }) {

frontend/src/views/Login.tsx

@@ -2,7 +2,6 @@ import { SetStateAction, useState } from 'react';
 import axios from 'axios';
 import { Avatar, Box, Button, Container, CssBaseline, TextField, Typography } from '@mui/material';
 import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
-import config from '../config.json';
 
 const Login = props => {
   const [showMessage, setShowMessage] = useState(false);
@@ -20,9 +19,9 @@ const Login = props => {
       params.append('username', user);
       params.append('password', pass);
       params.append('grant_type', 'password');
-      params.append('client_id', config.client);
+      params.append('client_id', process.env.VITE_CLIENT!);
       axios
-        .post(`${config.auth}/realms/${config.realm}/protocol/openid-connect/token`, params, {
+        .post(`${process.env.FRONTEND_VITE_AUTH}/realms/${process.env.VITE_REALM}/protocol/openid-connect/token`, params, {
           withCredentials: true
         })
         .then(

frontend/vite.config.ts

@@ -1,7 +1,19 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
 
-// https://vitejs.dev/config/
+import dotenv from 'dotenv';
+
+dotenv.config({path : '../.env'}); // load env vars from .env
 export default defineConfig({
+  // depending on your application, base can also be "/"
+  base: '',
   plugins: [react()],
-})
+  define: {
+    'process.env': process.env
+  },
+  server: {
+    port: parseInt(process.env.FRONTEND_PORT!),
+    open: false,
+    host: true
+  }
+});

package.json

@@ -12,7 +12,7 @@
   },
   "scripts": {
     "develop": "node dist/scripts/develop.js",
-    "start": "ts-node-dev --inspect=30031 src/scripts/serve.ts",
+    "start": "ts-node-dev --inspect=3004 src/scripts/serve.ts",
     "test": "mocha",
     "lint": "eslint \"**/*.{js,ts}\"",
     "lint:fix": "eslint \"**/*.{js,ts}\" --quiet --fix",
@@ -33,7 +33,7 @@
     "cookie-parser": "^1.4.6",
     "cors": "^2.8.5",
     "dotenv": "^16.3.1",
-    "env-var": "^7.3.1",
+    "env-var": "^7.5.0",
     "fhirclient": "^2.5.2",
     "fhirpath": "^3.2.0",
     "glob": "^10.2.1",