expose local web server using ngrok (#43)

* Integrated Ngrok Adjusted docker-compose.yml to run ngrok using my personal authentication token * add environment variable for ngrok authtoken * Add ngrok set-up instructions in README.md * updating ngrok authtoken as variable / exposing port 5001 for backend * environment variable for ngrok authtoken instead of hardcoding * typo * update readme * delete ngrok container * Delete .DS_Store * run linter --------- Co-authored-by: aayushh-patell <[email protected]> Co-authored-by: mat-ng <[email protected]>
uwblueprint · Jun 7, 2024 · bb3a4a3 · bb3a4a3
1 parent 8bab113
commit bb3a4a3
Show file tree

Hide file tree

Showing 15 changed files with 66 additions and 25 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -106,6 +106,37 @@ Open Prisma studio:
 npx prisma studio
 ```
 
+## Ngrok
+### Setup
+1. Create an [ngrok](https://dashboard.ngrok.com/signup) account
+
+2. Store your personal ngrok authentication token as an environment variable in the .env file of the root directory:
+```
+NGROK_AUTHTOKEN=<your_ngrok_auth_token>
+```
+
+3. Run the application:
+```bash
+docker compose up --build
+```
+
+### Troubleshooting
+
+If another service is occupying port 5001, identify the PID of the service (macOS):
+```bash
+sudo lsof -i :5001
+```
+
+Kill the occupying service:
+```bash
+sudo kill <PID>
+```
+
+Run the application again:
+```bash
+docker compose up --build
+```
+
 ## The Team
 ### Term 1 (W24):
 **Project Lead:** N/A<br>

diff --git a/backend/typescript/Dockerfile b/backend/typescript/Dockerfile
@@ -9,14 +9,20 @@ COPY package.json yarn.lock tsconfig.json ./
 
 RUN echo "deb http://archive.debian.org/debian stretch main" > /etc/apt/sources.list
 
-# libcurl3 is required for mongodb-memory-server, which is used for testing
-RUN apt-get update && apt-get install -y libcurl3
+# Install dependencies
+RUN apt-get update && apt-get install -y libcurl4 curl unzip
+
+# Install ngrok using curl
+RUN curl -o ngrok-stable-linux-amd64.zip https://bin.equinox.io/c/4VmDzA7iaHb/ngrok-stable-linux-amd64.zip && \
+    unzip ngrok-stable-linux-amd64.zip && \
+    mv ngrok /usr/local/bin/ && \
+    rm ngrok-stable-linux-amd64.zip
 
 RUN yarn install
 
 COPY . ./
 
 RUN npx prisma generate
 
-EXPOSE 5000
+EXPOSE 5001
 ENTRYPOINT ["yarn", "dev"]
diff --git a/backend/typescript/package.json b/backend/typescript/package.json
@@ -13,7 +13,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@prisma/client": "^5.11.0",
+    "@prisma/client": "^5.14.0",
     "@types/graphql-upload": "^8.0.6",
     "@types/json2csv": "^5.0.3",
     "@types/multer": "^1.4.6",
@@ -74,7 +74,7 @@
     "mongodb-memory-server": "^6.9.6",
     "nodemon": "^2.0.7",
     "prettier": "^2.2.1",
-    "prisma": "^5.11.0",
+    "prisma": "^5.14.0",
     "ts-jest": "^27.0.3",
     "typescript": "^4.1.5"
   },

diff --git a/backend/typescript/prisma/schema.prisma b/backend/typescript/prisma/schema.prisma
@@ -1,5 +1,6 @@
 generator client {
   provider = "prisma-client-js"
+  binaryTargets = ["native", "linux-arm64-openssl-3.0.x"]
 }
 
 datasource db {

diff --git a/backend/typescript/server.ts b/backend/typescript/server.ts
@@ -57,7 +57,7 @@ firebaseAdmin.initializeApp({
   }),
 });
 
-app.listen({ port: process.env.PORT || 5000 }, () => {
+app.listen({ port: process.env.PORT || 5001 }, () => {
   /* eslint-disable-next-line no-console */
-  console.info(`Server is listening on port ${process.env.PORT || 5000}!`);
+  console.info(`Server is listening on port ${process.env.PORT || 5001}!`);
 });
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -10,11 +10,12 @@ services:
       - ./frontend:/app
       - /app/node_modules
     ports:
-      - 3000:3000
+      - "3000:3000"
     environment:
       - CHOKIDAR_USEPOLLING=true
     env_file:
       - ./frontend/.env
+
   ts-backend:
     container_name: de_ts_backend
     build:
@@ -24,7 +25,7 @@ services:
       - ./backend/typescript:/app
       - /app/node_modules
     ports:
-      - 5000:5000
+      - "5001:5001"
     dns:
       - 8.8.8.8
     depends_on:
@@ -33,11 +34,12 @@ services:
     env_file:
       - ./.env
       - ./backend/typescript/.env
+
   db:
     container_name: de_db
     image: postgres:12-alpine
     ports:
-      - 5432:5432
+      - "5432:5432"
     volumes:
       - postgres_data:/var/lib/postgresql/data/
       - ./db-init:/docker-entrypoint-initdb.d
@@ -46,10 +48,9 @@ services:
     environment:
       - POSTGRES_MULTIPLE_DATABASES=${POSTGRES_DB_DEV},${POSTGRES_DB_TEST}
     healthcheck:
-      test: [ "CMD-SHELL", "pg_isready -U postgres" ]
+      test: ["CMD-SHELL", "pg_isready -U postgres"]
       interval: 5s
       timeout: 5s
       retries: 5
-
 volumes:
   postgres_data:
diff --git a/frontend/src/APIClients/AuthAPIClient.ts b/frontend/src/APIClients/AuthAPIClient.ts
@@ -11,7 +11,6 @@ import {
   setLocalStorageObjProperty,
 } from "../utils/LocalStorageUtils";
 
-
 const login = async (
   email: string,
   password: string,
@@ -116,4 +115,11 @@ const refresh = async (): Promise<boolean> => {
   }
 };
 
-export default { login, logout, loginWithGoogle, register, resetPassword, refresh };
+export default {
+  login,
+  logout,
+  loginWithGoogle,
+  register,
+  resetPassword,
+  refresh,
+};
diff --git a/frontend/src/APIClients/EntityAPIClient.ts b/frontend/src/APIClients/EntityAPIClient.ts
@@ -71,7 +71,7 @@ const getFile = async (uuid: string): Promise<string> => {
       headers: { Authorization: bearerToken },
     });
 
-    return data.fileURL
+    return data.fileURL;
   } catch (error) {
     return error;
   }

diff --git a/frontend/src/components/auth/Logout.tsx b/frontend/src/components/auth/Logout.tsx
@@ -3,7 +3,6 @@ import React, { useContext } from "react";
 import authAPIClient from "../../APIClients/AuthAPIClient";
 import AuthContext from "../../contexts/AuthContext";
 
-
 const Logout = (): React.ReactElement => {
   const { authenticatedUser, setAuthenticatedUser } = useContext(AuthContext);
 

diff --git a/frontend/src/components/auth/RefreshCredentials.tsx b/frontend/src/components/auth/RefreshCredentials.tsx
@@ -3,7 +3,6 @@ import React, { useContext } from "react";
 import authAPIClient from "../../APIClients/AuthAPIClient";
 import AuthContext from "../../contexts/AuthContext";
 
-
 const RefreshCredentials = (): React.ReactElement => {
   const { setAuthenticatedUser } = useContext(AuthContext);
 

diff --git a/frontend/src/components/crud/CreateForm.tsx b/frontend/src/components/crud/CreateForm.tsx
@@ -83,7 +83,9 @@ const CreateForm = (): React.ReactElement => {
     if (fileField) {
       multipartFormData.append("file", fileField);
     }
-    const result = await EntityAPIClient.create({ formData: multipartFormData });
+    const result = await EntityAPIClient.create({
+      formData: multipartFormData,
+    });
     setData(result);
   };
   return (

diff --git a/frontend/src/components/crud/DisplayTableContainer.tsx b/frontend/src/components/crud/DisplayTableContainer.tsx
@@ -3,7 +3,6 @@ import React, { useState, useEffect } from "react";
 import BTable from "react-bootstrap/Table";
 import { HeaderGroup, useTable, Column } from "react-table";
 
-
 import EntityAPIClient, {
   EntityResponse,
 } from "../../APIClients/EntityAPIClient";
@@ -149,7 +148,6 @@ const DisplayTableContainer: React.FC = (): React.ReactElement | null => {
   }, []);
 
   const downloadEntityFile = async (fileUUID: string) => {
-
     const data = await EntityAPIClient.getFile(fileUUID);
     downloadFile(data, "file");
   };

diff --git a/frontend/src/components/crud/UpdateForm.tsx b/frontend/src/components/crud/UpdateForm.tsx
@@ -91,10 +91,9 @@ const UpdateForm = (): React.ReactElement => {
     if (fileField) {
       multipartFormData.append("file", fileField);
     }
-    const result = await EntityAPIClient.update(
-      formData.id,
-      { entityData: multipartFormData }
-    );
+    const result = await EntityAPIClient.update(formData.id, {
+      entityData: multipartFormData,
+    });
     setData(result);
   };
   return (

diff --git a/frontend/src/components/pages/__tests__/Default.test.tsx b/frontend/src/components/pages/__tests__/Default.test.tsx
@@ -7,7 +7,6 @@ import Default from "../Default";
 // https://jestjs.io/docs/tutorial-react
 // https://reactjs.org/docs/testing.html
 
-
 describe("Default page", () => {
   it("Should render Create Entity button", () => {
     const page = render(<Default />);