build: add env files first draft

.env.example

@@ -0,0 +1,14 @@
+# Environment configuration example
+# Copy this file to .env and adjust values as needed
+
+# NODE_ENV - Set the Node environment (development, production, staging)
+NODE_ENV=development
+
+# PRODUCTION - Set to true for production builds
+PRODUCTION=false
+
+# STAGE - Set to true for staging builds
+STAGE=false
+
+# Additional environment variables can be added here
+# They will be accessible in the Angular app via process.env

.gitignore

@@ -1,5 +1,15 @@
 # See http://help.github.com/ignore-files/ for more about ignoring files.
 
+# environment files
+.env
+.env.production
+.env.stage
+.env.local
+.env.*.local
+
+# auto-generated environment file
+src/environments/environment.ts
+
 # compiled output
 /.tmp
 /dist

docs/ENV_SETUP.md

@@ -0,0 +1,62 @@
+# Environment Configuration
+
+Super Productivity now uses `.env` files for environment-specific configuration instead of Angular's traditional environment files.
+
+## Setup
+
+1. Copy `.env.example` to `.env` for local development:
+
+   ```bash
+   cp .env.example .env
+   ```
+
+2. Create environment-specific files as needed:
+   - `.env` - Default development environment
+   - `.env.production` - Production environment
+   - `.env.stage` - Staging environment
+
+## How it Works
+
+The build process automatically generates `src/environments/environment.ts` from the appropriate `.env` file using `tools/generate-env.js`.
+
+## Available Variables
+
+- `NODE_ENV` - Environment name (development, production, staging)
+- `PRODUCTION` - Set to "true" for production builds
+- `STAGE` - Set to "true" for staging builds
+
+## Usage
+
+### Development
+
+```bash
+npm run startFrontend
+```
+
+### Production
+
+```bash
+npm run startFrontend:prod
+# or
+npm run buildFrontend:prod:es6
+```
+
+### Staging
+
+```bash
+npm run startFrontend:stage
+# or
+npm run buildFrontend:stage:es6
+```
+
+## Adding New Environment Variables
+
+1. Add the variable to your `.env` files
+2. Update `tools/generate-env.js` to include the new variable in the generated environment
+3. Use the variable in your code via `environment.yourVariable`
+
+## Important Notes
+
+- The `src/environments/environment.ts` file is auto-generated and should not be edited directly
+- All `.env` files are gitignored for security
+- Always use `.env.example` as a template for required variables

package.json

@@ -32,12 +32,12 @@
     "buildAllElectron:noTests:prod": "npm run lint && npm run buildFrontend:prod:es6 && npm run electron:build",
     "buildAllElectron:prod": "npm run preCheck && npm run buildFrontend:prod:es6 && npm run electron:build",
     "buildAllElectron:stage": "npm run preCheck && npm run buildFrontend:stage:es6 && npm run electron:build",
-    "buildFrontend:prod:es6": "npm run prebuild && cross-env BROWSERSLIST_ENV='modern' ng build --configuration production && npm run removeWOFF1",
-    "buildFrontend:prod:watch": "npm run prebuild && ng build --configuration production --watch",
-    "buildFrontend:prodWeb": "npm run prebuild && ng build  --configuration productionWeb",
-    "buildFrontend:stage:es6": "npm run prebuild && cross-env BROWSERSLIST_ENV='modern' ng build --configuration stage && npm run removeWOFF1",
-    "buildFrontend:stageWeb": "npm run prebuild && ng build --configuration stageWeb",
-    "buildFrontend:stageWeb:unminified": "npm run prebuild && ng build --configuration stageWeb --optimization=false --aot=false",
+    "buildFrontend:prod:es6": "npm run prebuild && node tools/generate-env.js production && cross-env BROWSERSLIST_ENV='modern' ng build --configuration production && npm run removeWOFF1",
+    "buildFrontend:prod:watch": "npm run prebuild && node tools/generate-env.js production && ng build --configuration production --watch",
+    "buildFrontend:prodWeb": "npm run prebuild && node tools/generate-env.js production && ng build  --configuration productionWeb",
+    "buildFrontend:stage:es6": "npm run prebuild && node tools/generate-env.js stage && cross-env BROWSERSLIST_ENV='modern' ng build --configuration stage && npm run removeWOFF1",
+    "buildFrontend:stageWeb": "npm run prebuild && node tools/generate-env.js stage && ng build --configuration stageWeb",
+    "buildFrontend:stageWeb:unminified": "npm run prebuild && node tools/generate-env.js stage && ng build --configuration stageWeb --optimization=false --aot=false",
     "dist": "npm run buildAllElectron:prod && electron-builder",
     "dist:android": "npm run buildFrontend:stageWeb:unminified && npm run sync:android && npm run assemble:android:stage && echo 'Staging Android APK generated at android/app/build/outputs/apk/debug/'",
     "dist:android:prod": "npm run buildFrontend:prodWeb && npm run sync:android && npm run assemble:android:prod && echo 'Production Android APK generated at android/app/build/outputs/apk/release/'",
@@ -85,7 +85,9 @@
     "removeWOFF1": "node ./tools/remove-woff.js",
     "serveProd": "ng serve --configuration production",
     "start": "npm run electron:build && cross-env NODE_ENV=DEV electron .",
-    "startFrontend": "ng serve",
+    "startFrontend": "node tools/generate-env.js development && ng serve",
+    "startFrontend:prod": "node tools/generate-env.js production && ng serve --configuration production",
+    "startFrontend:stage": "node tools/generate-env.js stage && ng serve --configuration stage",
     "sync:android": "npx cap sync android",
     "stats": "ng build --configuration production --source-map --stats-json && npx esbuild-visualizer --metadata .tmp/angular-dist/stats.json && xdg-open stats.html",
     "test": "cross-env TZ='Europe/Berlin' ng test --watch=false && npm run test:tz:ci",
@@ -123,6 +125,7 @@
     "node-fetch": "^2.7.0"
   },
   "devDependencies": {
+    "@angular-builders/custom-webpack": "^19.0.1",
     "@angular-devkit/build-angular": "^19.2.11",
     "@angular-eslint/builder": "^19.3.0",
     "@angular-eslint/eslint-plugin": "^19.3.0",
@@ -153,6 +156,7 @@
     "@capawesome/capacitor-android-dark-mode-support": "^7.0.0",
     "@capawesome/capacitor-background-task": "^7.0.1",
     "@csstools/stylelint-formatter-github": "^1.0.0",
+    "@dotenv-run/cli": "^1.3.6",
     "@electron/notarize": "^3.0.1",
     "@fontsource/roboto": "^4.5.8",
     "@nextcloud/cdav-library": "^1.5.3",

src/environments/environment.ts

@@ -1,10 +0,0 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-import pkg from '../../package.json';
-
-export const environment = {
-  production: false,
-  stage: false,
-  version: pkg.version,
-};

tools/generate-env.js

@@ -0,0 +1,49 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+
+// Get environment name from command line or default to development
+const envName = process.argv[2] || 'development';
+
+// Map environment names to .env files
+const envFileMap = {
+  development: '.env',
+  production: '.env.production',
+  stage: '.env.stage',
+};
+
+// Load environment variables manually
+const envFile = envFileMap[envName] || '.env';
+const envPath = path.join(process.cwd(), envFile);
+const envContent = fs.readFileSync(envPath, 'utf8');
+const env = {};
+
+// Parse .env file
+envContent.split('\n').forEach((line) => {
+  line = line.trim();
+  if (line && !line.startsWith('#')) {
+    const [key, value] = line.split('=');
+    if (key && value) {
+      env[key.trim()] = value.trim();
+    }
+  }
+});
+
+// Generate environment.ts content
+const envTsContent = `// This file is auto-generated by tools/generate-env.js
+// Do not modify directly
+import pkg from '../../package.json';
+
+export const environment = {
+  production: ${env.PRODUCTION === 'true'},
+  stage: ${env.STAGE === 'true'},
+  version: pkg.version,
+};
+`;
+
+// Write to environment.ts
+const targetPath = path.join(__dirname, '../src/environments/environment.ts');
+fs.writeFileSync(targetPath, envTsContent);
+
+console.log(`✅ Generated environment.ts from ${envFile}`);

webpack.config.js

@@ -0,0 +1,16 @@
+const webpack = require('webpack');
+
+module.exports = (webpackConfig) => {
+  // The environment variables are already loaded by dotenv-run CLI
+  // We just need to pass them through DefinePlugin
+
+  webpackConfig.plugins.push(
+    new webpack.DefinePlugin({
+      'process.env.PRODUCTION': JSON.stringify(process.env.PRODUCTION),
+      'process.env.STAGE': JSON.stringify(process.env.STAGE),
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+    }),
+  );
+
+  return webpackConfig;
+};