Merge pull request #274 from flexbox/with-env

feat: 🎸 add with env

Author: flexbox

challenges/react-navigation/02.md

@@ -6,8 +6,7 @@
 
 ## 👾 Before we start the exercise
 
-- Check the [`route` prop documentation](https://reactnavigation.org/docs/route-prop).
-- Do you remember how to [pass to the destination route](https://reactnavigation.org/docs/navigation-prop#common-api-reference)?
+- Check the [`route` prop documentation](https://reactnavigation.org/docs/params).
 
 ## 👨‍🚀 Exercise 2
 

challenges/release/02.md

@@ -40,20 +40,19 @@ If you want to store secret key in your repository like `SENTRY_API_KEY`, you ca
 To create a new secret, run :
 
 ```console
-eas secret
+eas env
 ```
 
 ```console
-eas secret:create  // create a new secret
-eas secret:list    // view any existing secrets for this project
+eas env:create  // create a new secret
+eas env:list    // view any existing secrets for this project
 ```
 
-- [ ] use `eas secret:create` and create a fake `SWAPI_KEY` because there is no API key for the Star Wars API.
+- [ ] use `eas env:create` and create a fake `SWAPI_KEY` because there is no API key for the Star Wars API.
 
 In the next lesson, we are going to build your app and show you how to install it on your phone.
 
 ## 👽 Bonus
 
-- [ ] Add a custom icon for your dev app
-
-Use [App-icon-badge](https://github.com/obytes/app-icon-badge) and update your `app.config.js` to have a custom icon for your dev app.
+- [ ] Check [with-env config](https://github.com/betomoedano/with-environments/blob/main/app.config.ts) and update your `app.config` file.
+- [ ] [Create new icons with Figma](https://www.figma.com/community/file/1466490409418563617/expo-app-icon-splash-v2-community) like [with-env icons](https://github.com/betomoedano/with-environments/tree/main/assets/images/icons) to have a custom icon for your dev app.

hackathon/spacecraft/.env.local

@@ -0,0 +1,3 @@
+# Environment: development
+
+APP_ENV=development

hackathon/spacecraft/app.config.js

@@ -0,0 +1,111 @@
+import { ExpoConfig } from "@expo/config-types";
+
+import { version } from "./package.json";
+
+// Project constants
+const EAS_PROJECT_ID = "012accc3-4ce5-4bae-9f4d-2f842489f07a";
+const PROJECT_SLUG = "spacecraft";
+const OWNER = "weshipit";
+
+// App production config
+const APP_NAME = "Spacecraft";
+const BUNDLE_IDENTIFIER = "weshipit.today.spacecraft";
+const PACKAGE_NAME = "weshipit.today.spacecraft";
+const SCHEME = "spacecraft";
+
+export default ({ config }: { config: ExpoConfig }): ExpoConfig => {
+  const environment = process.env.APP_ENV || "development";
+  console.log("⚙️ Building app for environment:", environment);
+
+  const { adaptiveIcon, bundleIdentifier, icon, name, packageName, scheme } =
+    getDynamicAppConfig(
+      environment as "development" | "preview" | "production",
+    );
+
+  return {
+    ...config,
+    android: {
+      adaptiveIcon: {
+        backgroundColor: "#ffffff",
+        foregroundImage: adaptiveIcon,
+      },
+      package: packageName,
+      playStoreUrl:
+        "https://play.google.com/store/apps/details?id=weshipit.today.spacecraft",
+    },
+    extra: {
+      eas: {
+        projectId: EAS_PROJECT_ID,
+      },
+      storybookEnabled: process.env.STORYBOOK_ENABLED,
+    },
+    icon: icon,
+    ios: {
+      appStoreUrl: "https://apps.apple.com/fr/app/<compagny_name>/idxxxxxxxxx",
+      bundleIdentifier: bundleIdentifier,
+      supportsTablet: true,
+    },
+    name: name,
+    newArchEnabled: true,
+    orientation: "portrait",
+    owner: OWNER,
+    plugins: [],
+    runtimeVersion: {
+      policy: "appVersion",
+    },
+    scheme: scheme,
+    slug: PROJECT_SLUG,
+    splash: {
+      backgroundColor: "#ffffff",
+      image: "./assets/splash.png",
+      resizeMode: "contain",
+    },
+    updates: {
+      fallbackToCacheTimeout: 0,
+      url: `https://u.expo.dev/${EAS_PROJECT_ID}`,
+    },
+    userInterfaceStyle: "automatic",
+    version,
+    web: {
+      bundler: "metro",
+      favicon: "./assets/favicon.png",
+      output: "static",
+    },
+  };
+};
+
+// Dynamically configure the app based on the environment
+export const getDynamicAppConfig = (
+  environment: "development" | "preview" | "production",
+) => {
+  if (environment === "production") {
+    return {
+      adaptiveIcon: "./assets/adaptive-icon.png",
+      bundleIdentifier: BUNDLE_IDENTIFIER,
+      icon: "./assets/icon.png",
+      name: APP_NAME,
+      packageName: PACKAGE_NAME,
+      scheme: SCHEME,
+    };
+  }
+
+  if (environment === "preview") {
+    return {
+      adaptiveIcon: "./assets/adaptive-icon-preview.png",
+      bundleIdentifier: `${BUNDLE_IDENTIFIER}.preview`,
+      icon: "./assets/icon-preview.png",
+      name: `${APP_NAME} Preview`,
+      packageName: `${PACKAGE_NAME}.preview`,
+      scheme: `${SCHEME}-prev`,
+    };
+  }
+
+  return {
+    adaptiveIcon: "./assets/adaptive-icon-dev.png",
+    bundleIdentifier: `${BUNDLE_IDENTIFIER}.dev`,
+    icon: "./assets/icon-dev.png",
+    name: `${APP_NAME} Development`,
+    packageName: `${PACKAGE_NAME}.dev`,
+    scheme: `${SCHEME}-dev`,
+  };
+};

hackathon/spacecraft/app.config.ts

@@ -81,7 +81,6 @@
     "@types/react-dom": "~18.3.1",
     "@typescript-eslint/eslint-plugin": "^7.11.0",
     "@typescript-eslint/parser": "^7.11.0",
-    "app-icon-badge": "^0.1.2",
     "babel-loader": "^9.1.3",
     "babel-plugin-module-resolver": "^5.0.0",
     "babel-plugin-transform-remove-console": "^6.9.4",
@@ -99,4 +98,4 @@
     "prettier": "^3.2.5",
     "typescript": "~5.3.3"
   }
-}
+}