Merge pull request #340 from SynBioDex/frontend-build-fix

Frontend build fix

.github/workflows/azure-static-web-apps-victorious-flower-0ea52481e.yml

@@ -4,6 +4,10 @@ on:
   push:
     branches:
       - final
+      - frontend-build-fix
+    paths:
+      - '.github/**'
+      - 'SBOLCanvasFrontend/**'
   pull_request:
     types: [opened, synchronize, reopened, closed]
     branches:
@@ -19,8 +23,8 @@ jobs:
         with:
           submodules: true
           lfs: false
-      - name: Configure git
-        run: sudo git config --system --add safe.directory /github/workspace
+      - name: Write version file
+        run: cd SBOLCanvasFrontend && npm run gitversion -- ${{ github.sha }} ${{ github.head_ref }}
       - name: Build And Deploy
         id: builddeploy
         uses: Azure/static-web-apps-deploy@v1
@@ -31,8 +35,9 @@ jobs:
           ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
           # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
           app_location: "./SBOLCanvasFrontend" # App source code path
+          app_build_command: "npm run build -- --configuration split"
           api_location: "" # Api source code path - optional
-          output_location: "{angular.json#Object.values(data.projects)[0].architect.build.options.outputPath}" # Built app content directory - optional
+          output_location: "dist/browser" # Built app content directory - optional
           ###### End of Repository/Build Configurations ######
 
   close_pull_request_job:

Dockerfile

@@ -10,7 +10,7 @@ WORKDIR /opt/canvas/SBOLCanvasFrontend
 
 RUN npm install
 RUN npm run gitversion
-RUN npm run build
+RUN npm run build -- --configuration production --base-href=/canvas/
 # RUN npm run debug-build
 
 

SBOLCanvasFrontend/angular.json

@@ -74,6 +74,15 @@
                   "maximumError": "5mb"
                 }
               ]
+            },
+            "split": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.split.ts"
+                }
+              ],
+              "sourceMap": true
             }
           }
         },

SBOLCanvasFrontend/git.version.js

@@ -0,0 +1,31 @@
+const { writeFileSync } = require('fs');
+const { promisify } = require('util');
+const child = require('child_process');
+const exec = promisify(child.exec);
+
+async function createVersionsFile(filename) {
+  const revision = process.argv[2]
+    ?? (await exec('git rev-parse --short HEAD')).stdout.toString().trim();
+  const branch = process.argv[3]
+    ?? (await exec('git rev-parse --abbrev-ref HEAD')).stdout.toString().trim();
+  let version = process.env.npm_package_version
+    ?? (await exec('git tag --points-at HEAD')).stdout.toString().trim();
+
+  if (version == '') {
+    version = 'Latest';
+  }
+
+  console.log(`revision: '${revision}', branch: '${branch}', version: '${version}'`);
+
+  const content = `
+// this file is automatically generated by git.version.js script
+exports.versions = {
+  revision: '${revision}',
+  branch: '${branch}',
+  version: '${version}'
+};`;
+
+  writeFileSync(filename, content, { encoding: 'utf8' });
+}
+
+createVersionsFile('src/environments/versions.js');

SBOLCanvasFrontend/package.json

@@ -3,11 +3,11 @@
   "version": "0.0.0",
   "scripts": {
     "bundle-report": "ng build --configuration production --stats-json && webpack-bundle-analyzer dist/SBOLCanvasFrontend/stats.json",
-    "prebuild": "npm rebuild sass && ts-node -O \"{\\\"module\\\":\\\"commonjs\\\"}\" git.version.ts && node assetBundler.js",
-    "build": "ng build --configuration production --base-href=/canvas/",
+    "prebuild": "npm rebuild sass && node assetBundler.js",
+    "build": "ng build",
     "predev": "npm run prebuild",
     "dev": "ng serve -o",
-    "gitversion": "ts-node -O \"{\\\"module\\\":\\\"commonjs\\\"}\" git.version.ts",
+    "gitversion": "node git.version.js",
     "postinstall": "patch-package"
   },
   "private": true,

SBOLCanvasFrontend/src/environments/environment.prod.ts

@@ -1,5 +1,5 @@
 export const environment = {
     production: true,
-    backendURL: '/api',
+    backendURL: "/api",
     baseURI: "https://sbolcanvas.org"
 };

SBOLCanvasFrontend/src/environments/environment.split.ts

@@ -0,0 +1,5 @@
+export const environment = {
+    production: false,
+    backendURL: "https://sbolcanvas-api.victoriouswater-326a4bf8.westcentralus.azurecontainerapps.io/api",
+    baseURI: "https://sbolcanvas.org"
+};