Merge pull request #92 from bcgov/feature/vue3

JASPER-157: Vue 3 Migration

.dockerignore

@@ -0,0 +1,28 @@
+# Ignore dependencies
+**/node_modules
+bin
+obj
+dist
+build
+
+# Ignore logs and temporary files
+*.log
+*.tmp
+*.pid
+*.bak
+
+# Ignore IDE/editor files
+.vscode
+.idea
+*.suo
+*.user
+*.sln.docstates
+
+# Ignore OS files
+.DS_Store
+Thumbs.db
+__MACOSX
+
+# Ignore Git files
+.git
+.gitignore

.github/workflows/build-and-test-web.yml

@@ -18,7 +18,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [18.x]
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4

.github/workflows/publish-web.yml

@@ -26,7 +26,7 @@ jobs:
 
     strategy:
       matrix:
-        node-major-version: [12]
+        node-major-version: [18]
         node-minor-version: [x]
 
     steps:
@@ -79,7 +79,6 @@ jobs:
             NGINX_RUNTIME_SRC=../../docker/nginx-runtime
             VUE_ON_NGINX_SRC=../../docker/vue-on-nginx
             WEB_SRC=../../web
-            NPM_INSTALL_ARGS=--unsafe-perm
 
   deploy2dev:
     name: Deploy to DEV

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "singleQuote": true,
+  "semi": true,
+  "vueIndentScriptAndStyle": true,
+  "trailingComma": "es5",
+  "printWidth": 80,
+  "tabWidth": 2
+}

docker/docker-compose.yaml

@@ -22,9 +22,10 @@ services:
       - DEV_MODE=false
       - NODE_ENV=development
       - NPM_CONFIG_LOGLEVEL=notice
-      - NPM_RUN=serve
+      - VITE_PORT=1339
+      - CHOKIDAR_USEPOLLING=true
     ports:
-      - 8080:1339
+      - "8080:1339"
     volumes:
       - "${LOCAL_WORKSPACE_FOLDER-..}/web/src:/opt/app-root/src/src"
       - "${LOCAL_WORKSPACE_FOLDER-..}/web/package.json:/opt/app-root/src/package.json"

docker/manage

@@ -95,11 +95,10 @@ build-web() {
   docker build \
     -t "${COMPOSE_PROJECT_NAME}-web" \
     --build-arg IMAGE_PREFIX=${COMPOSE_PROJECT_NAME}- \
-    --build-arg NODE_VERSION=12 \
+    --build-arg NODE_VERSION=18 \
     --build-arg NGINX_RUNTIME_SRC='../docker/nginx-runtime' \
     --build-arg VUE_ON_NGINX_SRC='../docker/vue-on-nginx' \
     --build-arg WEB_SRC='./web' \
-    --build-arg NPM_INSTALL_ARGS='--unsafe-perm' \
     -f './web/Dockerfile.release' '..'
   echo -e "===================================================================================================="
 }
@@ -109,15 +108,14 @@ build-web-dev() {
   # web-dev
   #
   echo -e "\n\n===================================================================================================="
-  echo -e "Building the ${COMPOSE_PROJECT_NAME}-web-dev image using s2i ..."
+  echo -e "Building the ${COMPOSE_PROJECT_NAME}-web-dev image using Docker ..."
   echo -e "----------------------------------------------------------------------------------------------------"
-  ${S2I_EXE} build \
-    --copy \
-    -e "DEV_MODE=true" \
-    -e WEB_BASE_HREF=${WEB_BASE_HREF} \
-    '../web' \
-    'centos/nodejs-12-centos7' \
-    "${COMPOSE_PROJECT_NAME}-web-dev"
+  docker build \
+    -t "${COMPOSE_PROJECT_NAME}-web-dev" \
+    --build-arg NODE_VERSION=18 \
+    --build-arg VITE_PORT=1339 \
+    --build-arg WEB_SRC='./web' \
+    -f './web/Dockerfile.local' '..'
   echo -e "===================================================================================================="
 }
 

docker/vue-on-nginx/s2i/bin/fix-base-url

@@ -5,10 +5,11 @@
 # Perhaps webpack 5 will have some sort of fix for this. 
 echo "---> Replacing public path /S2I_INJECT_PUBLIC_PATH/ -> $WEB_BASE_HREF in Vue artifacts..."
 FILES="/tmp/app/dist/index.html
-/tmp/app/dist/js/*.*"
+/tmp/app/dist/assets/*.*"
 for f in $FILES
 do
-	tmp=$(sed "s|/S2I_INJECT_PUBLIC_PATH/|$WEB_BASE_HREF|g" "$f"); 
+	#tmp=$(sed "s|/S2I_INJECT_PUBLIC_PATH/|$WEB_BASE_HREF|g" "$f");
+	tmp=$(tr -d '\0' < "$f" | sed "s|/S2I_INJECT_PUBLIC_PATH/|$WEB_BASE_HREF|g")
 	printf "%s" "$tmp" > "$f";
 done
 

docker/web/Dockerfile.local

@@ -0,0 +1,24 @@
+ARG NODE_VERSION=18
+ARG VITE_PORT=1339
+ARG WEB_SRC=./web
+
+FROM registry.access.redhat.com/ubi9/nodejs-${NODE_VERSION} 
+ARG WEB_SRC
+ARG VITE_PORT
+
+WORKDIR /opt/app-root/src
+
+COPY ${WEB_SRC}/package*.json ./
+
+USER root
+
+RUN npm install
+
+COPY ${WEB_SRC} .
+
+ENV VITE_PORT=${VITE_PORT}
+
+EXPOSE ${VITE_PORT}
+
+# Run the development server
+CMD npm run dev

docker/web/Dockerfile.release

@@ -62,7 +62,7 @@ USER 104
 ###################################################################################
 # 2. Build web-artifacts
 ###################################################################################
-FROM quay.io/centos7/nodejs-${NODE_VERSION}-centos7:${NODE_VERSION} AS artifacts
+FROM registry.access.redhat.com/ubi9/nodejs-${NODE_VERSION} AS artifacts
 ARG NODE_VERSION
 ARG WEB_SRC
 ARG NPM_INSTALL_ARGS

web/public/index.html → web/index.html

@@ -1,17 +1,18 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head lang="en">
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>Supreme Court Viewer</title>
+    <link rel="icon" href="./favicon.ico">
+    <title>JASPER</title>
 </head>
 <body>
     <noscript>
         <strong>We're sorry but SCV.App doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
+    <script type="module" src="./src/main.ts"></script>
     <!-- built files will be auto injected -->
 </body>
 </html>