Merge pull request #67 from Computing-Collective/client-env-remove

Client-env-remove

Author: ElioDiNino

.github/workflows/client-releases.yml

@@ -11,8 +11,6 @@ jobs:
     permissions:
       contents: write
     runs-on: ${{ matrix.os }}
-    env:
-      API_ENDPOINT: ${{ vars.API_ENDPOINT }}
     defaults:
       run:
         working-directory: client
@@ -29,10 +27,6 @@ jobs:
         check-latest: true
     - name: Install Dependencies
       run: npm ci
-    - name: Setup Environment Variables
-      run: |
-        echo "API_ENDPOINT=$API_ENDPOINT" >> .env
-        echo "PICO_API_ENDPOINT=http://192.168.137.159" >> .env
     - name: Publish Electron Application
       env:
         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

client/.env.example

@@ -90,3 +90,6 @@ out/
 
 # WebStorm
 .idea/
+
+# dotenv
+.env*

client/.gitignore

@@ -1,6 +1,6 @@
 # Client Frontend
 
-An electron app with 3 layers of authentication that you can opt-into which includes a regular password, a motion-sensor password, and a facial recognition system. The algorithms for all of these were developed by us and allows you to securely access your account. The app allows you to interact with our cloud-based storage, allowing you to upload, download, and delete things from your own storage which are isolated to each account.
+An electron app with 3 layers of authentication that you can opt-into which includes a regular password, a motion-sensor password, and a facial recognition system. The algorithms for all of these were developed by us and allow you to securely access your account. The app allows you to interact with our cloud-based storage, allowing you to upload, download, and delete things from your own storage which are isolated to each account.
 
 ## Technologies Used
 
@@ -10,10 +10,11 @@ We used Electron Forge to quickly design, develop, and publish our cross-platfor
 
 1. Install dependencies with `npm i`
 
-2. Modify the `.env.example` file to the new hostnames. Rename the file from `.env.example` to `.env`.
-   a. In `forge.config.js` find `devContentSecurityPolicy` and add the hostnames that you added to this field.
+2. Modify the [`main.js`](/client/src/main.js) and [`preload.js`](/client/src/preload.js) files with your preferred hostnames (or leave them as is to use our deployed backend). Then, in [`forge.config.js`](/client/forge.config.js) find `devContentSecurityPolicy` and add the hostnames that you added to this field.
+   - `API_ENDPOINT = <SERVER_API_ENDPOINT>`. This is the address for the backend server. 
+   - `PICO_API_ENDPOINT = <PICO IP ADDRESS>` where Pico IP address is the address to connect with the Pico microcontroller.
 
-3. Run with `npm start` to launch in development mode
+3. Run `npm start` to launch the application in development mode
 
 ## Packaging Instructions
 

client/README.md

@@ -63,7 +63,7 @@
     "@mui/icons-material": "^5.11.16",
     "@mui/lab": "^5.0.0-alpha.126",
     "@mui/material": "^5.13.3",
-    "dotenv": "^16.0.3",
+    "dotenv": "^16.1.4",
     "electron-squirrel-startup": "^1.0.0",
     "mime": "^3.0.0",
     "node-fetch": "^3.3.1",

client/package-lock.json

@@ -4,8 +4,10 @@ const { readFileSync, writeFile } = require("node:fs");
 const { desktopCapturer } = require("electron");
 require("dotenv").config();
 
-require('update-electron-app')({
-  updateInterval: '1 hour',
+API_ENDPOINT = "https://3fa.bxian03.systems/";
+
+require("update-electron-app")({
+  updateInterval: "1 hour",
 });
 
 app.commandLine.appendSwitch("ignore-certificate-errors");
@@ -30,7 +32,7 @@ const createWindow = () => {
   });
 
   // send API_ENDPOINT to renderer on the "API_ENDPOINT" channel
-  mainWindow.webContents.send("API_ENDPOINT", process.env.API_ENDPOINT);
+  mainWindow.webContents.send("API_ENDPOINT", API_ENDPOINT);
 
   // and load the index.html of the app.
   mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);

client/package.json

@@ -4,16 +4,19 @@
 
 const { contextBridge, ipcRenderer, app } = require("electron");
 
+API_ENDPOINT = "https://3fa.bxian03.systems/";
+PICO_API_ENDPOINT = "http://192.168.1.153";
+
 // 'internal' channel is used for internal stuff
 contextBridge.exposeInMainWorld("internal", {
   // get video feed from camera
   getVideoFeed: (callback) => ipcRenderer.on("camera:live-feed", callback),
   // exposes the getAPIEndpoint function to get the API endpoint from env
-  getAPIEndpoint: process.env.API_ENDPOINT,
+  getAPIEndpoint: API_ENDPOINT,
   // prompts the user to select a directory to place the download in
   openFile: () => ipcRenderer.invoke("dialog:openFile"),
   getFileData: (filePath) => ipcRenderer.invoke("fs:readFile", filePath),
-  getPicoEndpoint: process.env.PICO_API_ENDPOINT,
+  getPicoEndpoint: PICO_API_ENDPOINT,
   // saves the file to file/path with fileName
   saveFile: (file, path, fileName) => ipcRenderer.send("save-file", file, path, fileName),
 });