feat: add environment configuration and generation script for Contentstack

Author: timbenniks

.env.example

@@ -0,0 +1,8 @@
+# Contentstack Configuration
+# Copy this file to .env and fill in your actual values
+NG_APP_CONTENTSTACK_API_KEY=your_api_key_here
+NG_APP_CONTENTSTACK_DELIVERY_TOKEN=your_delivery_token_here
+NG_APP_CONTENTSTACK_PREVIEW_TOKEN=your_preview_token_here
+NG_APP_CONTENTSTACK_ENVIRONMENT=preview
+NG_APP_CONTENTSTACK_REGION=EU
+NG_APP_CONTENTSTACK_PREVIEW=true

.gitignore

@@ -5,4 +5,6 @@ node_modules/
 dist/
 .angular/
 .vscode/
-*.log
+*.log
+
+src/environments/

README.md

@@ -62,23 +62,29 @@ Go to Settings > Tokens and create a delivery token. Select the `preview` scope
 
 > In the case of Angular 18, check the settings in the environment and make sure the url is: `http://localhost:4200/` instead of `http://localhost:3000/`
 
-### Fill out your environment settings.
-
-Now that you have a delivery token, you can fill out the `./src/environments/environment.ts` file in your codebase.
-
-```js
-export const environment = {
-  production: false,
-  contentstack: {
-    apiKey: "<YOUR_API_KEY>",
-    deliveryToken: "<YOUR_DELIVERY_TOKEN>",
-    previewToken: "<YOUR_PREVIEW_TOKEN>",
-    environment: "preview",
-    region: "EU",
-    preview: true,
-  },
-};
-```
+### Configure your environment variables
+
+This project uses environment variables to keep API keys secure and out of version control.
+
+1. Copy the `.env.example` file to `.env`:
+
+   ```bash
+   cp .env.example .env
+   ```
+
+2. Fill out the `.env` file with your actual values:
+   ```env
+   NG_APP_CONTENTSTACK_API_KEY=<YOUR_API_KEY>
+   NG_APP_CONTENTSTACK_DELIVERY_TOKEN=<YOUR_DELIVERY_TOKEN>
+   NG_APP_CONTENTSTACK_PREVIEW_TOKEN=<YOUR_PREVIEW_TOKEN>
+   NG_APP_CONTENTSTACK_ENVIRONMENT=preview
+   NG_APP_CONTENTSTACK_REGION=EU
+   NG_APP_CONTENTSTACK_PREVIEW=true
+   ```
+
+The environment files (`src/environments/environment.ts` and `src/environments/environment.production.ts`) are automatically generated from your `.env` file when you run `npm start` or `npm run build`.
+
+> **Important:** Never commit the `.env` file to your repository. It's already included in `.gitignore` to prevent accidental commits of your API keys.
 
 ### Turn on Live Preview
 

generate-env.js

@@ -0,0 +1,58 @@
+#!/usr/bin/env node
+
+const fs = require("fs");
+const path = require("path");
+
+// Read .env file
+const envPath = path.join(__dirname, ".env");
+let envVars = {};
+
+if (fs.existsSync(envPath)) {
+  const envContent = fs.readFileSync(envPath, "utf8");
+  envContent.split("\n").forEach((line) => {
+    const [key, value] = line.split("=");
+    if (key && value) {
+      envVars[key.trim()] = value.trim();
+    }
+  });
+}
+
+// Generate environment.ts content
+const environmentContent = `export const environment = {
+  production: false,
+  contentstack: {
+    apiKey: '${envVars.NG_APP_CONTENTSTACK_API_KEY || ""}',
+    deliveryToken: '${envVars.NG_APP_CONTENTSTACK_DELIVERY_TOKEN || ""}',
+    previewToken: '${envVars.NG_APP_CONTENTSTACK_PREVIEW_TOKEN || ""}',
+    environment: '${envVars.NG_APP_CONTENTSTACK_ENVIRONMENT || "preview"}',
+    region: '${envVars.NG_APP_CONTENTSTACK_REGION || "EU"}',
+    preview: ${envVars.NG_APP_CONTENTSTACK_PREVIEW === "true"},
+  }
+};
+`;
+
+// Generate environment.production.ts content
+const environmentProdContent = `export const environment = {
+  production: true,
+  contentstack: {
+    apiKey: '${envVars.NG_APP_CONTENTSTACK_API_KEY || ""}',
+    deliveryToken: '${envVars.NG_APP_CONTENTSTACK_DELIVERY_TOKEN || ""}',
+    previewToken: '${envVars.NG_APP_CONTENTSTACK_PREVIEW_TOKEN || ""}',
+    environment: '${envVars.NG_APP_CONTENTSTACK_ENVIRONMENT || "preview"}',
+    region: '${envVars.NG_APP_CONTENTSTACK_REGION || "EU"}',
+    preview: ${envVars.NG_APP_CONTENTSTACK_PREVIEW === "true"},
+  }
+};
+`;
+
+// Write the files
+fs.writeFileSync(
+  path.join(__dirname, "src/environments/environment.ts"),
+  environmentContent
+);
+fs.writeFileSync(
+  path.join(__dirname, "src/environments/environment.production.ts"),
+  environmentProdContent
+);
+
+console.log("Environment files generated successfully!");

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "kickstart-angular",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "private": false,
   "repository": {
     "type": "git",
@@ -12,7 +12,9 @@
   "license": "MIT",
   "scripts": {
     "ng": "ng",
+    "prestart": "node generate-env.js",
     "start": "ng serve",
+    "prebuild": "node generate-env.js",
     "build": "ng build"
   },
   "dependencies": {
@@ -35,6 +37,7 @@
     "@angular/compiler-cli": "20.1.6",
     "@types/react": "^19.1.9",
     "autoprefixer": "10.4.21",
+    "dotenv": "^17.2.1",
     "postcss": "8.5.6",
     "typescript": "5.8.3"
   }

package.json

@@ -0,0 +1,14 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly NG_APP_CONTENTSTACK_API_KEY: string;
+  readonly NG_APP_CONTENTSTACK_DELIVERY_TOKEN: string;
+  readonly NG_APP_CONTENTSTACK_PREVIEW_TOKEN: string;
+  readonly NG_APP_CONTENTSTACK_ENVIRONMENT: string;
+  readonly NG_APP_CONTENTSTACK_REGION: string;
+  readonly NG_APP_CONTENTSTACK_PREVIEW: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}