Add local option to frontend

Dockerfile

@@ -40,13 +40,14 @@ RUN pnpm install
 # Copy code
 COPY . .
 
-ARG PROJECT_NAME hearing
+ARG PROJECT_NAME=hearing
+ARG BUILD_ENV=production
 # For some reason we need to build types first. Turbo should be able to figure this
 # Build everything, then build the frontend for the specific project
 RUN pnpm run build --filter types
 RUN pnpm run build --filter='!frontend'
 WORKDIR /app/apps/frontend
-RUN pnpm run build:${PROJECT_NAME}
+RUN pnpm run build:${PROJECT_NAME} --env $BUILD_ENV
 
 # -----------------------------------------------
 # Runtime Image

apps/backend/src/middleware/responses.ts

@@ -7,6 +7,7 @@ const SRC_SELF = ["'self'", 'blob:', 'data:']
 // Describes cognito origins
 const SRC_COGNITO = [
     'https://cognito-idp.eu-north-1.amazonaws.com/',
+    'https://3dp4me-dev.auth.eu-north-1.amazoncognito.com/oauth2/token',
     'https://3dp4me-users.auth.eu-north-1.amazoncognito.com/oauth2/token',
     'https://3dp4me-prosthetic-users.auth.eu-north-1.amazoncognito.com/oauth2/token',
     'https://cognito-identity.eu-north-1.amazonaws.com/',

apps/frontend/development.hearing.env

@@ -0,0 +1,19 @@
+# This file was automatically generated by [Doppler](doppler.com)
+# Project Name: frontend
+# Project Description: 
+# Config Name: dev
+# Last Updated: Sat Jan 04 2025 16:19:54 GMT+0000 (GMT)
+# Link: https://dashboard.doppler.com/workplace/6feba8570cce3edf8a4b/projects/frontend/configs/dev
+
+
+DOPPLER_CONFIG="dev"
+DOPPLER_ENVIRONMENT="dev"
+DOPPLER_PROJECT="frontend"
+REACT_APP_BACKEND_BASE_URL="http://localhost:8080/api"
+REACT_APP_CALLBACK_URL="http://localhost:8080"
+REACT_APP_COGNITO_IDENTITY_POOL_ID="eu-north-1:a1c808b0-fb7e-43ea-9e1d-d92d407a5aaf"
+REACT_APP_COGNITO_REGION="eu-north-1"
+REACT_APP_COGNITO_USER_POOL_ID="eu-north-1_9y4klV5OF"
+REACT_APP_COGNITO_WEB_CLIENT_ID="2l6qlh6f8vv8tfelur0s0vkojo"
+REACT_APP_GOOGLE_MAPS_API_KEY="AIzaSyDMLKE536wFJnis6T_0p7xdkdzpcHyghBU"
+REACT_APP_OAUTH_DOMAIN="3dp4me-dev.auth.eu-north-1.amazoncognito.com"

apps/frontend/webpack.config.mjs

@@ -1,103 +1,112 @@
 import Dotenv from "dotenv-webpack";
-// const path = require("path")
-import path from "path";
-// import { Configuration } from "webpack";
 import CopyWebpackPlugin from "copy-webpack-plugin";
 import HtmlWebpackPlugin from "html-webpack-plugin";
-import nodeExternals from "webpack-node-externals"
 
-const config = {
-  mode: "production",
-  entry: "./src/index.tsx",
-  module: {
-    rules: [
-      {
-        test: /\.(js|jsx)$/,
-        exclude: /node_modules/,
-        use: {
-          loader: 'babel-loader',
-        }
-      },
+const config = (env) => {
+  let frontendUrl = 'http://localhost:8080';
+  if (env.production)
+    frontendUrl = `https://${process.env.PROJECT_NAME}.3dp4me-software.org/`
 
-      {
-        test: /\.s[ac]ss$/i,
-        use: [
-          // Creates `style` nodes from JS strings
-          "style-loader",
-          // Translates CSS into CommonJS
-          "css-loader",
-          // Compiles Sass to CSS
-          "sass-loader",
-        ],
-      },
+  let envPrefix = "development"
+  if (env.production)
+      envPrefix = "production"
 
-      {
-        test: /\.(gif|png|jpe?g|svg)$/i,
-        use: [
-          'file-loader',
-          {
-            loader: 'image-webpack-loader',
-            options: {
-              disable: true,
-            },
-          },
-        ],
-      },
-
-      { test: /\.([cm]?ts|tsx)$/, loader: "ts-loader", exclude: /node_modules/ },
+  const dotenvPath = `./${envPrefix}.${process.env.PROJECT_NAME}.env`
 
-      {
-        test: /\.css$/,
-        use: ["style-loader", "css-loader"],
-      },
+  return {
+    mode: "production",
+    entry: "./src/index.tsx",
+    module: {
+      rules: [
+        {
+          test: /\.(js|jsx)$/,
+          exclude: /node_modules/,
+          use: {
+            loader: 'babel-loader',
+          }
+        },
 
-      {
-        test: /\.m?js/,
-        resolve: {
-            fullySpecified: false
-        }
-      },
-    ],
-  },
-  resolve: {
-    extensions: [".tsx", ".ts", ".js"],
-    extensionAlias: {
-      ".js": [".js", ".ts"],
-      ".cjs": [".cjs", ".cts"],
-      ".mjs": [".mjs", ".mts"]
-    }
-  },
-  output: {
-    filename: "bundle.js",
-  },
-  plugins: [
-    new CopyWebpackPlugin({
-      patterns: [
         {
-          from: "public/3dp4me_logo.png",
+          test: /\.s[ac]ss$/i,
+          use: [
+            // Creates `style` nodes from JS strings
+            "style-loader",
+            // Translates CSS into CommonJS
+            "css-loader",
+            // Compiles Sass to CSS
+            "sass-loader",
+          ],
         },
+
         {
-          from: "public/favicon.ico",
+          test: /\.(gif|png|jpe?g|svg)$/i,
+          use: [
+            'file-loader',
+            {
+              loader: 'image-webpack-loader',
+              options: {
+                disable: true,
+              },
+            },
+          ],
         },
+
+        { test: /\.([cm]?ts|tsx)$/, loader: "ts-loader", exclude: /node_modules/ },
+
         {
-          from: "public/robots.txt",
+          test: /\.css$/,
+          use: ["style-loader", "css-loader"],
         },
+
         {
-          from: "public/manifest.json",
+          test: /\.m?js/,
+          resolve: {
+            fullySpecified: false
+          }
         },
       ],
-    }),
+    },
+    resolve: {
+      extensions: [".tsx", ".ts", ".js"],
+      extensionAlias: {
+        ".js": [".js", ".ts"],
+        ".cjs": [".cjs", ".cts"],
+        ".mjs": [".mjs", ".mts"]
+      }
+    },
+    output: {
+      filename: "bundle.js",
+    },
+    plugins: [
+      new CopyWebpackPlugin({
+        patterns: [
+          {
+            from: "public/3dp4me_logo.png",
+          },
+          {
+            from: "public/favicon.ico",
+          },
+          {
+            from: "public/robots.txt",
+          },
+          {
+            from: "public/manifest.json",
+          },
+        ],
+      }),
+
 
-    new HtmlWebpackPlugin({
-      template: "./public/index.html",
-      base: `https://${process.env.PROJECT_NAME}.3dp4me-software.org/`
-    }),
+      new HtmlWebpackPlugin({
+        template: "./public/index.html",
+        base: frontendUrl
+      }),
 
-    new Dotenv({
-      path: `./production.${process.env.PROJECT_NAME}.env`,
-      safe: true,
-    }),
-  ],
+      new Dotenv({
+        path: dotenvPath,
+        safe: true,
+      }),
+    ],
+  }
 };
 
 export default config;