Move runtime config to separate file (#16)

.devcontainer/dev_install

@@ -3,8 +3,8 @@
 
 cd /workspace
 
-corepack prepare pnpm@9.12.3 --activate
-echo "Updating npm..."
+corepack prepare pnpm@9.13.2 --activate
+echo "Updating pnpm..."
 npm install -g pnpm
 
 echo "Install static web server..."

.gitignore

@@ -12,6 +12,9 @@
 npm-debug.log
 yarn-error.log
 
+# Runtime config
+public/config.js
+
 # Environment files
 **/*.env
 

Dockerfile

@@ -4,14 +4,18 @@ RUN apk upgrade --no-cache --available
 
 # BUILDER: a container to build the service dist directory
 FROM base AS builder
-WORKDIR /service
-COPY package.json package-lock.json ./
-RUN npm install
-COPY . .
-RUN npm run build
+# install pnpm
+RUN corepack prepare pnpm@9.13.2 --activate
+RUN npm install -g pnpm
 # install static web server
 RUN apk add curl sudo which
 RUN curl --proto '=https' --tlsv1.2 -sSfL https://get.static-web-server.net | sed "s/cp -ax/cp -a/g" | sh
+# build the service
+WORKDIR /service
+COPY package.json pnpm-lock.yaml ./
+RUN pnpm install
+COPY . .
+RUN npm run build
 
 # RUNNER: a container to run the service
 FROM base AS runner
@@ -22,16 +26,17 @@ USER appuser
 COPY --from=builder /service/dist/data-portal/browser ./dist
 # install static web server
 COPY --from=builder /usr/local/bin/static-web-server /usr/local/bin
-# make the index file writeable
+# make the config file writeable to the appuser
 USER root
-RUN chown appuser ./dist/index.html
+RUN touch ./dist/config.js
+RUN chown appuser ./dist/config.js
 USER appuser
 # install run script
-COPY ./run.js .
+COPY ./run.js ./run.mjs
 # install dependencies for run script
 RUN npm install js-yaml
 # install default configuration file
 COPY ./data-portal.default.yaml .
 
 ENTRYPOINT ["node"]
-CMD ["/home/appuser/run.js"]
+CMD ["/home/appuser/run.mjs"]

run.js

@@ -77,31 +77,22 @@ function getBrowserDir(distDir) {
 }
 
 /**
- * Inject the settings into the index file in the appropriate output directory.
+ * Write the settings into the config file in the appropriate output directory.
  *
  * @param {Object} settings - The configuration settings to write.
- * @throws {Error} If the output directory or the index file does not exist.
+ * @throws {Error} If the output directory does not exist.
  */
 function writeSettings(settings) {
-  let outputDir = DEV_MODE ? 'src' : getBrowserDir('dist');
+  const outputDir = DEV_MODE ? 'public' : getBrowserDir('dist');
 
   // Ensure the output directory exists
   if (!fs.existsSync(outputDir)) {
     throw new Error(`Output directory not found: ${outputDir}`);
   }
 
-  // Ensure the index file exists
-  const indexPath = path.join(outputDir, 'index.html');
-  if (!fs.existsSync(indexPath)) {
-    throw new Error(`Index file not found: ${indexPath}`);
-  }
-
-  // Inject the configuration settings into the index file
+  const configPath = path.join(outputDir, 'config.js');
   const configScript = `window.config = ${JSON.stringify(settings)}`;
-  const indexFile = fs
-    .readFileSync(indexPath, 'utf8')
-    .replace(/window\.config = {[^}]*}/, configScript);
-  fs.writeFileSync(indexPath, indexFile, 'utf8');
+  fs.writeFileSync(configPath, configScript, 'utf8');
 }
 
 /**
@@ -142,7 +133,7 @@ function addHostEntry(name, ip) {
 /**
  * Run the development server on the specified host and port.
  */
-function runDevServer(host, port, logLevel, baseUrl, basicAuth, ssl, sslCert, sslKey) {
+function runDevServer(host, port, ssl, sslCert, sslKey, logLevel, baseUrl, basicAuth) {
   console.log('Running the development server...');
 
   if (baseUrl === `http://${host}:${port}`) {
@@ -194,7 +185,7 @@ function runDevServer(host, port, logLevel, baseUrl, basicAuth, ssl, sslCert, ss
  * It is assumed that the application has already been built
  * and that the "serve" package is installed globally.
  */
-function runProdServer(host, port, logLevel) {
+function runProdServer(host, port, ssl, sslCert, sslKey, logLevel) {
   console.log('Running the production server...');
 
   const distDir = getBrowserDir(path.join(__dirname, 'dist'));
@@ -238,14 +229,14 @@ function main() {
   console.log('Runtime settings =', settings);
 
   const {
-    base_url: baseUrl,
-    basic_auth: basicAuth,
     host,
     port,
-    log_level: logLevel,
     ssl,
     ssl_cert,
     ssl_key,
+    log_level: logLevel,
+    base_url: baseUrl,
+    basic_auth: basicAuth,
   } = settings;
 
   if (!host || !port) {
@@ -270,12 +261,12 @@ function main() {
   (DEV_MODE ? runDevServer : runProdServer)(
     host,
     port,
-    logLevel,
-    baseUrl,
-    basicAuth,
     ssl,
     ssl_cert,
     ssl_key,
+    logLevel,
+    baseUrl,
+    basicAuth,
   );
 }
 

src/app/app.component.ts

@@ -1,8 +1,7 @@
-import { Component, inject } from '@angular/core';
+import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { SiteFooterComponent } from '@app/portal/features/site-footer/site-footer.component';
 import { SiteHeaderComponent } from '@app/portal/features/site-header/site-header.component';
-import { ConfigService } from '@app/shared/services/config.service';
 
 /**
  * This is the root component of the application.
@@ -12,10 +11,4 @@ import { ConfigService } from '@app/shared/services/config.service';
   imports: [RouterOutlet, SiteHeaderComponent, SiteFooterComponent],
   templateUrl: './app.component.html',
 })
-export class AppComponent {
-  title = 'data-portal';
-
-  #config = inject(ConfigService);
-
-  massUrl = this.#config.massUrl; // just to show that we can access the config service
-}
+export class AppComponent {}

src/app/portal/features/home-page/home-page.component.html

@@ -15,3 +15,7 @@
   Infrastructure initiative (NFDI) and by the contributing institutions.<br />More at
   www.ghga.de.
 </p>
+<p>
+  Just to show that we can access the config, this is the MASS URL:
+  <code>{{ massUrl }}</code>
+</p>

src/app/portal/features/home-page/home-page.component.ts

@@ -1,4 +1,5 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
+import { ConfigService } from '@app/shared/services/config.service';
 
 /**
  * This is the home page component
@@ -8,4 +9,8 @@ import { Component } from '@angular/core';
   imports: [],
   templateUrl: './home-page.component.html',
 })
-export class HomePageComponent {}
+export class HomePageComponent {
+  #config = inject(ConfigService);
+
+  massUrl = this.#config.massUrl; // just to show that we can access the config service
+}

src/index.html

@@ -6,9 +6,7 @@
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
-    <script>
-      window.config = {"base_url":"http://127.0.0.1:8080","mass_url":"/api/mass","metldata_url":"/api/metldata"};
-    </script>
+    <script src="config.js" defer></script>
   </head>
 
   <body class="mat-typography">