use relative path for api url, refactor ws and http protocol variables

Author: briancaffey

docker-compose.yml

@@ -73,9 +73,7 @@ services:
       - GITHUB_KEY=${GITHUB_KEY}
       - GOOGLE_OAUTH2_KEY=${GOOGLE_OAUTH2_KEY}
       - FACEBOOK_KEY=${FACEBOOK_KEY}
-      - HTTP_PROTOCOL=http
-      - WS_PROTOCOL=ws
-      - DOMAIN_NAME=${DOMAIN_NAME}
+      - FULL_DOMAIN_NAME=${DOMAIN_NAME}
     restart: "no"
 
   backend: &backend
@@ -182,7 +180,7 @@ services:
       PGADMIN_DEFAULT_EMAIL: pgadmin4@pgadmin.org
       PGADMIN_DEFAULT_PASSWORD: admin
     volumes:
-       - pgadmin:/root/.pgadmin
+      - pgadmin:/root/.pgadmin
     ports:
       - "5050:80"
     depends_on:

gitlab-ci/aws/cdk.yml

@@ -2,7 +2,6 @@
 # and to deploy changes to the frontend and backend
 
 variables:
-  ECR_BASE_URL: ${AWS_ACCOUNT_ID}.dkr.ecr.${AWS_DEFAULT_REGION}.amazonaws.com
   ENVIRONMENT: dev
 
 .Build Quasar PWA Assets:
@@ -11,11 +10,9 @@ variables:
   only:
     - master
   variables:
-    DOMAIN_NAME: ${ENVIRONMENT}.${DOMAIN_NAME}
+    FULL_DOMAIN_NAME: ${ENVIRONMENT}.${DOMAIN_NAME}
     GOOGLE_OAUTH2_KEY: google123
     GITHUB_KEY: github123
-    WS_PROTOCOL: wss
-    HTTP_PROTOCOL: https
   artifacts:
     paths:
       - quasar/dist/pwa

quasar/package.json

@@ -24,6 +24,7 @@
     "highcharts": "8.1.0",
     "highcharts-vue": "1.3.5",
     "js-cookie": "2.2.1",
+    "prettier": "^2.0.5",
     "quasar": "1.10.5",
     "vue-apollo": "3.0.3",
     "vue-i18n": "8.17.4",

quasar/quasar.conf.js

@@ -1,7 +1,7 @@
 // Configuration for your app
 // https://quasar.dev/quasar-cli/quasar-conf-js
 
-module.exports = function(ctx) {
+module.exports = function (ctx) {
   return {
     // app boot file (/src/boot)
     // --> boot files are part of "main.js"
@@ -16,7 +16,7 @@ module.exports = function(ctx) {
       // "roboto-font-latin-ext", // this or either "roboto-font", NEVER both!
 
       "roboto-font", // optional, you are not bound to it
-      "material-icons" // optional, you are not bound to it
+      "material-icons", // optional, you are not bound to it
     ],
 
     framework: {
@@ -66,13 +66,13 @@ module.exports = function(ctx) {
         "QDate",
         "QPopupProxy",
         "QFile",
-        "QCardSection"
+        "QCardSection",
       ],
 
       directives: ["Ripple", "ClosePopup"],
 
       // Quasar plugins
-      plugins: ["Notify", "Cookies"]
+      plugins: ["Notify", "Cookies"],
     },
 
     // env: {
@@ -83,26 +83,18 @@ module.exports = function(ctx) {
     build: {
       env: ctx.dev
         ? {
-            API_URL: JSON.stringify(
-              `${process.env.HTTP_PROTOCOL}://${process.env.DOMAIN_NAME}`
-            ),
-            WS_PING_PONG: JSON.stringify(
-              `${process.env.WS_PROTOCOL}://${process.env.DOMAIN_NAME}/ws/ping-pong/`
-            ),
+            API_URL: JSON.stringify(`http://${process.env.FULL_DOMAIN_NAME}`),
+            WS_URL: JSON.stringify(`ws://${process.env.FULL_DOMAIN_NAME}`),
             GITHUB_KEY: JSON.stringify(process.env.GITHUB_KEY),
             GOOGLE_OAUTH2_KEY: JSON.stringify(process.env.GOOGLE_OAUTH2_KEY),
-            FACEBOOK_KEY: JSON.stringify(process.env.FACEBOOK_KEY)
+            FACEBOOK_KEY: JSON.stringify(process.env.FACEBOOK_KEY),
           }
         : {
-            API_URL: JSON.stringify(
-              `${process.env.HTTP_PROTOCOL}://${process.env.DOMAIN_NAME}`
-            ),
-            WS_PING_PONG: JSON.stringify(
-              `${process.env.WS_PROTOCOL}://${process.env.DOMAIN_NAME}/ws/ping-pong/`
-            ),
+            API_URL: JSON.stringify(`https://${process.env.FULL_DOMAIN_NAME}`),
+            WS_URL: JSON.stringify(`$wss://${process.env.FULL_DOMAIN_NAME}`),
             GITHUB_KEY: JSON.stringify(process.env.GITHUB_KEY),
             GOOGLE_OAUTH2_KEY: JSON.stringify(process.env.GOOGLE_OAUTH2_KEY),
-            FACEBOOK_KEY: JSON.stringify(process.env.FACEBOOK_KEY)
+            FACEBOOK_KEY: JSON.stringify(process.env.FACEBOOK_KEY),
           },
       scopeHoisting: true,
       useNotifier: false,
@@ -119,28 +111,28 @@ module.exports = function(ctx) {
           loader: "eslint-loader",
           exclude: /node_modules/,
           options: {
-            formatter: require("eslint").CLIEngine.getFormatter("stylish")
-          }
+            formatter: require("eslint").CLIEngine.getFormatter("stylish"),
+          },
         });
-      }
+      },
     },
 
     devServer: {
       headers: {
         "Access-Control-Allow-Origin": "*",
         "Access-Control-Allow-Headers":
-          "Origin, X-Requested-With, Content-Type, Accept"
+          "Origin, X-Requested-With, Content-Type, Accept",
       },
       // https: true,
       port: 8080,
-      open: true // opens browser window automatically
+      open: true, // opens browser window automatically
     },
 
     // animations: "all", // --- includes all animations
     animations: "all", //[],
 
     ssr: {
-      pwa: false
+      pwa: false,
     },
 
     pwa: {
@@ -158,30 +150,30 @@ module.exports = function(ctx) {
           {
             src: "statics/icons/icon-128x128.png",
             sizes: "128x128",
-            type: "image/png"
+            type: "image/png",
           },
           {
             src: "statics/icons/icon-192x192.png",
             sizes: "192x192",
-            type: "image/png"
+            type: "image/png",
           },
           {
             src: "statics/icons/icon-256x256.png",
             sizes: "256x256",
-            type: "image/png"
+            type: "image/png",
           },
           {
             src: "statics/icons/icon-384x384.png",
             sizes: "384x384",
-            type: "image/png"
+            type: "image/png",
           },
           {
             src: "statics/icons/icon-512x512.png",
             sizes: "512x512",
-            type: "image/png"
-          }
-        ]
-      }
+            type: "image/png",
+          },
+        ],
+      },
     },
 
     cordova: {
@@ -211,7 +203,7 @@ module.exports = function(ctx) {
       builder: {
         // https://www.electron.build/configuration/configuration
         // appId: "quasarfrontend"
-      }
-    }
+      },
+    },
   };
 };

quasar/src/boot/apollo.js

@@ -7,7 +7,7 @@ import { InMemoryCache } from "apollo-cache-inmemory";
 
 // HTTP connection to the API
 const httpLink = createHttpLink({
-  uri: `${process.env.API_URL}/graphql/`
+  uri: `/graphql/`,
 });
 
 // Cache implementation
@@ -22,18 +22,18 @@ export default ({ app, Vue, store }) => {
     return {
       headers: {
         ...headers,
-        authorization
-      }
+        authorization,
+      },
     };
   });
 
   const apolloClient = new ApolloClient({
     link: authLink.concat(httpLink),
-    cache
+    cache,
   });
 
   const apolloProvider = new VueApollo({
-    defaultClient: apolloClient
+    defaultClient: apolloClient,
   });
 
   Vue.use(VueApollo);

quasar/src/boot/axios.js

@@ -1,9 +1,7 @@
 import axios from "axios";
 
 export default async ({ Vue, store, router }) => {
-  const apiCall = axios.create({
-    baseURL: process.env.API_URL,
-  });
+  const apiCall = axios.create();
 
   apiCall.interceptors.request.use(
     (config) => {

quasar/src/boot/websockets.js

@@ -2,12 +2,12 @@ import VueNativeSock from "vue-native-websocket";
 
 export default ({ store, Vue }) => {
   // something to do
-  Vue.use(VueNativeSock, process.env.WS_PING_PONG, {
+  Vue.use(VueNativeSock, process.env.WS_URL, {
     store,
     format: "json",
     connectManually: true,
     reconnection: true, // (Boolean) whether to reconnect automatically (false)
     reconnectionAttempts: 5, // (Number) number of reconnection attempts before giving up (Infinity),
-    reconnectionDelay: 3000 // (Number) how long to initially wait before attempting a new (1000)
+    reconnectionDelay: 3000, // (Number) how long to initially wait before attempting a new (1000)
   });
 };

quasar/src/pages/Examples/Websockets.vue

@@ -30,14 +30,14 @@
 export default {
   data() {
     return {
-      wsUrl: process.env.WS_PING_PONG,
+      wsUrl: `${process.env.WS_URL}/ws/ping-pong/`,
       pongs: [],
-      showLatency: false
+      showLatency: false,
     };
   },
   created() {
     this.$connect(this.wsUrl, { format: "json" });
-    this.$socket.onmessage = i => {
+    this.$socket.onmessage = (i) => {
       const data = JSON.parse(i["data"]);
       data.vue_recv_pong = new Date().getTime();
       this.pongs.unshift(data);
@@ -49,14 +49,14 @@ export default {
         JSON.stringify({
           message: "ping",
           sender: 1,
-          ts: new Date().getTime()
+          ts: new Date().getTime(),
         })
       );
-    }
+    },
   },
   destroyed() {
     this.$disconnect();
-  }
+  },
 };
 </script>
 

quasar/src/store/social/index.js

@@ -2,18 +2,18 @@ import buildURL from "axios/lib/helpers/buildURL";
 import oauth from "../../utils/oauth";
 
 const state = {
-  oauth
+  oauth,
 };
 
 const getters = {
   oauthUrl: () => {
-    return provider => {
+    return (provider) => {
       const url = state.oauth[provider].url;
       const params = state.oauth[provider].params;
 
       return buildURL(url, params);
     };
-  }
+  },
 };
 
 const actions = {};
@@ -24,5 +24,5 @@ export default {
   state,
   getters,
   actions,
-  mutations
+  mutations,
 };

quasar/src/utils/oauth.js

@@ -8,8 +8,8 @@ const oauth = {
       redirect_uri: `${url}/auth/github/callback`,
       login: "",
       scope: "user",
-      state: "eworifjeovivoiej"
-    }
+      state: "eworifjeovivoiej",
+    },
   },
   "google-oauth2": {
     url: "https://accounts.google.com/o/oauth2/v2/auth",
@@ -20,18 +20,18 @@ const oauth = {
       redirect_uri: `${url}/auth/google-oauth2/callback`,
       state: "eworifjeovivoiej", // TODO: change these
       nonce: "forewijf43oirjoifj",
-      login_hint: ""
-    }
+      login_hint: "",
+    },
   },
   facebook: {
     url: "https://www.facebook.com/v5.0/dialog/oauth",
     params: {
       client_id: process.env.FACEBOOK_KEY,
       redirect_uri: `${url}/auth/facebook/callback`,
       state: "eworifjeovivoiej", // TODO: change these
-      scope: "email"
-    }
-  }
+      scope: "email",
+    },
+  },
 };
 
 export default oauth;