Feature/Add environment variable injection feature in example-monorepos

example-monorepos/blank/.env.example

@@ -0,0 +1,5 @@
+# Please Create a .env.global file to hold your environmental variables
+# Example of environmental variables
+# The below environmental variables will resolve as EXPO_VAR_1, EXPO_VAR_2 in expo package and NEXT_PUBLIC_VAR_1, NEXT_PUBLIC_VAR_2 in the next.js package 
+VAR_1=env_variable_1
+VAR_2=env_variable_2

example-monorepos/blank/.gitignore

@@ -78,4 +78,13 @@ build/**
 !.yarn/plugins
 !.yarn/releases
 !.yarn/sdks
-!.yarn/versions
+!.yarn/versions
+
+# Ignore all .env files
+.env*
+
+# Except .env.example
+!.env.example
+
+# Ignore env.ts
+env.ts

example-monorepos/blank/apps/expo/babel.config.js

@@ -1,7 +1,24 @@
 module.exports = function (api) {
   api.cache(true)
+
+  // Get the current environment or default to 'development'
+  const APP_ENV = process.env.APP_ENV || 'development';
+
+  // Set the path based on the environment
+  const envPath = `.env.${APP_ENV}`;
+
   return {
     presets: [['babel-preset-expo', { jsxRuntime: 'automatic' }]],
-    plugins: ['react-native-reanimated/plugin'],
+    plugins: [
+      [
+        'module:react-native-dotenv',
+        {
+          envName: 'APP_ENV',
+          moduleName: '@env',
+          path: envPath
+        },
+      ],
+      'react-native-reanimated/plugin'
+    ],
   }
-}
+}

example-monorepos/blank/apps/expo/package.json

@@ -10,6 +10,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.74.5",
+    "react-native-dotenv": "^3.4.11",
     "react-native-gesture-handler": "~2.16.1",
     "react-native-reanimated": "~3.10.1",
     "react-native-safe-area-context": "4.10.5",
@@ -19,6 +20,7 @@
   "devDependencies": {
     "@babel/core": "^7.24.0",
     "@types/react": "~18.2.79",
+    "@types/react-native-dotenv": "^0.2.2",
     "typescript": "~5.3.3"
   },
   "scripts": {

example-monorepos/blank/generateEnv.js

@@ -0,0 +1,49 @@
+const fs = require('fs');
+const path = require('path');
+const dotenv = require('dotenv');
+
+function generateEnv(envPostfix){
+    // Load environment variables from .env.global
+    const globalEnvPath = path.resolve(__dirname, '.env.global');
+    const globalEnv = dotenv.parse(fs.readFileSync(globalEnvPath));
+
+    // Prepare prefixed environment variables
+    const expoEnv = {};
+    const nextEnv = {};
+
+    Object.keys(globalEnv).forEach(key => {
+      expoEnv[`EXPO_${key}`] = globalEnv[key];
+      nextEnv[`NEXT_PUBLIC_${key}`] = globalEnv[key];
+    });
+
+    // Convert to .env format
+    const formatEnv = (env) => Object.entries(env).map(([key, value]) => `${key}=${value}`).join('\n');
+
+    // Define paths for .env.local files
+    const expoEnvPath = path.resolve(__dirname, `apps/expo/.env${envPostfix?`.${envPostfix}`:""}`);
+    const nextEnvPath = path.resolve(__dirname, `apps/next/.env${envPostfix?`.${envPostfix}`:""}`);
+
+    // Write .env.local files
+    fs.writeFileSync(expoEnvPath, formatEnv(expoEnv));
+    fs.writeFileSync(nextEnvPath, formatEnv(nextEnv));
+
+    // Create environmental variables codebase used in packages/app with the name env.ts
+    let envDotTsMain = 'import { Platform } from "react-native";\n\n// ############# Please do not change code below this line ##############\n';
+    let envDotTsExport = "\nexport {\n";
+
+    Object.keys(globalEnv).forEach((key)=> {
+        envDotTsMain += `const ${key} = (Platform.OS !== 'web')?process.env.EXPO_${key}:process.env.NEXT_PUBLIC_${key};\n`
+        envDotTsExport += `\t${key},\n`;
+    });
+    envDotTsExport += `};`;
+    envDotTsMain += envDotTsExport;
+    // Define path for env.ts in packages/app
+    const envTsPath = path.resolve(__dirname, `packages/app/env.ts`);
+    fs.writeFileSync(envTsPath, envDotTsMain);
+
+
+    console.log('Environment variables have been set up for Expo and Next.js');
+}
+
+const envPostfix = process.env.APP_ENV || 'local';
+generateEnv(envPostfix);

example-monorepos/blank/package.json

@@ -12,8 +12,8 @@
     "typescript": "^5.2.2"
   },
   "scripts": {
-    "native": "cd apps/expo && yarn start",
-    "web": "cd apps/next && yarn next"
+    "native": "cd apps/expo && APP_ENV=local node ../../generateEnv.js && yarn start",
+    "web": "cd apps/next && APP_ENV=local node ../../generateEnv.js && yarn next"
   },
   "packageManager": "yarn@4.1.1"
 }

example-monorepos/blank/packages/app/features/home/screen.tsx

@@ -1,6 +1,7 @@
 import { Text, useSx, View, H1, P, Row, A } from 'dripsy'
 import { TextLink } from 'solito/link'
 import { MotiLink } from 'solito/moti'
+import { VAR_1, VAR_2 } from 'app/env'
 
 export function HomeScreen() {
   const sx = useSx()
@@ -16,6 +17,7 @@ export function HomeScreen() {
           screen to another. This screen uses the same code on Next.js and React
           Native.
         </P>
+        <P sx={{ textAlign: 'center' }}>ENVIRONMENTAL_VARIABLES DEMONSTRATION=VAR_1: {VAR_1}, VAR_2: {VAR_2}</P>
         <P sx={{ textAlign: 'center' }}>
           Solito is made by{' '}
           <A

example-monorepos/blank/yarn.lock

@@ -3309,6 +3309,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react-native-dotenv@npm:^0.2.2":
+  version: 0.2.2
+  resolution: "@types/react-native-dotenv@npm:0.2.2"
+  checksum: 10/a300037b84e7ae7db7f2609aa0893eccf596c5a78f6215b2733a8dfb7172277766a058f21a6852a223926763e6d3fc34da2a980d30ded585c555994db322a537
+  languageName: node
+  linkType: hard
+
 "@types/react@npm:^18.2.21":
   version: 18.2.21
   resolution: "@types/react@npm:18.2.21"
@@ -4945,7 +4952,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dotenv@npm:^16.4.4, dotenv@npm:~16.4.5":
+"dotenv@npm:^16.4.4, dotenv@npm:^16.4.5, dotenv@npm:~16.4.5":
   version: 16.4.5
   resolution: "dotenv@npm:16.4.5"
   checksum: 10/55a3134601115194ae0f924e54473459ed0d9fc340ae610b676e248cca45aa7c680d86365318ea964e6da4e2ea80c4514c1adab5adb43d6867fb57ff068f95c8
@@ -5566,6 +5573,7 @@ __metadata:
   dependencies:
     "@babel/core": "npm:^7.24.0"
     "@types/react": "npm:~18.2.79"
+    "@types/react-native-dotenv": "npm:^0.2.2"
     app: "npm:*"
     expo: "npm:^51.0.0"
     expo-image: "npm:~1.12.15"
@@ -5576,6 +5584,7 @@ __metadata:
     react: "npm:18.2.0"
     react-dom: "npm:18.2.0"
     react-native: "npm:0.74.5"
+    react-native-dotenv: "npm:^3.4.11"
     react-native-gesture-handler: "npm:~2.16.1"
     react-native-reanimated: "npm:~3.10.1"
     react-native-safe-area-context: "npm:4.10.5"
@@ -9579,6 +9588,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-dotenv@npm:^3.4.11":
+  version: 3.4.11
+  resolution: "react-native-dotenv@npm:3.4.11"
+  dependencies:
+    dotenv: "npm:^16.4.5"
+  peerDependencies:
+    "@babel/runtime": ^7.20.6
+  checksum: 10/09e8a7310fcb01ac021e71db9328e9d342d1e117bf68026b12de0392bfe17292ac6a071f03b88e7fb42c82a8f2fdf03bc520c7dedd2f80a1448cb3de5e03d4fb
+  languageName: node
+  linkType: hard
+
 "react-native-gesture-handler@npm:~2.16.1":
   version: 2.16.2
   resolution: "react-native-gesture-handler@npm:2.16.2"

example-monorepos/with-custom-font/.example.env

@@ -0,0 +1,5 @@
+# Please Create a .env.global file to hold your environmental variables
+# Example of environmental variables
+# The below environmental variables will resolve as EXPO_VAR_1, EXPO_VAR_2 in expo package and NEXT_PUBLIC_VAR_1, NEXT_PUBLIC_VAR_2 in the next.js package 
+VAR_1=env_variable_1
+VAR_2=env_variable_2

example-monorepos/with-custom-font/.gitignore

@@ -79,4 +79,13 @@ build/**
 !.yarn/plugins
 !.yarn/releases
 !.yarn/sdks
-!.yarn/versions
+!.yarn/versions
+
+# Ignore all .env files
+.env*
+
+# Except .env.example
+!.env.example
+
+# Ignore env.ts
+env.ts

example-monorepos/with-custom-font/apps/expo/babel.config.js

@@ -1,7 +1,24 @@
 module.exports = function (api) {
   api.cache(true)
+
+  // Get the current environment or default to 'development'
+  const APP_ENV = process.env.APP_ENV || 'development';
+
+  // Set the path based on the environment
+  const envPath = `.env.${APP_ENV}`;
+
   return {
     presets: [['babel-preset-expo', { jsxRuntime: 'automatic' }]],
-    plugins: ['react-native-reanimated/plugin'],
+    plugins: [
+      [
+        'module:react-native-dotenv',
+        {
+          envName: 'APP_ENV',
+          moduleName: '@env',
+          path: envPath
+        },
+      ],
+      'react-native-reanimated/plugin'
+    ],
   }
 }

example-monorepos/with-custom-font/apps/expo/package.json

@@ -10,6 +10,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.72.4",
+    "react-native-dotenv": "^3.4.11",
     "react-native-gesture-handler": "~2.12.0",
     "react-native-reanimated": "~3.3.0",
     "react-native-safe-area-context": "4.6.3",
@@ -20,6 +21,7 @@
     "@babel/core": "^7.20.0",
     "@types/react": "~18.2.14",
     "@types/react-native": "~0.72.2",
+    "@types/react-native-dotenv": "^0.2.2",
     "typescript": "^5.2.2"
   },
   "scripts": {

example-monorepos/with-custom-font/generateEnv.js

@@ -0,0 +1,49 @@
+const fs = require('fs');
+const path = require('path');
+const dotenv = require('dotenv');
+
+function generateEnv(envPostfix){
+    // Load environment variables from .env.global
+    const globalEnvPath = path.resolve(__dirname, '.env.global');
+    const globalEnv = dotenv.parse(fs.readFileSync(globalEnvPath));
+
+    // Prepare prefixed environment variables
+    const expoEnv = {};
+    const nextEnv = {};
+
+    Object.keys(globalEnv).forEach(key => {
+      expoEnv[`EXPO_${key}`] = globalEnv[key];
+      nextEnv[`NEXT_PUBLIC_${key}`] = globalEnv[key];
+    });
+
+    // Convert to .env format
+    const formatEnv = (env) => Object.entries(env).map(([key, value]) => `${key}=${value}`).join('\n');
+
+    // Define paths for .env.local files
+    const expoEnvPath = path.resolve(__dirname, `apps/expo/.env${envPostfix?`.${envPostfix}`:""}`);
+    const nextEnvPath = path.resolve(__dirname, `apps/next/.env${envPostfix?`.${envPostfix}`:""}`);
+
+    // Write .env.local files
+    fs.writeFileSync(expoEnvPath, formatEnv(expoEnv));
+    fs.writeFileSync(nextEnvPath, formatEnv(nextEnv));
+
+    // Create environmental variables codebase used in packages/app with the name env.ts
+    let envDotTsMain = 'import { Platform } from "react-native";\n\n// ############# Please do not change code below this line ##############\n';
+    let envDotTsExport = "\nexport {\n";
+
+    Object.keys(globalEnv).forEach((key)=> {
+        envDotTsMain += `const ${key} = (Platform.OS !== 'web')?process.env.EXPO_${key}:process.env.NEXT_PUBLIC_${key};\n`
+        envDotTsExport += `\t${key},\n`;
+    });
+    envDotTsExport += `};`;
+    envDotTsMain += envDotTsExport;
+    // Define path for env.ts in packages/app
+    const envTsPath = path.resolve(__dirname, `packages/app/env.ts`);
+    fs.writeFileSync(envTsPath, envDotTsMain);
+
+
+    console.log('Environment variables have been set up for Expo and Next.js');
+}
+
+const envPostfix = process.env.APP_ENV || 'local';
+generateEnv(envPostfix);

example-monorepos/with-custom-font/package.json

@@ -13,8 +13,8 @@
     "typescript": "^5.2.2"
   },
   "scripts": {
-    "native": "cd apps/expo && yarn start",
-    "web": "cd apps/next && yarn next"
+    "native": "cd apps/expo && APP_ENV=local node ../../generateEnv.js && yarn start",
+    "web": "cd apps/next && APP_ENV=local node ../../generateEnv.js && yarn next"
   },
   "packageManager": "yarn@3.4.1"
 }

example-monorepos/with-custom-font/packages/app/features/home/screen.tsx

@@ -1,6 +1,7 @@
 import { Text, useSx, View, H1, P, Row, A } from 'dripsy'
 import { TextLink } from 'solito/link'
 import { MotiLink } from 'solito/moti'
+import { VAR_1, VAR_2 } from 'app/env'
 
 export function HomeScreen() {
   const sx = useSx()
@@ -16,6 +17,7 @@ export function HomeScreen() {
           screen to another. This screen uses the same code on Next.js and React
           Native.
         </P>
+        <P sx={{ textAlign: 'center' }}>ENVIRONMENTAL_VARIABLES DEMONSTRATION=VAR_1: {VAR_1}, VAR_2: {VAR_2}</P>
         <P sx={{ textAlign: 'center' }}>
           Solito is made by{' '}
           <A