feat: Add appConfig for env vars & expo-constants

Author: codinsonn

.gitignore

@@ -1,6 +1,7 @@
 node_modules/
 node_modules
 .env
+.env.local
 
 # -- @generated: @expo/next-adapter@2.1.0 --
 
@@ -25,7 +26,7 @@ yarn-error.log*
 
 # misc
 .DS_Store
-.env*
+.env
 .next
 
 # -- @generated: @expo/next-adapter@2.1.52 --

apps/expo/.env.example

@@ -0,0 +1,4 @@
+EXPO_PUBLIC_BASE_URL=
+EXPO_PUBLIC_BACKEND_URL=
+EXPO_PUBLIC_API_URL=
+EXPO_PUBLIC_GRAPH_URL=

apps/expo/package.json

@@ -25,11 +25,12 @@
     "typescript": "5.3.3"
   },
   "scripts": {
-    "dev": "expo start",
-    "start": "expo start",
+    "dev": "expo start --clear",
+    "start": "expo start --clear",
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "expo start --web",
-    "add-dependencies": "expo install"
+    "add-dependencies": "expo install",
+    "env:local": "cp .env.example .env.local"
   }
 }

apps/next/.env.example

@@ -0,0 +1,4 @@
+NEXT_PUBLIC_BASE_URL=http://localhost:3000
+NEXT_PUBLIC_BACKEND_URL=http://localhost:3000
+NEXT_PUBLIC_API_URL=http://localhost:3000/api
+NEXT_PUBLIC_GRAPH_URL=http://localhost:3000/api/graphql

apps/next/package.json

@@ -8,6 +8,7 @@
   "devDependencies": {},
   "scripts": {
     "dev": "next dev",
-    "build": "next build"
+    "build": "next build",
+    "env:local": "cp .env.example .env.local"
   }
 }

features/app-core/appConfig.ts

@@ -0,0 +1,22 @@
+import Constants from 'expo-constants'
+import { Platform } from 'react-native'
+
+export const expoDebuggerHost = Constants?.expoGoConfig?.debuggerHost || Constants.manifest2?.extra?.expoGo?.debuggerHost // prettier-ignore
+export const localURL = expoDebuggerHost?.split?.(':').shift()
+
+export const fallbackBaseURL = localURL ? `http://${localURL}:3000` : ''
+
+/** --- appConfig ------------------------------------------------------------------------------ */
+/** -i- App config variables powered by env vars universally, and including some expo contants config on mobile */
+export const appConfig = {
+    baseURL: process.env.NEXT_PUBLIC_BASE_URL || process.env.EXPO_PUBLIC_BASE_URL || `${fallbackBaseURL}`, // prettier-ignore
+    backendURL: process.env.NEXT_PUBLIC_BACKEND_URL || process.env.EXPO_PUBLIC_BACKEND_URL || `${fallbackBaseURL}`, // prettier-ignore
+    apiURL: process.env.NEXT_PUBLIC_API_URL || process.env.EXPO_PUBLIC_API_URL || `${fallbackBaseURL}/api`, // prettier-ignore
+    graphURL: process.env.NEXT_PUBLIC_GRAPH_URL || process.env.EXPO_PUBLIC_GRAPH_URL || `${fallbackBaseURL}/api/graphql`, // prettier-ignore
+} as const
+
+/* --- Debug ----------------------------------------------------------------------------------- */
+
+if (Platform.OS !== 'web') {
+    if (appConfig.baseURL === '') console.warn('appConfig.baseURL is empty, check your environment variables')
+}

features/app-core/resolvers/healthCheck.ts

@@ -1,6 +1,7 @@
 import * as OS from 'os'
 import type { NextRequest } from 'next/server'
 import type { RequestContext } from '../middleware/createRequestContext'
+import { appConfig } from '../appConfig'
 
 /* --- Constants ------------------------------------------------------------------------------- */
 
@@ -9,7 +10,7 @@ const ALIVE_SINCE = new Date()
 /* --- Types ----------------------------------------------------------------------------------- */
 
 type HealthCheckArgs = {
-  echo: string
+  echo?: string
 }
 
 type HealthCheckInputs = {
@@ -33,9 +34,8 @@ export const healthCheck = async ({ args, context }: HealthCheckInputs) => {
     const rn = req as NextRequest
     const requestHost = rn?.headers?.get?.('host')
     const requestProtocol = rn?.headers?.get?.['x-forwarded-proto'] ?? 'http'
-    const requestURL = r?.url ?? `${requestProtocol}://${requestHost}/api/health`
-    const baseURL = process.env.BACKEND_URL || requestURL?.split('/api/')[0]
-    const apiURL = baseURL ? `${baseURL}/api` : null
+    const requestURL = r?.url || `${requestProtocol}://${requestHost}/api/health`
+    const { baseURL, backendURL, apiURL, graphURL } = appConfig
 
     // -- Respond --
 
@@ -55,8 +55,10 @@ export const healthCheck = async ({ args, context }: HealthCheckInputs) => {
         requestHost,
         requestProtocol,
         requestURL,
-        baseURL,
-        apiURL,
+        baseURL: requestHost ? `${requestProtocol}://${requestHost}` : baseURL,
+        backendURL: requestHost ? `${requestProtocol}://${requestHost}` : backendURL,
+        apiURL: requestHost ? `${requestProtocol}://${requestHost}/api` : apiURL,
+        graphURL: requestHost ? `${requestProtocol}://${requestHost}/api/graphql` : graphURL,
         port: process.env.PORT ? Number(process.env.PORT) : null,
         debugPort: process.debugPort && Number(process.debugPort),
         // VERSIONS

features/app-core/screens/UniversalRootLayout.tsx

@@ -13,7 +13,7 @@ type UniversalRootLayoutProps = {
     children: React.ReactNode
 }
 
-/* --- <UniversalRootLayout/> --------------------------------------------------------------------------- */
+/* --- <UniversalRootLayout/> ------------------------------------------------------------------ */
 
 const UniversalRootLayout = ({ children }: UniversalRootLayoutProps) => (
     <View style={styles.container}>

features/app-core/tsconfig.json

@@ -19,6 +19,7 @@
   },
   "include": [
     "next-env.d.ts",
+    "appConfig.ts",
     "**/*.ts",
     "**/*.tsx",
     "../../apps/expo/app/ExpoRootLayout.tsx",

package.json

@@ -15,6 +15,7 @@
     "ios": "npm -w @app/expo run ios",
     "expo:web": "npm -w @app/expo run web",
     "build": "npm -w @app/next run build",
-    "add-dependencies": "npm -w @app/expo run add-dependencies"
+    "add-dependencies": "npm -w @app/expo run add-dependencies",
+    "env:local": "npm -w @app/next run env:local & npm -w @app/expo run env:local"
   }
 }