Merge pull request #76 from CPSC319-Winter-term-2/edit-readme

Edit readme

.dockerignore

@@ -2,3 +2,4 @@ node_modules
 docker
 Dockerfile
 .dockerignore
+README.md

Dockerfile

@@ -4,5 +4,6 @@ ENV NODE_ENV=production
 WORKDIR /Alley-HSBC-Frontend
 COPY ["package.json", "package-lock.json*", "./"]
 COPY . .
+ENV GENERATE_SOURCEMAP false
 RUN npm install
 CMD [ "npm", "run", "start-local" ]

README.md

@@ -1 +1,43 @@
 # Alley-HSBC-Frontend
+
+
+## Build docker image from docker file
+1. cd into the root of this repositry.
+2. On Windows
+   * run `docker build --tag <image-name> .`
+
+   On Linux
+   * run `DOCKER_BUILDKIT=1 docker build --tag <image-name> .`
+
+   Where `<image-name>` is the name you give to the image.
+## Deploy in docker (docker-compose)
+1. Deploy using [docker-compose](/docker/docker-compose.yml).
+2. Make sure both docker and docker-compose are installed.
+3. If you pull image teamalley/digital-walkaround from dockerhub
+   * You need to first login to dockerhub by running `docker login` command. The Username and LoginToken are provided under files in docker directory
+
+   If you built your own image
+   * Please Replace the image name in "docker-compose.yml" with `<image-name>`
+
+4. cd into the direct where you store the "docker-compose.yml" file.
+5. * run `docker-compose up -d` to start the service.
+   * run `docker-compose down` to stop the service
+6. You can access it on port 3000 by default. To change the port number, edit docker-compose.yml. Under ports, replace `3000:3000` with `<the port number you want>:3000`. Then stop the service and start it again.
+7. Node: you may exprience issues running the container in machines with limited ram. If the container restarts unexpectedly, try running `docker-compose up` without `-d` option to show the error messages.
+   
+## Deploy directly on a Server
+If You prefer installing it directly or you are expriencing some issues with the docker container.
+Follow the instructions bellow.
+
+1. Make sure you have a server with node v16.14.0 and npm 8.3.1 installed (other versions may work but not guaranteed). A linux machine with `screen` installed is recommended.
+2. clone the repository and `cd` into the root folder of the repository.
+3. If you are installing it on a linux machine with `screen` installed, run `screen -S <name>` to create a new screen. where `<name>` can be any name you choose.
+4. run `npm run start-prod`
+5. if you followed step 3, press `CTRL ^A` then press `D` while holding `CTRL ^A`. The screen will detach.
+6. You can then access it on port 3000
+
+## Setup Reverse Proxy
+You can use Apache, Ngnix or other tools to set up a reverse proxy and connect it to a hostname. [here](https://httpd.apache.org/docs/2.4/howto/reverse_proxy.html) is a guide on apache reverse proxy setup.
+
+## Enable HTTPS
+You might want to enable https to secure your webapp since it includes private information (such as your username and password). [here](https://www.digitalocean.com/community/tutorials/how-to-secure-apache-with-let-s-encrypt-on-ubuntu-20-04) is a guide on enabling https with Let's Entrypt on a Ubuntu server with apache.

docker/DeploymentToken

@@ -1 +0,0 @@
-cf7348ee-36e8-4be5-9a38-af78651023b0

docker/LogInToken

@@ -0,0 +1 @@
+3f1f753e-2269-460f-a606-c4d674fdb1d4

docker/Username

@@ -0,0 +1 @@
+teamalley

docker/docker-compose.yml

@@ -0,0 +1,8 @@
+version: "3"
+services:
+  digital-walkaround:
+    image: teamalley/digital-walkaround
+    container_name: digital-walkaround
+    ports:
+      - 3000:3000
+    restart: unless-stopped

package.json

@@ -26,6 +26,7 @@
     "socket.io-client": "^4.4.1"
   },
   "scripts": {
+    "start-prod": "BUILD_ENV=PROD webpack serve --config webpack.config.ts",
     "start-local": "webpack serve --config webpack.config.ts",
     "start-dev": "BUILD_ENV=DEV webpack serve --config webpack.config.ts",
     "build-local": "BUILD_ENV=LOCAL webpack --config webpack.config.ts",

src/components/home/MeetingsPanel.tsx

@@ -106,7 +106,7 @@ const MeetingsList: React.FC = () => {
             );
           }
         };
-        console.log(meetingMembersString);
+        // console.log(meetingMembersString);
         if ((currentDatemil >= startDatemil && currentDatemil <= endDatemil) || meeting.liveParticipantIds.length > 0) {
           const lastMeetingClass = meetings.length == i ? " lastMeeting" : "";
           i += 1;