feat(hello-world): Simplify react project and allow frontends with vi…

hello-world/react-frontend/canister.yaml

@@ -11,4 +11,4 @@ recipe:
       # Eventually you might want to use `npm ci` to lock your dependencies
       - npm install
       - npm run build
-    dir: app/dist
+    dir: dist

hello-world/react-frontend/package.json

@@ -1,9 +1,32 @@
 {
-  "name": "icp-frontend-environment-variables",
+  "name": "app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
   "scripts": {
-    "build": "npm run build --workspaces"
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
   },
-  "workspaces": [
-    "app"
-  ]
+  "dependencies": {
+    "@icp-sdk/core": "~5.2.0",
+    "react": "~19.1.1",
+    "react-dom": "~19.1.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "~9.33.0",
+    "@icp-sdk/bindgen": "^0.4.0",
+    "@types/node": "^25.9.1",
+    "@types/react": "~19.1.10",
+    "@types/react-dom": "~19.1.7",
+    "@vitejs/plugin-react": "~5.0.0",
+    "eslint": "~9.33.0",
+    "eslint-plugin-react-hooks": "~5.2.0",
+    "eslint-plugin-react-refresh": "~0.4.20",
+    "globals": "~16.3.0",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "~8.39.1",
+    "vite": "~7.1.11"
+  }
 }

hello-world/react-frontend/tsconfig.node.json

@@ -20,5 +20,6 @@
     "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
-  }
+  },
+  "include": ["vite.config.ts"]
 }

hello-world/react-frontend/vite.config.ts

@@ -0,0 +1,69 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { icpBindgen } from "@icp-sdk/bindgen/plugins/vite";
+import { execSync } from "child_process";
+
+
+export default defineConfig(({ command }) => {
+  const plugins = [
+    react(),
+    icpBindgen({
+      didFile: "../backend/backend.did",
+      outDir: "./src/backend/api",
+    }),
+  ];
+
+  // If we're only building this is enough
+  if (command !== "serve") {
+    return { plugins };
+  }
+
+  // If we're running the local local npm server, we're going
+  // to lookup the local network's root key and the relevant
+  // canister ids
+  const environment = process.env.ICP_ENVIRONMENT || "local";
+  const CANISTER_NAME = "backend";
+
+  const networkStatus = JSON.parse(
+    execSync(`icp network status -e ${environment} --json`, { encoding: "utf-8" })
+  );
+  const rootKey: string = networkStatus.root_key;
+  const proxyTarget: string = networkStatus.api_url;
+
+  // Backend must be deployed before starting dev server
+  let canisterId: string;
+  try {
+    canisterId = execSync(`icp canister status ${CANISTER_NAME} -e ${environment} -i`, {
+      encoding: "utf-8",
+    }).trim();
+  } catch {
+    console.error(`
+     Backend canister "${CANISTER_NAME}" not found in environment "${environment}"
+
+     Before running the dev server, deploy the backend canister:
+
+       icp deploy ${CANISTER_NAME} -e ${environment}
+    `);
+    process.exit(1);
+  }
+
+  const server = {
+    headers: {
+      "Set-Cookie": `ic_env=${encodeURIComponent(
+        `PUBLIC_CANISTER_ID:${CANISTER_NAME}=${canisterId}&ic_root_key=${rootKey}`
+      )}; SameSite=Lax;`,
+    },
+    proxy: {
+      "/api": {
+        target: proxyTarget,
+        changeOrigin: true,
+      },
+    },
+  };
+
+  return {
+    plugins,
+    server
+  };
+
+});

hello-world/vue-frontend/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "MotokoVue_frontend",
+  "name": "frontend",
   "version": "0.0.0",
   "scripts": {
     "build": "vite build",
@@ -13,6 +13,7 @@
   },
   "devDependencies": {
     "@icp-sdk/bindgen": "^0.4.0",
+    "@types/node": "^25.9.1",
     "@vitejs/plugin-vue": "~6.0.7",
     "@vue/tsconfig": "^0.9.1",
     "sass-embedded": "^1.99.0",

hello-world/vue-frontend/vite.config.ts

@@ -0,0 +1,69 @@
+import { defineConfig } from "vite";
+import vue from '@vitejs/plugin-vue';
+import { icpBindgen } from "@icp-sdk/bindgen/plugins/vite";
+import { execSync } from "child_process";
+
+
+export default defineConfig(({ command }) => {
+  const plugins = [
+    vue(),
+    icpBindgen({
+      didFile: '../backend/backend.did',
+      outDir: './src/bindings'
+    }),
+  ];
+
+  // If we're only building this is enough
+  if (command !== "serve") {
+    return { plugins };
+  }
+
+  // If we're running the local local npm server, we're going
+  // to lookup the local network's root key and the relevant
+  // canister ids
+  const environment = process.env.ICP_ENVIRONMENT || "local";
+  const CANISTER_NAME = "backend";
+
+  const networkStatus = JSON.parse(
+    execSync(`icp network status -e ${environment} --json`, { encoding: "utf-8" })
+  );
+  const rootKey: string = networkStatus.root_key;
+  const proxyTarget: string = networkStatus.api_url;
+
+  // Backend must be deployed before starting dev server
+  let canisterId: string;
+  try {
+    canisterId = execSync(`icp canister status ${CANISTER_NAME} -e ${environment} -i`, {
+      encoding: "utf-8",
+    }).trim();
+  } catch {
+    console.error(`
+     Backend canister "${CANISTER_NAME}" not found in environment "${environment}"
+
+     Before running the dev server, deploy the backend canister:
+
+       icp deploy ${CANISTER_NAME} -e ${environment}
+    `);
+    process.exit(1);
+  }
+
+  const server = {
+    headers: {
+      "Set-Cookie": `ic_env=${encodeURIComponent(
+        `PUBLIC_CANISTER_ID:${CANISTER_NAME}=${canisterId}&ic_root_key=${rootKey}`
+      )}; SameSite=Lax;`,
+    },
+    proxy: {
+      "/api": {
+        target: proxyTarget,
+        changeOrigin: true,
+      },
+    },
+  };
+
+  return {
+    plugins,
+    server
+  };
+
+});