chore: env refactor + android emulator connection bug

Author: AnkushSarkar10

.env.development

@@ -1,6 +1,6 @@
 import type { ConfigContext, ExpoConfig } from '@expo/config';
 
-import { ClientEnv, Env } from './env';
+import { Env } from './env';
 
 export default ({ config }: ConfigContext): ExpoConfig => ({
   ...config,
@@ -74,7 +74,7 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
     ],
   ],
   extra: {
-    ...ClientEnv,
+    ...Env,
     eas: {
       projectId: Env.EAS_PROJECT_ID,
     },

.env.production

@@ -2,23 +2,19 @@
 /*
  * Env file to load and validate env variables
  * Be cautious; this file should not be imported into your source folder.
- * We split the env variables into two parts:
- * 1. Client variables: These variables are used in the client-side code (src folder).
- * 2. Build-time variables: These variables are used in the build process (app.config.ts file).
  * Import this file into the `app.config.ts` file to use environment variables during the build process. The client variables can then be passed to the client-side using the extra field in the `app.config.ts` file.
  * To access the client environment variables in your `src` folder, you can import them from `@env`. For example: `import Env from '@env'`.
  */
 /**
  * 1st part: Import packages and Load your env variables
- * we use dotenv to load the correct variables from the .env file based on the APP_ENV variable (default is development)
  * APP_ENV is passed as an inline variable while executing the command, for example: APP_ENV=staging pnpm build:android
  */
 const z = require('zod');
 
 const packageJSON = require('./package.json');
 const path = require('path');
 const APP_ENV = process.env.APP_ENV ?? 'development';
-const envPath = path.resolve(__dirname, `.env.${APP_ENV}`);
+const envPath = path.resolve(__dirname, `.env`);
 
 require('dotenv').config({
   path: envPath,
@@ -32,124 +28,87 @@ require('dotenv').config({
  * for example: if the APP_ENV is staging, the bundle id will be com.habitstogether.staging
  */
 
-// TODO: Replace these values with your own
-
+const NAME = 'HabitsTogetherApp'; // app name
+const SCHEME = 'habitstogetherApp'; // app scheme
 const BUNDLE_ID = 'com.habitstogether'; // ios bundle id
 const PACKAGE = 'com.habitstogether'; // android package name
-const NAME = 'HabitsTogetherApp'; // app name
 const EXPO_ACCOUNT_OWNER = 'habitstogether'; // expo account owner
 const EAS_PROJECT_ID = 'c3e1075b-6fe7-4686-aa49-35b46a229044'; // eas project id
-const SCHEME = 'habitstogetherApp'; // app scheme
-
-/**
- * We declare a function withEnvSuffix that will add a suffix to the variable name based on the APP_ENV
- * Add a suffix to variable env based on APP_ENV
- * @param {string} name
- * @returns  {string}
- */
-
-const withEnvSuffix = (name) => {
-  return APP_ENV === 'production' ? name : `${name}.${APP_ENV}`;
-};
 
 /**
  * 2nd part: Define your env variables schema
  * we use zod to define our env variables schema
  *
- * we split the env variables into two parts:
- *    1. client: These variables are used in the client-side code (`src` folder).
- *    2. buildTime: These variables are used in the build process (app.config.ts file). You can think of them as server-side variables.
- *
- * Main rules:
- *    1. If you need your variable on the client-side, you should add it to the client schema; otherwise, you should add it to the buildTime schema.
- *    2. Whenever you want to add a new variable, you should add it to the correct schema based on the previous rule, then you should add it to the corresponding object (_clientEnv or _buildTimeEnv).
- *
  * Note: `z.string()` means that the variable exists and can be an empty string, but not `undefined`.
  * If you want to make the variable required, you should use `z.string().min(1)` instead.
  * Read more about zod here: https://zod.dev/?id=strings
  *
  */
 
-const client = z.object({
+const envSchema = z.object({
   APP_ENV: z.enum(['development', 'staging', 'production']),
   NAME: z.string(),
   SCHEME: z.string(),
   BUNDLE_ID: z.string(),
   PACKAGE: z.string(),
   VERSION: z.string(),
-
-  // ADD YOUR CLIENT ENV VARS HERE
-  API_URL: z.string(),
-  VAR_NUMBER: z.number(),
-  VAR_BOOL: z.boolean(),
-});
-
-const buildTime = z.object({
   EXPO_ACCOUNT_OWNER: z.string(),
   EAS_PROJECT_ID: z.string(),
-  // ADD YOUR BUILD TIME ENV VARS HERE
-  SECRET_KEY: z.string(),
+  // firebase
+  EXPO_PUBLIC_FIREBASE_API_KEY: z.string().min(1),
+  EXPO_PUBLIC_FIREBASE_AUTH_DOMAIN: z.string().min(1),
+  EXPO_PUBLIC_FIREBASE_PROJECT_ID: z.string().min(1),
+  EXPO_PUBLIC_FIREBASE_STORAGE_BUCKET: z.string().min(1),
+  EXPO_PUBLIC_FIREBASE_MESSAGING_SENDER_ID: z.string().min(1),
+  EXPO_PUBLIC_FIREBASE_APP_ID: z.string().min(1),
+  EXPO_PUBLIC_FIREBASE_MEASUREMENT_ID: z.string().min(1),
 });
 
 /**
- * @type {Record<keyof z.infer<typeof client> , unknown>}
+ * Load environment variables
+ * @type {Record<keyof z.infer<typeof envSchema> , unknown>}
  */
-const _clientEnv = {
+const _env = {
   APP_ENV,
-  NAME: NAME,
-  SCHEME: SCHEME,
-  BUNDLE_ID: withEnvSuffix(BUNDLE_ID),
-  PACKAGE: withEnvSuffix(PACKAGE),
+  NAME,
+  SCHEME,
+  BUNDLE_ID,
+  PACKAGE,
   VERSION: packageJSON.version,
-
-  // ADD YOUR ENV VARS HERE TOO
-  API_URL: process.env.API_URL,
-  VAR_NUMBER: Number(process.env.VAR_NUMBER),
-  VAR_BOOL: process.env.VAR_BOOL === 'true',
-};
-
-/**
- * @type {Record<keyof z.infer<typeof buildTime> , unknown>}
- */
-const _buildTimeEnv = {
   EXPO_ACCOUNT_OWNER,
   EAS_PROJECT_ID,
-  // ADD YOUR ENV VARS HERE TOO
-  SECRET_KEY: process.env.SECRET_KEY,
+  // firebase
+  EXPO_PUBLIC_FIREBASE_API_KEY: process.env.EXPO_PUBLIC_FIREBASE_API_KEY,
+  EXPO_PUBLIC_FIREBASE_AUTH_DOMAIN:
+    process.env.EXPO_PUBLIC_FIREBASE_AUTH_DOMAIN,
+  EXPO_PUBLIC_FIREBASE_PROJECT_ID: process.env.EXPO_PUBLIC_FIREBASE_PROJECT_ID,
+  EXPO_PUBLIC_FIREBASE_STORAGE_BUCKET:
+    process.env.EXPO_PUBLIC_FIREBASE_STORAGE_BUCKET,
+  EXPO_PUBLIC_FIREBASE_MESSAGING_SENDER_ID:
+    process.env.EXPO_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
+  EXPO_PUBLIC_FIREBASE_APP_ID: process.env.EXPO_PUBLIC_FIREBASE_APP_ID,
+  EXPO_PUBLIC_FIREBASE_MEASUREMENT_ID:
+    process.env.EXPO_PUBLIC_FIREBASE_MEASUREMENT_ID,
 };
 
 /**
  * 3rd part: Merge and Validate your env variables
  * We use zod to validate our env variables based on the schema we defined above
  * If the validation fails we throw an error and log the error to the console with a detailed message about missed variables
- * If the validation passes we export the merged and parsed env variables to be used in the app.config.ts file as well as a ClientEnv object to be used in the client-side code
+ * If the validation passes we export the merged and parsed env variables to be used in the app.config.ts file (look at under extra)
  **/
-const _env = {
-  ..._clientEnv,
-  ..._buildTimeEnv,
-};
 
-const merged = buildTime.merge(client);
-const parsed = merged.safeParse(_env);
-
-if (parsed.success === false) {
+const parsed = envSchema.safeParse(_env);
+if (!parsed.success) {
   console.error(
     '❌ Invalid environment variables:',
     parsed.error.flatten().fieldErrors,
-
-    `\n❌ Missing variables in .env.${APP_ENV} file, Make sure all required variables are defined in the .env.${APP_ENV} file.`,
-    `\n💡 Tip: If you recently updated the .env.${APP_ENV} file and the error still persists, try restarting the server with the -c flag to clear the cache.`,
-  );
-  throw new Error(
-    'Invalid environment variables, Check terminal for more details ',
   );
+  throw new Error('Invalid environment variables. Check your .env file.');
 }
 
 const Env = parsed.data;
-const ClientEnv = client.parse(_clientEnv);
 
 module.exports = {
   Env,
-  ClientEnv,
-  withEnvSuffix,
 };

app.config.ts

@@ -1,27 +1,32 @@
+import { Env } from '@env';
 import { initializeApp } from 'firebase/app';
-import { connectFirestoreEmulator, getFirestore } from 'firebase/firestore';
+import {
+  connectFirestoreEmulator,
+  initializeFirestore,
+} from 'firebase/firestore';
 import { connectFunctionsEmulator, getFunctions } from 'firebase/functions';
+import { Platform } from 'react-native';
 
 const firebaseConfig = {
-  apiKey: process.env.EXPO_PUBLIC_FIREBASE_API_KEY,
-  authDomain: process.env.EXPO_PUBLIC_FIREBASE_AUTH_DOMAIN,
-  projectId: process.env.EXPO_PUBLIC_FIREBASE_PROJECT_ID,
-  storageBucket: process.env.EXPO_PUBLIC_FIREBASE_STORAGE_BUCKET,
-  messagingSenderId: process.env.EXPO_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
-  appId: process.env.EXPO_PUBLIC_FIREBASE_APP_ID,
+  apiKey: Env.EXPO_PUBLIC_FIREBASE_API_KEY,
+  authDomain: Env.EXPO_PUBLIC_FIREBASE_AUTH_DOMAIN,
+  projectId: Env.EXPO_PUBLIC_FIREBASE_PROJECT_ID,
+  storageBucket: Env.EXPO_PUBLIC_FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: Env.EXPO_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
+  appId: Env.EXPO_PUBLIC_FIREBASE_APP_ID,
 };
 
 // Initialize Firebase
 export const app = initializeApp(firebaseConfig);
-export const db = getFirestore(app);
+export const db = initializeFirestore(app, {
+  experimentalForceLongPolling: true,
+});
+const functions = getFunctions(app);
 
-// Connect to emulator in development
-if (__DEV__) {
-  connectFirestoreEmulator(db, '127.0.0.1', 8080);
-}
-
-// Connect to Functions emulator
-const functions = getFunctions();
+// Connect to emulator
+// 10.0.2.2 is a special IP address to connect to the 'localhost' of the host computer from an Android emulator
+const emulatorHost = Platform.OS === 'ios' ? '127.0.0.1' : '10.0.2.2';
 if (process.env.NODE_ENV === 'development') {
-  connectFunctionsEmulator(functions, '127.0.0.1', 5001);
+  connectFirestoreEmulator(db, emulatorHost, 8080);
+  connectFunctionsEmulator(functions, emulatorHost, 5001);
 }

env.js

@@ -7,7 +7,7 @@
 
 import Constants from 'expo-constants';
 /**
- *  @type {typeof import('../../env.js').ClientEnv}
+ *  @type {typeof import('../../env.js').Env}
  */
 //@ts-ignore // Don't worry about TypeScript here; we know we're passing the correct environment variables to `extra` in `app.config.ts`.
 export const Env = Constants.expoConfig?.extra ?? {};