Add script to generate environment file

angular-app/.env.example

@@ -0,0 +1,2 @@
+SANITY_PROJECT_ID=""
+SANITY_DATASET=""

angular-app/.gitignore

@@ -42,3 +42,6 @@ testem.log
 Thumbs.db
 .vercel
 .angular
+
+environment.ts
+.env

angular-app/package.json

@@ -4,10 +4,11 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
-    "dev": "npm start",
-    "build": "ng build",
+    "dev": "npm run setEnvVars && npm start",
+    "build": "npm run setEnvVars && ng build",
     "watch": "ng build --watch --configuration development",
-    "test": "ng test"
+    "test": "ng test",
+    "setEnvVars": "node src/environments/setEnvVars.ts"
   },
   "dependencies": {
     "@angular/animations": "^16.0.1",
@@ -24,6 +25,7 @@
     "@portabletext/types": "^2.0.2",
     "@sanity/client": "^6.0.1",
     "@sanity/image-url": "^1.0.2",
+    "dotenv": "^16.4.7",
     "express": "^4.15.2",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",

angular-app/src/environments/setEnvVars.ts

@@ -0,0 +1,52 @@
+// This file generates the Angular environment.ts file with the required environment variables from the .env file.
+
+const setEnv = () => {
+  const fs = require("fs");
+  const writeFile = fs.writeFile;
+  // Configure Angular `environment.ts` file path
+  const targetPath = "./src/environments/environment.ts";
+  // Load node modules
+  require("dotenv").config({
+    path: "./.env",
+  });
+
+  if (!process.env["SANITY_PROJECT_ID"] || !process.env["SANITY_DATASET"]) {
+    console.error(
+      "Sanity project ID and dataset name are required. Go into 'app/src/environments/environment.ts' and set them."
+    );
+  }
+  // `environment.ts` file structure
+  const envConfigFile = `export const environment = {
+  production: false,
+  sanity: {
+    projectId: '${process.env["SANITY_PROJECT_ID"]}',
+    dataset: '${process.env["SANITY_DATASET"]}',
+    apiVersion: "2024-12-12",
+    useCdn: true, // set to false for fresh data
+  },
+};
+
+console.log("environment:", environment);
+`;
+  //   const envConfigFile = `export const environment = {
+  //   SANITY_PROJECT_ID: '${process.env["SANITY_PROJECT_ID"]}',
+  //   SANITY_DATASET: '${process.env["SANITY_DATASET"]}',
+  //   production: true,
+  // };
+  // `;
+  // console.log(
+  //   "The file `environment.ts` will be written with the following content: \n"
+  // );
+  writeFile(targetPath, envConfigFile, (err) => {
+    if (err) {
+      console.error(err);
+      throw err;
+    } else {
+      console.log(
+        `Angular environment.ts file generated correctly at ${targetPath} \n`
+      );
+    }
+  });
+};
+
+setEnv();

studio/.env.example

@@ -1,2 +1,3 @@
 SANITY_STUDIO_PROJECT_ID=""
 SANITY_STUDIO_DATASET=""
+SANITY_STUDIO_STUDIO_HOST="" #Optional

studio/sanity.cli.ts

@@ -1,9 +1,20 @@
+/**
+ * Sanity CLI Configuration
+ * This file configures the Sanity CLI tool with project-specific settings
+ * and customizes the Vite bundler configuration.
+ * Learn more: https://www.sanity.io/docs/cli
+ */
+
 import {defineCliConfig} from 'sanity/cli'
-import {projectId, dataset} from './sanity.config'
+
+const projectId = process.env.SANITY_STUDIO_PROJECT_ID || '<your project ID>'
+const dataset = process.env.SANITY_STUDIO_DATASET || 'production'
 
 export default defineCliConfig({
   api: {
     projectId,
     dataset,
   },
+  studioHost: process.env.SANITY_STUDIO_STUDIO_HOST || '', // Visit https://www.sanity.io/docs/environment-variables to leanr more about using environment variables for local & production.
+  autoUpdates: true,
 })