Add configuration support and environment variables for Thunder Gate App

- Introduced .env.example for environment variable configuration.
- Updated README.md to include configuration instructions.
- Modified server.js to support dynamic PORT and HOST from environment variables.
- Added app.config.ts for application configuration using environment variables.
- Refactored imports in layout.tsx and content.tsx to use app.config.ts.

Author: brionmario

frontend/apps/gate/.env.example

@@ -0,0 +1,16 @@
+# Thunder Gate App Configuration
+# Copy this file to .env.local for local development
+# or set these environment variables in your deployment environment
+
+# Product name displayed in the UI
+NEXT_PUBLIC_PRODUCT_NAME=WSO2 Thunder
+
+# Thunder backend host (defaults to https://localhost:8090 if not set)
+NEXT_PUBLIC_THUNDER_HOST=https://localhost:8090
+
+# Backend API endpoints (will use THUNDER_HOST if not explicitly set)
+# NEXT_PUBLIC_FLOW_EXECUTION_ENDPOINT=https://localhost:8090/flow/execute
+# NEXT_PUBLIC_AUTHORIZATION_ENDPOINT=https://localhost:8090/oauth2/authorize
+
+# Run the server with HTTPS. Default's to true if not defined.
+ENABLE_HTTPS=true

frontend/apps/gate/README.md

@@ -1,6 +1,6 @@
 # Thunder - Gate App
 
-This is the gate app for project thunder. Which serves UIs for Login, Registration and Recovery. 
+This is the gate app for project thunder. Which serves UIs for Login, Registration and Recovery.
 
 ### ✅ Prerequisites
 
@@ -26,3 +26,24 @@ openssl req -x509 -newkey rsa:4096 -keyout server.key -out server.cert -days 365
 ```bash
 pnpm --filter gate dev
 ```
+
+### ⚙️ Step 4: Configuration
+
+The application supports environment variables for configuration that can be changed after build time.
+
+#### Environment Variables
+
+Copy `.env.example` to `.env.local` for local development:
+
+```bash
+cp .env.example .env.local
+```
+
+Available environment variables:
+
+- `NEXT_PUBLIC_PRODUCT_NAME`: Product name displayed in the UI (default: "WSO2 Thunder")
+- `NEXT_PUBLIC_THUNDER_HOST`: Thunder backend host URL (default: `https://localhost:8090`)
+- `NEXT_PUBLIC_FLOW_EXECUTION_ENDPOINT`: Backend flow execution API endpoint (defaults to `{THUNDER_HOST}/flow/execute`)
+- `NEXT_PUBLIC_AUTHORIZATION_ENDPOINT`: Backend authorization API endpoint (defaults to `{THUNDER_HOST}/oauth2/authorize`)
+
+**Note**: If you set `NEXT_PUBLIC_THUNDER_HOST`, you don't need to set the individual endpoint URLs unless you want to override them specifically.

frontend/apps/gate/server.js

@@ -19,6 +19,7 @@
 import fs from 'fs';
 import path from 'path';
 import https from 'https';
+import http from 'http';
 import { fileURLToPath, parse } from 'url';
 import next from 'next';
 
@@ -35,31 +36,50 @@ if (fs.existsSync(requiredServerFilesConfig)) {
   process.env.__NEXT_PRIVATE_STANDALONE_CONFIG = JSON.stringify(nextConfig);
 }
 
-const PORT = 9090;
-const HOST = 'localhost';
+const PORT = process.env.PORT || 9090;
+const HOST = process.env.HOST || 'localhost';
+const ENABLE_HTTPS = process.env.ENABLE_HTTPS !== 'false';
 const keyPath = path.resolve(__dirname, 'server.key');
 const certPath = path.resolve(__dirname, 'server.cert');
 const dev = process.env.NODE_ENV === 'development';
 const app = next({ dev: dev, dir: __dirname });
-const httpsOptions = {
-  key: fs.readFileSync(keyPath),
-  cert: fs.readFileSync(certPath),
-};
+
+// HTTPS options - only used if ENABLE_HTTPS is true
+let httpsOptions = null;
+if (ENABLE_HTTPS) {
+  try {
+    httpsOptions = {
+      key: fs.readFileSync(keyPath),
+      cert: fs.readFileSync(certPath),
+    };
+  } catch (error) {
+    console.error(`Failed to load SSL certificates: ${error.message}`);
+    console.error('Either provide valid certificates or set ENABLE_HTTPS=false');
+    process.exit(1);
+  }
+}
 
 const handle = app.getRequestHandler();
 
 function getTimestampWithOffset() {
   const now = new Date();
 
-  const pad = (n) => n.toString().padStart(2, '0');
+  const pad = n => n.toString().padStart(2, '0');
 
-  const isoDate = now.getFullYear() + '-' +
-                  pad(now.getMonth() + 1) + '-' +
-                  pad(now.getDate()) + 'T' +
-                  pad(now.getHours()) + ':' +
-                  pad(now.getMinutes()) + ':' +
-                  pad(now.getSeconds()) + '.' +
-                  now.getMilliseconds().toString().padStart(3, '0');
+  const isoDate =
+    now.getFullYear() +
+    '-' +
+    pad(now.getMonth() + 1) +
+    '-' +
+    pad(now.getDate()) +
+    'T' +
+    pad(now.getHours()) +
+    ':' +
+    pad(now.getMinutes()) +
+    ':' +
+    pad(now.getSeconds()) +
+    '.' +
+    now.getMilliseconds().toString().padStart(3, '0');
 
   const offsetMin = now.getTimezoneOffset();
   const offsetSign = offsetMin <= 0 ? '+' : '-';
@@ -70,16 +90,28 @@ function getTimestampWithOffset() {
   return `${isoDate}${tzOffset}`;
 }
 
-console.log(`Starting WSO2 Thunder gate app in ${dev ? 'development' : 'production'} mode...`);
+console.log(
+  `Starting WSO2 Thunder gate app in ${dev ? 'development' : 'production'} mode with ${ENABLE_HTTPS ? 'HTTPS' : 'HTTP'}...`,
+);
 
 app.prepare().then(() => {
-  https.createServer(httpsOptions, (req, res) => {
+  const requestHandler = (req, res) => {
     const parsedUrl = parse(req.url, true);
     handle(req, res, parsedUrl);
-  }).listen(PORT, () => {
+  };
+
+  let server;
+  if (ENABLE_HTTPS && httpsOptions) {
+    server = https.createServer(httpsOptions, requestHandler);
+  } else {
+    server = http.createServer(requestHandler);
+  }
+
+  server.listen(PORT, HOST, () => {
     const isoWithOffset = getTimestampWithOffset();
+    const protocol = ENABLE_HTTPS ? 'https' : 'http';
     console.log(
-      `time=${isoWithOffset} level=INFO msg="WSO2 Thunder gate app started..." address=${HOST}:${PORT}`
+      `time=${isoWithOffset} level=INFO msg="WSO2 Thunder gate app started..." address=${protocol}://${HOST}:${PORT}`,
     );
   });
 });

frontend/apps/gate/src/app/layout.tsx

@@ -21,7 +21,7 @@ import ThemeToggle from '@oxygen-ui/react/src/components/ThemeToggle/ThemeToggle
 import Grid from '@oxygen-ui/react/src/components/Grid/Grid';
 import Paper from '@oxygen-ui/react/src/components/Paper/Paper';
 import Typography from '@oxygen-ui/react/src/components/Typography/Typography';
-import AppConfig from '@/configs/app.json';
+import AppConfig from '@/configs/app.config';
 import BaseLayout from '@/layouts/base';
 import SideImage from '@/images/layout-image';
 import type { Metadata } from 'next';

frontend/apps/gate/src/app/login/content.tsx

@@ -26,7 +26,7 @@ import InputLabel from '@oxygen-ui/react/src/components/InputLabel/InputLabel';
 import Typography from '@oxygen-ui/react/src/components/Typography/Typography';
 import React, { useState, useEffect, ReactElement } from 'react';
 import axios from 'axios';
-import AppConfig from '@/configs/app.json';
+import AppConfig from '@/configs/app.config';
 
 interface LoginInput {
   name: string;

frontend/apps/gate/src/configs/app.config.ts

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import AppConfigDefaults from './app.json';
+
+interface AppConfig {
+  productName: string;
+  flowExecutionEndpoint: string;
+  authorizationEndpoint: string;
+}
+
+/**
+ * Application configuration that uses environment variables with fallbacks to JSON defaults.
+ * Environment variables take precedence over JSON values when available.
+ */
+const getThunderHost = (): string => {
+  return process.env.NEXT_PUBLIC_THUNDER_HOST || 'https://localhost:8090';
+};
+
+export const AppConfig: AppConfig = {
+  productName: process.env.NEXT_PUBLIC_PRODUCT_NAME || AppConfigDefaults.productName,
+  flowExecutionEndpoint: process.env.NEXT_PUBLIC_FLOW_EXECUTION_ENDPOINT || `${getThunderHost()}/flow/execute`,
+  authorizationEndpoint: process.env.NEXT_PUBLIC_AUTHORIZATION_ENDPOINT || `${getThunderHost()}/oauth2/authorize`,
+};
+
+export default AppConfig;