Merge pull request #5 from easymirror/add-basics

Webapp

.dockerignore

@@ -0,0 +1,5 @@
+**/.env
+**/.git
+**/.gitignore
+README.md
+node_modules

.env.example

@@ -0,0 +1,5 @@
+# The base URL for local dev
+REACT_APP_BASE_URL_DEV=""
+
+# The base URL for production
+REACT_APP_BASE_URL_PROD=""

.gitignore

@@ -128,3 +128,5 @@ dist
 .yarn/build-state.yml
 .yarn/install-state.gz
 .pnp.*
+.DS_Store
+.env.production

Dockerfile.dev

@@ -0,0 +1,19 @@
+# Use a Node.js image
+FROM node:latest
+
+# Set the working directory
+WORKDIR /app
+
+# Copy the package.json and package-lock.json files
+COPY package*.json yarn.lock ./
+
+# Install dependencies
+RUN yarn install
+
+# Copy everything to the container
+COPY . .
+
+# Expose port
+EXPOSE 3000
+
+CMD ["yarn", "start" ]

Dockerfile.prod

@@ -0,0 +1,33 @@
+# =============================================================================
+# Build phase
+# =============================================================================
+# Use a Node.js image
+FROM node:latest AS builder
+
+# Set the working directory
+WORKDIR /app
+
+# Copy the package.json and package-lock.json files
+COPY package*.json yarn.lock ./
+
+# Install dependencies
+RUN yarn install
+
+# Copy everything to the container
+COPY . .
+
+# Generate build files
+RUN yarn build:prod
+
+# =============================================================================
+# Production Phase
+# =============================================================================
+# We specifify the platform because of compatibility issues when Mac Chips
+# More info: https://stackoverflow.com/questions/74705475/aws-ecs-exec-usr-local-bin-docker-entrypoint-sh-exec-format-error
+FROM --platform=linux/amd64 nginx:latest
+
+COPY --from=builder /app/build /usr/share/nginx/html
+COPY nginx/nginx.conf /etc/nginx/nginx.conf
+
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -1,2 +1,33 @@
 # easymirror-frontend
-Source code to EasyMirror's frontend
+Source code to EasyMirror's frontend.
+
+## Building
+### Dev
+1) Run the [bash file](/build/dev_build.sh) found in [build directory](/build/). This ensures the `.env` file is also passed in.
+2) For a manual build, run: `$ docker build -t easymirror-platform-frontend:latest .`
+
+### Production
+1) Run the [build bash file](/build/prod_build.sh) found in [build directory](/build/). This ensures the `.env` file is also passed in.
+2) For a manual build, run: `$ docker build --file Dockerfile.prod -t easymirror-platform-frontend:latest .`
+
+## File structure
+- The file structure was inspired by this [WebDevSimplified article](https://blog.webdevsimplified.com/2022-07/react-folder-structure/).
+
+Folder  | Description | Example
+------------- | ------------- | -------------
+`src/assets ` | Contains everything that isn’t code related | images, css files, font files, etc
+`src/components `  | Contains subfolder(s) of general components that are used throughout the app | Checkbox Component
+`src/layouts `  | Folder for placing any layout based components | Navbar, Sidebar, etc
+`src/lib`  | Contains wrappers for the various different libraries you use in your project | Wrapping for `fetch()` calls
+`src/pages `  | Contains all pages, one file for each | A home page file
+`src/services `  | Contains all your code for interfacing with any external API. | File for collecting fingerprint data
+`src/utils `  | Contains all utility functions. | Formatters like converting string to type Date
+
+## TODOS
+- [x] The client (Front end) will store refresh token in an httponly cookie and access token in local storage.
+- [x] Display mirror link after successfully uploading file
+- [x] Fix Modal background color
+- [x] Display page for mirror host links
+- [ ] Functionality to delete history
+- [ ] Easier to way get domain name for dev/prod
+- [ ] Mobile support (CSS)

build/dev_build.sh

@@ -0,0 +1,4 @@
+#!/bin/sh
+
+echo "Building container for dev build..."
+docker-compose -f ./docker-compose.yml up -d 

build/prod_build.sh

@@ -0,0 +1,6 @@
+#!/bin/sh
+
+echo "Building container for a production build..."
+docker build \
+--file Dockerfile.prod \
+-t easymirror-platform-frontend:latest .

docker-compose.yml

@@ -0,0 +1,12 @@
+version: '3'
+
+services:
+  frontend:
+    build:
+      context: .
+      dockerfile: Dockerfile.dev
+    image: easymirror-platform-frontend:latest
+    ports:
+      - "3000:3000"
+    env_file:
+      - .env

nginx/nginx.conf

@@ -0,0 +1,26 @@
+user nginx;
+worker_processes auto;
+error_log /var/log/nginx/error.log warn;
+pid /var/run/nginx.pid;
+events {
+	worker_connections 1024;
+}
+http {
+	include /etc/nginx/mime.types;
+	default_type application/octet-stream;
+	log_format main '[$time_local] [$remote_addr - $remote_user] "$request" '
+	'$status $body_bytes_sent "$http_referer" '
+	'"$http_user_agent" "$http_x_forwarded_for"';
+	access_log /var/log/nginx/access.log main;
+	sendfile on;
+  	sendfile_max_chunk 1m; # Limits chunks to 1 Megabytes
+	keepalive_timeout 60;
+	server {
+		listen 80;
+		location / {
+			root /usr/share/nginx/html;
+			index index.html index.htm;
+			try_files $uri $uri/ /index.html;
+		}
+	}
+}