update: upgrading the features of the electron envioronment for future development

client/package.json

@@ -2,7 +2,11 @@
   "name": "client",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
+  "main": "public/electron.js",
+  "homepage": "./",
   "dependencies": {
+    "@electron/remote": "^2.1.2",
     "@reduxjs/toolkit": "^1.9.7",
     "@tanstack/react-query": "^5.0.5",
     "@testing-library/jest-dom": "^5.14.1",
@@ -11,7 +15,10 @@
     "axios": "^1.5.1",
     "class-variance-authority": "^0.7.0",
     "classnames": "^2.5.1",
+    "concurrently": "^8.2.2",
+    "cross-env": "^7.0.3",
     "date-fns": "^2.30.0",
+    "electron-is-dev": "^3.0.1",
     "emoji-picker-react": "^4.5.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -27,13 +34,17 @@
     "styled-components": "^6.0.8",
     "svg-loaders-react": "^2.2.1",
     "typescript": "^4.4.2",
+    "wait-on": "^7.2.0",
     "web-vitals": "^2.1.0"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "el:serve": "concurrently -k \"cross-env BROWSER=none yarn start\" \"yarn el:start\"",
+    "el:start": "wait-on tcp:3000 && electron .",
+    "el:build": "yarn build && electron-builder -c.extraMetadata.main=build/electron.js"
   },
   "eslintConfig": {
     "extends": [
@@ -60,7 +71,24 @@
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@types/styled-components": "^5.1.28",
+    "electron": "^29.1.0",
+    "electron-builder": "^24.13.3",
     "prettier-plugin-tailwindcss": "^0.5.6",
     "tailwindcss": "^3.3.3"
+  },
+  "build": {
+    "appId": "com.electron.app",
+    "extends": null,
+    "files": [
+      "build/**/*",
+      "public/**/*",
+      "dist/**/*",
+      "src/**/*",
+      "node_modules/**/*",
+      "package.json"
+    ],
+    "directories": {
+      "buildResources": "assets"
+    }
   }
 }

client/public/electron.js

@@ -0,0 +1,44 @@
+import { app, BrowserWindow } from 'electron'
+import isDev from'electron-is-dev'
+import path from 'path'
+import * as main from "@electron/remote/main/index.js"
+
+
+main.initialize();
+
+
+function createWindow() {
+	const win = new BrowserWindow({
+		width: 1600,
+		height: 900,
+		webPreferences: {
+			nodeIntegration: true,
+			enableRemoteModule: true
+		},
+	});
+
+	win.webContents.openDevTools();
+	// win.fullScreen = true; 
+
+	win.loadURL(
+		isDev
+			? 'http://localhost:3000'
+			: `file://${path.join(__dirname, '../build/index.html')}`
+	);
+
+	win.removeMenu();
+}
+
+app.on('ready', createWindow);
+
+app.on('window-all-closed', () => {
+	if (process.platform !== 'darwin') {
+		app.quit();
+	}
+});
+
+app.on('activate', () => {
+	if (BrowserWindow.getAllWindows().length === 0) {
+		createWindow();
+	}
+});

client/src/App.tsx

@@ -14,13 +14,14 @@ import { ActiveChatContext } from "./utils/context/activeChatContext";
 import AuthContext from "./utils/context/authContext";
 import { store } from "./utils/store";
 import { SocketProvider } from "./utils/context/socketContext";
+import HomePage from "./pages/home";
 
 function App() {
   return (
     <AppWithProviders>
       <BrowserRouter>
         <Routes>
-          <Route path="/" element={<>Home</>} />
+          <Route path="/" element={<HomePage />} />
           <Route path="/auth">
             <Route
               path="login"

client/src/components/conversation/chat/index.tsx

@@ -110,14 +110,14 @@ export default function ChatSection() {
       return;
     }
 
-    // Handle sending text messages
+    //* Handle sending text messages
     const { data: messageFromApi } = await createMessage({
       content: messageToSend!,
       id: activeChat!.id,
     });
 
 
-    // Update local message state for text messages
+    //* Update local message state for text messages
     setLocalMsgState((prev) => setLocalMsgStateHelper(messageFromApi, prev));
 
     socket?.emit("message:create", {
@@ -183,7 +183,7 @@ export default function ChatSection() {
         message: Message;
         attachmentSrc: string;
       }) => {
-        //TODO:  IMPLEMENT
+        // TODO:  IMPLEMENT
       }
     );
 

client/src/pages/home/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+
+const HomePage = () => {
+	return (
+		<div>
+			<h1>
+			This is the home page
+			</h1>
+			<Link to="/conversations">Conversations</Link>
+		</div>
+	)
+}
+
+export default HomePage