update new config to can dev as web and application desktop at same time

client-electron/.gitignore

@@ -11,6 +11,8 @@ node_modules
 dist
 dist-ssr
 dist-electron
+dist-renderer
+dist-web
 release
 *.local
 

client-electron/electron-builder.json5

@@ -13,7 +13,7 @@
   directories: {
     output: 'release/${version}'
   },
-  files: ['dist', 'dist-electron'],
+  files: ['dist-renderer', 'dist-electron'],
   mac: {
     target: ['dmg'],
     artifactName: '${productName}-Mac-${version}-Installer.${ext}'

client-electron/electron/electron-env.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/consistent-type-imports */
 /// <reference types="vite-plugin-electron/electron-env" />
 
 declare namespace NodeJS {

client-electron/package.json

@@ -3,24 +3,30 @@
   "private": true,
   "version": "0.0.1",
   "scripts": {
-    "dev": "vite",
+    "dev": "concurrently \"npm run dev:electron\" \"npm run dev:web\"",
-    "build": "tsc && vite build && electron-builder",
+    "dev:electron": "vite -c vite.config.electron.ts",
+    "dev:web": "vite -c vite.config.web.ts",
+    "build": "concurrently \"npm run build:electron\" \"npm run build:web\"",
+    "build:electron": "tsc && vite build -c vite.config.electron.ts --mode=production && electron-builder",
+    "build:web": "tsc && vite build -c vite.config.web.ts --mode=production",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
   "dependencies": {
-    "dotenv": "^16.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.21.1"
   },
   "devDependencies": {
+    "@electron-forge/cli": "^7.2.0",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.18.1",
     "@typescript-eslint/parser": "^6.18.1",
     "@vitejs/plugin-react": "^4.0.4",
     "autoprefixer": "^10.4.16",
+    "concurrently": "^8.2.2",
+    "cross-env": "^7.0.3",
     "daisyui": "^4.6.0",
     "electron": "^26.1.0",
     "electron-builder": "^24.6.4",
@@ -36,4 +42,4 @@
     "vite-plugin-electron-renderer": "^0.14.5"
   },
   "main": "dist-electron/main.js"
-}
+}

client-electron/src/main.tsx

@@ -9,15 +9,19 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
   </React.StrictMode>
 )
 
-// Remove Preload scripts loading
+console.log(import.meta.env.MODE)
-postMessage({ payload: 'removeLoading' }, '*')
 
-// Use contextBridge
+if (import.meta.env.MODE === 'electron') {
-window.ipcRenderer.on('main-process-message', (_event, message) => {
+  // Remove Preload scripts loading
-  console.log(message)
+  postMessage({ payload: 'removeLoading' }, '*')
-})
 
-// Use deep link
+  // Use contextBridge
-window.ipcRenderer.on('deeplink', (_event, url) => {
+  window.ipcRenderer.on('main-process-message', (_event, message) => {
-  console.log(url)
+    console.log(message)
-})
+  })
+
+  // Use deep link
+  window.ipcRenderer.on('deeplink', (_event, url) => {
+    console.log(url)
+  })
+}

client-electron/src/pages/Home.tsx

@@ -7,7 +7,7 @@ const Home: React.FC = () => {
   const loginWithGoogle = () => {
     // if is web mode then use window.open
     // if is electron mode then use ipcRenderer.send to use deep link method
-    if (import.meta.env.TAOBIN_RECIPE_MANAGER_MODE === 'web') {
+    if (import.meta.env.MODE === 'web') {
       // open new window and listen to message from window.opener
       const newWindow = window.open(
         import.meta.env.TAOBIN_RECIPE_MANAGER_SERVER_URL,
@@ -31,7 +31,7 @@ const Home: React.FC = () => {
 
   return (
     <div>
-      <h1>This is Home Page!!!</h1>
+      <h1>This is Home Page!!!!!!!</h1>
       <button
         onClick={loginWithGoogle}
         className="bg-white px-4 py-2 border flex gap-2 border-slate-200 rounded-lg text-slate-700 hover:border-slate-400 hover:text-slate-900 hover:shadow transition duration-150"
@@ -40,7 +40,7 @@ const Home: React.FC = () => {
           className="w-6 h-6"
           src={googleLogo}
           alt="google logo"
-          loading="lazy"
+          loading="eager"
         />
         <span>Login with @forth.co.th Google account</span>
       </button>

client-electron/tsconfig.node.json

@@ -6,5 +6,8 @@
     "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true
   },
-  "include": ["vite.config.ts"]
+  "include": [
-}
+    "vite.config.electron.ts",
+    "vite.config.web.ts"
+  ]
+}

client-electron/vite.config.electron.ts

@@ -5,6 +5,7 @@ import react from '@vitejs/plugin-react'
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  mode: 'electron',
   envPrefix: 'TAOBIN_RECIPE_MANAGER_',
   plugins: [
     react(),
@@ -22,5 +23,8 @@ export default defineConfig({
       // See 👉 https://github.com/electron-vite/vite-plugin-electron-renderer
       renderer: {}
     })
-  ]
+  ],
+  build: {
+    outDir: 'dist-renderer'
+  }
 })

client-electron/vite.config.web.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  mode: 'web',
+  envPrefix: 'TAOBIN_RECIPE_MANAGER_',
+  plugins: [react()],
+  build: {
+    outDir: 'dist-web'
+  },
+  server: {
+    port: 4200
+  }
+})