Merge pull request #99 from powersync-ja/react-native-supbase-eas-config

[DEMOS] chore: updated react-native-supabase-todolist demo to use expo environment variables

Author: Chriztiaan

.changeset/bright-stingrays-buy.md

@@ -0,0 +1,5 @@
+---
+"@journeyapps/powersync-react-supabase-todolist": minor
+---
+
+Configuration is now done via `.env`/`.env.local` files instead of directly in code. `AppConfig.ts` now references `process.env`. Updated project to have EAS build support.

demos/react-native-supabase-group-chat/.env

@@ -1,5 +1,5 @@
-# Replace the credentials below with you Supabase, PowerSync and Expo project details.
+# Replace the credentials below with your Supabase, PowerSync and Expo project details.
 EXPO_PUBLIC_SUPABASE_URL=https://foo.supabase.co
 EXPO_PUBLIC_SUPABASE_ANON_KEY=foo
 EXPO_PUBLIC_POWERSYNC_URL=https://foo.powersync.journeyapps.com
-EXPO_PUBLIC_EAS_PROJECT_ID=foo
+EXPO_PUBLIC_EAS_PROJECT_ID=foo # Optional. Only required when using EAS.

demos/react-native-supabase-group-chat/.gitignore

@@ -16,7 +16,9 @@ web-build/
 # Temporary files created by Metro to check the health of the file watcher
 .metro-health-check*
 
-# .env
+# local env files
+.env*.local
+
 *.ipa
 *.tar.gz
 .tamagui

demos/react-native-supabase-group-chat/README.md

@@ -18,6 +18,6 @@ Here are some helpful links:
 
 - [PowerSync Website](https://www.powersync.com/)
 - [PowerSync Docs](https://docs.powersync.com/)
-- [PowerSync React Native Client SDK](https://github.com/journeyapps/powersync-js/tree/main/packages/powersync-sdk-react-native)
+- [PowerSync React Native Client SDK Reference](https://docs.powersync.com/client-sdk-references/react-native-and-expo)
 - [Supabase Docs](https://supabase.com/docs)
 - [Expo Docs](https://docs.expo.dev/)

demos/react-native-supabase-todolist/.env

@@ -0,0 +1,6 @@
+# Replace the credentials below with your Supabase, PowerSync and Expo project details.
+EXPO_PUBLIC_SUPABASE_URL=https://foo.supabase.co
+EXPO_PUBLIC_SUPABASE_ANON_KEY=foo
+EXPO_PUBLIC_SUPABASE_BUCKET= # Optional. Only required when syncing attachments and using Supabase Storage. See packages/powersync-attachments.
+EXPO_PUBLIC_POWERSYNC_URL=https://foo.powersync.journeyapps.com
+EXPO_PUBLIC_EAS_PROJECT_ID=foo # Optional. Only required when using EAS.

demos/react-native-supabase-todolist/.gitignore

@@ -1,8 +1,5 @@
 # Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
 
-# Credentials
-library/supabase/AppConfig.ts
-
 # dependencies
 node_modules/
 
@@ -31,7 +28,6 @@ npm-debug.*
 
 # local env files
 .env*.local
-.env
 
 # typescript
 *.tsbuildinfo

demos/react-native-supabase-todolist/README.md

@@ -36,14 +36,16 @@ bucket_definitions:
 ```
 
 ## Configure The App
+Replace the necessary credentials in the [.env](./.env) file.
+Generally, the `.env` file is used for storing common environment variables shared across all instances of the application, while `.env.local` is for overriding or providing environment-specific configurations, particularly for local development.
+As `.env.local` is normally not checked into source control (this project has a git-ignore rule), you can copy `.env`, name it `.env.local`, and then configure as needed.
 
-Copy the `AppConfig.template.ts` to a usable file
+### EAS Build configuration
+Take note that you will need an [Expo](https://expo.dev/) account if you want to use EAS for your builds. The Expo project ID should then also be configured in the environment file.
 
-```bash
-cp library/supabase/AppConfig.template.ts library/supabase/AppConfig.ts
-```
+For secret/sensitive environment variables which shouldn't be checked into source control, you can configure them as EAS secrets. They can be added via either the Expo website or the EAS CLI, both are explained [here](https://docs.expo.dev/build-reference/variables/#using-secrets-in-environment-variables).
 
-Insert the necessary credentials.
+General information on defining environment variables with Expo can be found here [here](https://docs.expo.dev/build-reference/variables/#can-eas-build-use-env-files).
 
 ## Run the App
 
@@ -64,3 +66,12 @@ Run on Android
 ```sh
 pnpm android
 ```
+
+
+## Here are some helpful links:
+
+- [PowerSync Website](https://www.powersync.com/)
+- [PowerSync Docs](https://docs.powersync.com/)
+- [PowerSync React Native Client SDK Reference](https://docs.powersync.com/client-sdk-references/react-native-and-expo)
+- [Supabase Docs](https://supabase.com/docs)
+- [Expo Docs](https://docs.expo.dev/)

demos/react-native-supabase-todolist/app.config.ts

@@ -0,0 +1,69 @@
+import { type ExpoConfig } from "expo/config";
+
+import { config as dotenvConfig} from 'dotenv'
+import { resolve } from 'path'
+
+// EAS doesn't load values from `.env` by default when consider the `app.config`
+dotenvConfig({
+  path: resolve(__dirname, '.env')
+})
+
+const projectId = process.env.EXPO_PUBLIC_EAS_PROJECT_ID;
+
+const config: ExpoConfig = {
+    name: 'powersync-example',
+    slug: 'powersync-example',
+    version: '1.0.0',
+    orientation: 'portrait',
+    icon: './assets/icon.png',
+    userInterfaceStyle: 'light',
+    scheme: 'powersync',
+    splash: {
+        image: './assets/splash.png',
+        resizeMode: 'contain',
+        backgroundColor: '#ffffff',
+    },
+    updates: {
+        url: `https://u.expo.dev/${projectId}`,
+    },
+    assetBundlePatterns: ['**/*'],
+    ios: {
+        supportsTablet: true,
+        bundleIdentifier: 'com.powersync.example',
+    },
+    android: {
+        adaptiveIcon: {
+            foregroundImage: './assets/adaptive-icon.png',
+            backgroundColor: '#ffffff',
+        },
+        package: 'com.powersync.example',
+    },
+    web: {
+        favicon: './assets/favicon.png',
+    },
+    extra: {
+        eas: {
+            projectId
+        },
+    },
+    plugins: [
+        'expo-router',
+        [
+            'expo-camera',
+            {
+                cameraPermission: 'Allow $(PRODUCT_NAME) to access your camera.',
+            },
+        ],
+        [
+            'expo-build-properties',
+            {
+                ios: {
+                    deploymentTarget: '13.4',
+                },
+            },
+        ],
+        'expo-secure-store',
+    ],
+};
+
+export default config;

demos/react-native-supabase-todolist/app.json

@@ -0,0 +1,20 @@
+{
+  "cli": {
+    "version": ">= 3.13.3",
+    "promptToConfigurePushNotifications": false
+  },
+  "build": {
+    "development": {
+      "developmentClient": true,
+      "distribution": "internal",
+      "channel": "preview"
+    },
+    "preview": {
+      "channel": "preview",
+      "distribution": "internal"
+    },
+    "production": {
+      "channel": "production"
+    }
+  }
+}