Dev to PROD (#1012)

* `hot-fix` for #974

* 🔥hot fix/prod h2h issues (#982)

* `update` README.md

* `issue` #972 #976

* `issue` #972

* `deepsource` JS-0357

* `deepsource` JS-0128

* `deepsource` JS-0051

* `deepsource` JS-0116

* `deepsource` JS-0246

* `deepsource` JS-0241

* `deepsource` JS-0241

* `deepsource` JS-0123

* `deepsource` JS-0356

* Update/fixture odds status ns 2 (#985)

* `hot-fix` for #974 (#975)

* `🔥hot-fix` to PROD (#983)

* `hot-fix` for #974

* 🔥hot fix/prod h2h issues (#982)

* `update` README.md

* `issue` #972 #976

* `issue` #972

* `deepsource` JS-0357

* `deepsource` JS-0128

* `deepsource` JS-0051

* `deepsource` JS-0116

* `deepsource` JS-0246

* `deepsource` JS-0241

* `deepsource` JS-0241

* `deepsource` JS-0123

* `deepsource` JS-0356

* issue #957

* Enhance/feature docker deploy (#1011)

* `update` logs for `PROD` server

* `update` for `Makefile`

* `update` for `.dockerignore`

* `setup` of `Docker` development env

* `update` for `package.json` with `scripts:`

* `.gitignore` update

* `update` for `Docker` in `PROD` deployment

* `update` Makefile

* `update` for `README.md`

* `update` express server for `https`

* add `new` deploy script with `Github Actions`

* `update` github actions test

* `revert` for `http` only support

* `update` for `Makefile`

* `update` for `deploy.yml`

* `revert` for `http` only support

* `add` for `https` deploy

* `update` - `Makefile`

* `update` - `my-server.js`

* issue `990`

* issue `990` - `V1`

* issue #949

* `update` packages

* `update` for `github/actions`

* issue #986

* `logs` update

* `update` for `settings.json`

* `update` issue #986

* `update` for `mobile` view `auth`

* `revert` express for `heroku`

* `revert` express for `heroku`

* `revert` express for `heroku`

* `revert` for `DEV` test `heroku`

* `revert` for `DEV` test `heroku`

* `revert` for `DEV` test `heroku`

* `add` back `AuthWidget`

* issue #1004

* issue #1004

* issue #1004 `checkout`

* `update` example widget

* issue #1004

* issue #1004 `dark-mode` hovers

* issue #1004 `🐞 debug`

* issue #1004 `🐞 debug`

* issue #1004

* issue #1004 `🐞 debug update`

* `revert` to `PROD` of `express-server`

* `deepsource` JS-0239

* `deepsource` JS-0239

* `deepsource` JS-0242

* `deepsource` JS-T1001

.dockerignore

@@ -1,2 +1,2 @@
-node_modules
+node_modules/
 npm-debug.log

.github/workflows/deploy.yml

@@ -0,0 +1,36 @@
+# ....................................
+# ... GITHUB ACIONS CI/CD WORKFLOW ...
+# ....................................
+# DESCRIPTION
+# ....................................
+# This Github Action is responsible with the
+# auto-deployment of the main (branch) to the
+# location of the server
+# ....................................
+
+name: 🚀 Deployment
+# [ℹ] when to trigger this project
+on:
+  push:
+    branches: [main]
+# [ℹ] JOBS TO DO WITH GITHUB WORFLOWS;
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+    - name: executing remote ssh commands using password
+      uses: appleboy/[email protected]
+      # [ℹ] declaring ENV variables to be used in the project-CI/CD
+      with:
+        host: ${{secrets.WEB_SERVER_HOST}}
+        username: ${{secrets.WEB_SERVER_USERNAME}}
+        key: ${{secrets.WEB_SERVER_KEY}}
+        port: ${{secrets.WEB_SERVER_PORT}}
+        script: | 
+          # [ℹ] Navigate to target project directory
+          cd web/scores
+          # [ℹ] Update the directory with latests changes
+          git pull origin enhance/feature-docker-deploy
+          # [ℹ] Run target makefile command
+          make update-scores-web

.gitignore

@@ -4,6 +4,7 @@ node_modules
 /.svelte-kit
 /package
 /gif
+certs/*
 
 # [CRITICAL TO BE UN-TRACKED]
 .env

.vscode/settings.json

@@ -19,6 +19,12 @@
       "backgroundColor": "black",
       "overviewRulerColor": "grey"
     },
+    {
+      "text": "DOC:",
+      "color": "#ffffff",
+      "backgroundColor": "blue",
+      "overviewRulerColor": "grey"
+    },
     {
       "text": "IMPORTANT",
       "color": "#ffffff",

CONTRIBUTING/EXAMPLE_WIDGET.svelte

@@ -0,0 +1,38 @@
+<!-- ===============
+COMPONENT JS (w/ TS)
+=================-->
+
+<script lang="ts">
+
+  // ~~~~~~~~~~~~~~~~~~~~~
+  //  COMPONENT VARIABLES
+  // ~~~~~~~~~~~~~~~~~~~~~
+
+  export const EXAMPLE_VALUE
+  
+  const EXAMPLE_VALUE
+
+  // ~~~~~~~~~~~~~~~~~~~~~
+  //  COMPONENT METHODS
+  // ~~~~~~~~~~~~~~~~~~~~~
+
+  function do_something() {}
+
+  // ~~~~~~~~~~~~~~~~~~~~~
+  // VIEWPORT CHANGES
+  // ~~~~~~~~~~~~~~~~~~~~~
+
+</script>
+
+<!-- ===============
+COMPONENT HTML 
+=================-->
+
+<!-- HTML GOES HERE -->
+
+<!-- ===============
+COMPONENT STYLE
+=================-->
+
+<style>
+</style>

Dockerfile

@@ -29,5 +29,6 @@ WORKDIR /app
 COPY --from=build /app .
 COPY . .
 
-EXPOSE 3000
-CMD ["node", "./build"]
+EXPOSE 5055
+# CMD ["node", "./build"]
+CMD ["npm", "start"]

Dockerfile.dev

@@ -0,0 +1,29 @@
+# https://hub.docker.com/_/node
+
+# ==== Builder Image
+FROM node:16.17.0-alpine as build
+
+WORKDIR /app
+
+# [ℹ] Installs required node packages
+COPY package.json package-lock.json ./
+# RUN apk add --no-cache git
+# [ℹ] Installs required APK packages:
+# [ℹ] https://pkgs.alpinelinux.org/packages
+# [ℹ] example-use: https://superuser.com/questions/1055060/how-to-install-a-specific-package-version-in-alpine
+# [ℹ] example-use: https://superuser.com/questions/1198215/fixate-version-alpine-linux-apk-package-in-container
+RUN apk add --no-cache \
+  python3=3.10.9-r0 \
+  make=4.3-r0 \
+  g++=11.2.1_git20220219-r2 \
+  && npm i --omit=optional
+
+# [ℹ] Builds node application
+COPY . .
+
+# Expose port 3000 for the SvelteKit app and 24678 for Vite's HMR
+EXPOSE 5055
+EXPOSE 24678
+
+# CMD ["node", "./build"]
+CMD ["npm", "run", "dev-docker"]

Makefile

@@ -1,3 +1,23 @@
+# ===========
+# PRODUCTION
+# ===========
+
+start:
+	echo 'Starting PROD container'
+	docker-compose -f docker-compose.yml up -d
+
+log-listen:
+	echo 'Starting PROD container'
+	docker-compose -f docker-compose.yml up
+
+update-scores-web:
+	echo 'Updating PROD Scores Web container...'
+	git pull origin enhance/feature-docker-deploy
+	-docker rm $$(docker stop $$(docker ps -a -q --filter="name=scores_scores_web_1" --format="{{.ID}}"))
+	-docker rmi $$(docker images -q scores_web)
+	-docker rmi $$(docker images --filter "dangling=true" -q --no-trunc)
+	docker-compose -f docker-compose.yml up -d
+
 # ===========
 # DEVELOPMENT
 # ===========
@@ -6,9 +26,23 @@ dev-start:
 	echo 'Starting DEV Environment'
 	npm run dev
 	echo 'Removing Old DEV Logs'
-	rm -r ./datalog/
+	-rm -r ./datalog/*
+	echo 'DEV Ready!'
+
+dev-docker-start:
+	echo 'Starting DEV - Docker Environment'
+	echo 'Removing Old DEV Logs'
+	-rm -r ./datalog/*
+	docker-compose -f docker-compose.dev.yml up
 	echo 'DEV Ready!'
 
 dev-clean:
 	echo 'Removing Old DEV Logs'
-	rm -r ./datalog/
+	rm -r ./datalog/
+
+# from Develop and assuming your master is up to date with origin/master
+# git-post-main-pr:
+# 	git checkout main
+# 	git pull origin main
+# 	git checkout dev
+# 	git reset --hard main

README.md

@@ -47,7 +47,31 @@ This project is dependent on the following libraries and technologies:
 
 ### Dev Environment
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+> There are a few ways in which you can start working with development, all listed below:
+
+1. ⭐️ [Preferred]
+
+Using `GitHub | Codespaces`. To get started simply launch the
+`dev` branch and once the `codespace` has successfully loaded 
+check for `node` and `npm` to match those in the `package.json > engines`.
+If versions do not match, run the following commands:
+
+```
+npm install -g [email protected]
+npm install
+```
+
+---
+
+2. `Local Dev`
+
+Clone the latest `main` branch and begin development:
+
+```bash
+npm install (or `pnpm install` or `yarn`)
+```
+
+and start the development server:
 
 ```bash
 npm run dev
@@ -56,15 +80,26 @@ npm run dev
 npm run dev -- --open
 ```
 
-### Dev Environment [Codespaces]
+---
 
-If you're using `codespaces` enabled for the `scores-platform` development - simply launch the
-`dev` branch and once the `codespace` has successfully loaded run the following commands:
+3. `Docker DEV`
 
+If you do not have the supported/defined `node` and `npm` versions
+installed on your local machine, you can opt to use the configured `Docker`
+DEV environemnt.
+
+For this you will need:
+  - `Docker Desktop` downloded on your local machine,
+  - `Makefile` (or `Node`)
+
+```bash
+make dev-docker-start
+
+# OR if no Make installed
+npm run docker-dev-up
 ```
-npm install -g [email protected]
-npm install
-```
+
+`NOTE:` 🔥 Hot-reload enabled for `Docker DEV`
 
 ### Production Environment
 

docker-compose.dev.yml

@@ -0,0 +1,32 @@
+# Please refer https://aka.ms/HTTPSinContainer on how to setup an https developer certificate for your ASP .NET Core service.
+
+version: '3.4'
+
+services:
+
+  scores_web:
+    image: scores_web
+    restart: always
+    environment:
+      PORT: ${PORT}
+      VITE_HASURA_DB_URL: ${VITE_HASURA_DB_URL}
+      VITE_HASURA_DB_TOKEN: ${VITE_HASURA_DB_TOKEN}
+      VITE_FIREBASE_DB_API_KEY: ${VITE_FIREBASE_DB_API_KEY}
+      VITE_FIREBASE_DB_AUTH_DOMAIN: ${VITE_FIREBASE_DB_AUTH_DOMAIN}
+      VITE_FIREBASE_DB_PROJECT_ID: ${VITE_FIREBASE_DB_PROJECT_ID}
+      VITE_FIREBASE_DB_DATABASE_URL: ${VITE_FIREBASE_DB_DATABASE_URL}
+      VITE_REDIS_HOST: ${VITE_REDIS_HOST}
+      VITE_REDIS_PORT: ${VITE_REDIS_PORT}
+      VITE_REDIS_PASS: ${VITE_REDIS_PASS}
+      VITE_REDIS_CACHE_DB: ${VITE_REDIS_CACHE_DB}
+      VITE_REDIS_BULL_DB: ${VITE_REDIS_BULL_DB}
+    build:
+      context: .
+      dockerfile: ./Dockerfile.dev
+    # NOTE: enalbe-DEV hot-reload [INPORTANT]
+    volumes:
+      - .:/app
+      - /app/node_modules # path as its own volume to avoid copying over local Node modules to Docker
+    ports:
+      - 5055:5055
+      - 24678:24678

docker-compose.yml

@@ -0,0 +1,31 @@
+# Please refer https://aka.ms/HTTPSinContainer on how to setup an https developer certificate for your ASP .NET Core service.
+
+version: '3.4'
+
+services:
+
+  scores_web:
+    image: scores_web
+    restart: always
+    environment:
+      PORT: ${PORT}
+      VITE_HASURA_DB_URL: ${VITE_HASURA_DB_URL}
+      VITE_HASURA_DB_TOKEN: ${VITE_HASURA_DB_TOKEN}
+      VITE_FIREBASE_DB_API_KEY: ${VITE_FIREBASE_DB_API_KEY}
+      VITE_FIREBASE_DB_AUTH_DOMAIN: ${VITE_FIREBASE_DB_AUTH_DOMAIN}
+      VITE_FIREBASE_DB_PROJECT_ID: ${VITE_FIREBASE_DB_PROJECT_ID}
+      VITE_FIREBASE_DB_DATABASE_URL: ${VITE_FIREBASE_DB_DATABASE_URL}
+      VITE_REDIS_HOST: ${VITE_REDIS_HOST}
+      VITE_REDIS_PORT: ${VITE_REDIS_PORT}
+      VITE_REDIS_PASS: ${VITE_REDIS_PASS}
+      VITE_REDIS_CACHE_DB: ${VITE_REDIS_CACHE_DB}
+      VITE_REDIS_BULL_DB: ${VITE_REDIS_BULL_DB}
+    build:
+      context: .
+      dockerfile: ./Dockerfile
+    volumes:
+      - ./certs:/certs # IMPORTANT
+    ports:
+      - 5055:5055
+      - 443:443 # IMPORTANT
+      - 80:80   # IMPORTANT

my-server.js

@@ -1,13 +1,23 @@
 // [ℹ] https://github.com/sveltejs/kit/tree/master/packages/adapter-node#custom-server
 // [ℹ] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
-
 import express from 'express';
+import http from 'http';
+import https from 'https';
+
 import { handler } from './build/handler.js';
 // import sslRedirect from 'heroku-ssl-redirect';
 import compression from 'compression'; // https://expressjs.com/en/resources/middleware/compression.html
 import * as sslify from 'express-sslify';
 import * as requestIp from 'request-ip'; // https://www.npmjs.com/package/request-ip
 
+import fs from 'fs';
+
+const options = {
+    key: fs.readFileSync('./certs/privkey.pem'),
+    cert: fs.readFileSync('./certs/cert.pem'),
+  }
+;
+
 const app = express();
 
 /**
@@ -65,12 +75,12 @@ app.get('/getClientIP', (req, res) => {
  * [ℹ] https://jaketrent.com/post/https-redirect-node-heroku
  * [ℹ] https://webdva.github.io/how-to-force-express-https-tutorial 
 */
-app.use((req, res, next) => {
-  if (req.header('x-forwarded-proto') !== 'https')
-    res.redirect(`https://${req.header('host')}${req.url}`);
-  else
-    next();
-});
+// app.use((req, res, next) => {
+//   if (req.header('x-forwarded-proto') !== 'https')
+//     res.redirect(`https://${req.header('host')}${req.url}`);
+//   else
+//     next();
+// });
 
 /**
  * [ℹ] https://www.npmjs.com/package/express-sslify
@@ -91,6 +101,18 @@ app.use(handler);
  * [ℹ] initialize app;
  * [ℹ] https://stackoverflow.com/questions/15693192/heroku-node-js-error-web-process-failed-to-bind-to-port-within-60-seconds-o 
 */
-app.listen(process.env.PORT || 5000, () => {
-	console.log('listening on port 5000');
+// app.listen(process.env.PORT, () => {
+// 	console.log(`listening on port ${process.env.PORT}`);
+// });
+
+// ~~~~~~~~~~~~~~~~~~~~~~
+// APP SPIN-UP [PROD] [V2]
+// ~~~~~~~~~~~~~~~~~~~~~~
+
+http.createServer(app).listen(80, () => {
+  console.log(`[HTTP | Server]: Server is running on port: ${80}`);
+});
+
+https.createServer(options, app).listen(443, () => {
+  console.log(`[HTTPS | Server]: Server is running on port: ${443}`);
 });