feat: runtime env variable

.dockerignore

@@ -1,4 +1,103 @@
+# add git-ignore syntax here of things you don't want copied into docker image
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# OSX Operating System Files
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+/build
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+/.pnp
+.pnp.js
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# Transpiled JavaScript files from Typescript
+/dist
+/out/
+
+# Cache used by TypeScript's incremental build
+*.tsbuildinfo
+
+# vercel
+.vercel
+
+# Experiment
+prisma
+
+# misc
+*.pem
+
+# IDE
+.idea
+.vscode
+
+# Git
 .git
+.gitignore
 .github
+
+# Docs
+docs/
+README.md
+
+# Other
 .maintain
 !.maintain/docker/nginx/
+!.maintain/docker/entrypoint.sh
+.storybook
+
+# Environment File
+.env

.env-example → .env-template

@@ -13,7 +13,5 @@ VUE_APP_PASSWORD=
 VUE_APP_MIXPANEL_TOKEN=
 VUE_APP_SENTRY_DSN=
 VUE_APP_PINATA_GATEWAY=
-VUE_APP_PINATA_KEY=
-VUE_APP_PINATA_SECRET_KEY=
 VUE_APP_PINATA_JWT_KEY=
 VUE_APP_PINATA_REQUIRED_DOCUMENT=

.maintain/docker/Dockerfile

@@ -1,18 +1,28 @@
-# build stage
-FROM node:16.11.1 as builder
+# Dependencies stage
+FROM node:16.16.0-alpine3.16 AS dependencies
 WORKDIR /app
 COPY package*.json ./
-RUN npm ci
+RUN npm config set '@bit:registry' https://node.bit.dev
+RUN npm ci --ignore-scripts
+
+# Builder stage
+FROM node:16.16.0-alpine3.16 as builder
+WORKDIR /app
+# Copy from dependencies stage
+COPY --from=dependencies /app/node_modules ./node_modules
 COPY . .
+ENV NODE_ENV production
 RUN npm run build
 
-# production stage
-FROM nginx:stable-alpine as runner
-LABEL network.debio.image.authors="debio.dev@blocksphere.id"
-WORKDIR /usr/share/nginx/html
-COPY ./.maintain/docker/nginx/nginx.conf /etc/nginx/nginx.conf
+# Runner stage
+FROM nginx:1.22.0-alpine as runner
+LABEL debio.network.image.authors="devops@debio.network"
 RUN rm /etc/nginx/conf.d/default.conf
 COPY ./.maintain/docker/nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf
+COPY ./.maintain/docker/nginx/nginx.conf /etc/nginx/nginx.conf
+# Copy from builder stage
 COPY --from=builder /app/dist /usr/share/nginx/html
+COPY ./.maintain/docker/entrypoint.sh /usr/share/nginx/
+ENTRYPOINT ["/usr/share/nginx/entrypoint.sh"]
 EXPOSE 80
 CMD ["nginx", "-g", "daemon off;"]

.maintain/docker/entrypoint.sh

@@ -0,0 +1,26 @@
+#!/bin/sh
+
+JSON_STRING='window.configs = { \
+  "NODE_ENV":"'"${NODE_ENV}"'", \
+  "VUE_APP_VERSION":"'"${VUE_APP_VERSION}"'", \
+  "VUE_APP_RECAPTCHA_SITE_KEY":"'"${VUE_APP_RECAPTCHA_SITE_KEY}"'", \
+  "VUE_APP_ROLE":"'"${VUE_APP_ROLE}"'", \
+  "VUE_APP_DEBIO_USE_TOKEN_NAME":"'"${VUE_APP_DEBIO_USE_TOKEN_NAME}"'", \
+  "VUE_APP_DEBIO_DAI_TOKEN_ADDRESS":"'"${VUE_APP_DEBIO_DAI_TOKEN_ADDRESS}"'", \
+  "VUE_APP_DEBIO_ESCROW_ETH_ADDRESS":"'"${VUE_APP_DEBIO_ESCROW_ETH_ADDRESS}"'", \
+  "VUE_APP_DEBIO_SUBSTRATE_WS":"'"${VUE_APP_DEBIO_SUBSTRATE_WS}"'", \
+  "VUE_APP_WEB3_RPC":"'"${VUE_APP_WEB3_RPC}"'", \
+  "VUE_APP_BACKEND_API":"'"${VUE_APP_BACKEND_API}"'", \
+  "VUE_APP_DEBIO_API_KEY":"'"${VUE_APP_DEBIO_API_KEY}"'", \
+  "VUE_APP_USERNAME":"'"${VUE_APP_USERNAME}"'", \
+  "VUE_APP_PASSWORD":"'"${VUE_APP_PASSWORD}"'", \
+  "VUE_APP_MIXPANEL_TOKEN":"'"${VUE_APP_MIXPANEL_TOKEN}"'", \
+  "VUE_APP_SENTRY_DSN":"'"${VUE_APP_SENTRY_DSN}"'", \
+  "VUE_APP_PINATA_GATEWAY":"'"${VUE_APP_PINATA_GATEWAY}"'", \
+  "VUE_APP_PINATA_JWT_KEY":"'"${VUE_APP_PINATA_JWT_KEY}"'", \
+  "VUE_APP_PINATA_REQUIRED_DOCUMENT":"'"${VUE_APP_PINATA_REQUIRED_DOCUMENT}"'" \
+}'
+
+sed -i "s@// CONFIGURATIONS_PLACEHOLDER@${JSON_STRING}@" /usr/share/nginx/html/index.html
+
+exec "$@"

.maintain/docker/nginx/nginx.conf

@@ -17,11 +17,8 @@ http {
                       '"$http_user_agent" "$http_x_forwarded_for"';
 
     access_log  /var/log/nginx/access.log  main;
-
-    sendfile        on;
-    #tcp_nopush     on;
-
+
+    sendfile           on;
     keepalive_timeout  65;
-    gzip  on;
     include /etc/nginx/conf.d/*.conf;
 }

public/index.html

@@ -8,6 +8,9 @@
     <title><%= htmlWebpackPlugin.options.title %></title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
+    <script>
+      // CONFIGURATIONS_PLACEHOLDER
+    </script>
   </head>
   <body>
     <noscript>

src/components/NavigationDrawer.vue

@@ -104,6 +104,7 @@
 <script>
 import { mapState } from "vuex";
 import { bookIcon, alertIcon } from "@debionetwork/ui-icons"
+import getEnv from "@/utils/env"
 
 export default {
   name: "NavigationDrawer",
@@ -145,7 +146,7 @@ export default {
 
   created() {
     this.setActiveMenu(this.$route.name)
-    this.version = `v${process.env.VUE_APP_VERSION}`
+    this.version = `v${getEnv("VUE_APP_VERSION")}`
   },
 
   computed: {

src/components/SetKeystorePasswordDialog.vue

@@ -82,6 +82,7 @@ import {mapActions, mapState, mapMutations} from "vuex"
 import VueRecaptcha from "vue-recaptcha"
 import apiClientRequest from "@/lib/api"
 import rulesHandler from "@/constants/rules"
+import getEnv from "@/utils/env"
 
 export default {
   name: "SetKeystorePasswordDialog",
@@ -113,7 +114,7 @@ export default {
       }
     },
     sitekey() {
-      return process.env.VUE_APP_RECAPTCHA_SITE_KEY
+      return getEnv("VUE_APP_RECAPTCHA_SITE_KEY")
     },
     ...mapState({
       substrateApi: (state) => state.substrate.api,

src/lib/api/index.js

@@ -1,6 +1,7 @@
 import axios from "axios"
 import * as Sentry from "@sentry/vue"
 import VueRouter from "@/router"
+import getEnv from "../../utils/env"
 
 // EXPORT API COLLECTIONS HERE
 export * from "./categories"
@@ -15,11 +16,11 @@ export * from "./notification"
 // AXIOS INSTANCE EXPORT BY DEFAULT
 // PLEASE DISCUSS BEFORE YOU WANT TO EDIT THIS SCRIPT
 const apiClientRequest = axios.create({
-  baseURL: process.env.VUE_APP_BACKEND_API,
+  baseURL: getEnv("VUE_APP_BACKEND_API"),
   headers: { "Content-Type": "application/json" },
   auth: {
-    username: process.env.VUE_APP_USERNAME,
-    password: process.env.VUE_APP_PASSWORD
+    username: getEnv("VUE_APP_USERNAME"),
+    password: getEnv("VUE_APP_PASSWORD")
   }
 })
 

src/lib/metamask/wallet.js

@@ -1,6 +1,7 @@
 import store from "../../store"
 // import appConfig from '@/lib/app-config'
 import BigNumber from "bignumber.js"
+import getEnv from "../../utils/env"
 
 export async function getWalletAddress() {
   const accounts = await window.ethereum.request({ method: "eth_requestAccounts" })
@@ -38,7 +39,7 @@ export async function addTokenDAI() {
       params: {
         type: "ERC20", // Initially only supports ERC20, but eventually more!
         options: {
-          address: process.env.VUE_APP_DEBIO_DAI_TOKEN_ADDRESS, // The address that the token is at.
+          address: getEnv("VUE_APP_DEBIO_DAI_TOKEN_ADDRESS"), // The address that the token is at.
           symbol: "DAI", // A ticker symbol or shorthand, up to 5 chars.
           decimals: 18, // The number of decimals in the token
           image: "https://s2.coinmarketcap.com/static/img/coins/64x64/4943.png" // A string url of the token logo
@@ -144,7 +145,7 @@ export async function transfer(data) {
 
   let receipt;
   let contractAddress;
-  contractAddress = process.env.VUE_APP_DEBIO_DAI_TOKEN_ADDRESS;
+  contractAddress = getEnv("VUE_APP_DEBIO_DAI_TOKEN_ADDRESS");
   receipt = await sendTransaction(contractAddress, raw, data.from);
 
   return { data, receipt }

src/lib/pinata-proxy.js

@@ -6,15 +6,16 @@ import {
   downloadDocumentFileInBrowser,
   downloadJson
 } from "@debionetwork/pinata-ipfs"
+import getEnv from "../utils/env"
 
-const pinataJwtKey = process.env.VUE_APP_PINATA_JWT_KEY
+const pinataJwtKey = getEnv("VUE_APP_PINATA_JWT_KEY")
 
 export const uploadFile = val => {
   const options = {
     pinataMetadata: {
       name: val.title,
       keyvalues: {
-        required: process.env.VUE_APP_PINATA_REQUIRED_DOCUMENT,
+        required: getEnv("VUE_APP_PINATA_REQUIRED_DOCUMENT"),
         type: val.type,
         fileSize: val.size,
         date: +new Date()
@@ -38,7 +39,7 @@ export const uploadFile = val => {
 }
 
 export const getFileUrl = cid => {
-  return `${process.env.VUE_APP_PINATA_GATEWAY}/${cid}`
+  return `${getEnv("VUE_APP_PINATA_GATEWAY")}/${cid}`
 }
 
 export const downloadFile = async (ipfsLink, withMetaData = false) => {

src/main.js

@@ -9,12 +9,13 @@ import * as Sentry from "@sentry/vue"
 import { Integrations } from "@sentry/tracing"
 import VueMixpanel from "vue-mixpanel"
 import "./plugins/debionetwork-ui-components"
+import getEnv from "./utils/env"
 
 Vue.use(VueMixpanel, {
-  token: process.env.VUE_APP_MIXPANEL_TOKEN
+  token: getEnv("VUE_APP_MIXPANEL_TOKEN")
 })
 
-const SENTRY_DSN = process.env.VUE_APP_SENTRY_DSN
+const SENTRY_DSN = getEnv("VUE_APP_SENTRY_DSN")
 
 if (SENTRY_DSN) {
   Sentry.init({

src/router/index.js

@@ -6,6 +6,7 @@ import labRoutes from "./routes/lab"
 import doctorRoutes from "./routes/doctor"
 import hospitalRoutes from "./routes/hospital"
 import requestServiceRoute from "./routes/requestService"
+import getEnv from "../utils/env"
 
 Vue.use(VueRouter)
 
@@ -20,7 +21,7 @@ const routes = [
 
 const router = new VueRouter({
   mode: "history",
-  base: process.env.BASE_URL,
+  base: getEnv("BASE_URL"),
   routes,
   scrollBehavior() {
     return { x: 0, y: 0 }

src/store/auth/index.js

@@ -1,4 +1,5 @@
 import localStorage from "../../lib/local-storage"
+import getEnv from "../../utils/env"
 
 const defaultState = {
   role: null,
@@ -27,10 +28,10 @@ export default {
   },
   actions: {
     async initApp({ commit }) {
-      const tokenName = process.env.VUE_APP_DEBIO_USE_TOKEN_NAME
-      const escrowETHAddress = process.env.VUE_APP_DEBIO_ESCROW_ETH_ADDRESS
-      const substrateWs = process.env.VUE_APP_DEBIO_SUBSTRATE_WS
-      const web3Rpc = process.env.VUE_APP_WEB3_RPC
+      const tokenName = getEnv("VUE_APP_DEBIO_USE_TOKEN_NAME")
+      const escrowETHAddress = getEnv("VUE_APP_DEBIO_ESCROW_ETH_ADDRESS")
+      const substrateWs = getEnv("VUE_APP_DEBIO_SUBSTRATE_WS")
+      const web3Rpc = getEnv("VUE_APP_WEB3_RPC")
       const configApp = {
         tokenName,
         escrowETHAddress,

src/store/metamask/contracts/index.js

@@ -1,3 +1,5 @@
+import getEnv from "../../../utils/env"
+
 const ERC20Interface = require("./abi/ERC20Interface.json")
 
 const defaultState = {
@@ -18,7 +20,7 @@ export default {
     initContracts({ commit, rootState }) {
       const { web3 } = rootState.metamask
       let ERC20InterfaceContract;
-      let contractAddress = process.env.VUE_APP_DEBIO_DAI_TOKEN_ADDRESS;
+      let contractAddress = getEnv("VUE_APP_DEBIO_DAI_TOKEN_ADDRESS");
       ERC20InterfaceContract = new web3.eth.Contract(ERC20Interface, contractAddress);
 
       commit("SET_CONTRACT_ERC20Interface", ERC20InterfaceContract)

src/store/wallet/index.js

@@ -1,4 +1,5 @@
 import apiClientRequest from "@/lib/api";
+import getEnv from "../../utils/env"
 
 const defaultState = {
   resultMsg: null
@@ -15,7 +16,7 @@ export default {
   actions: {
     async walletBinding({commit}, payload) {
       try {
-        const debioApiKey = process.env.VUE_APP_DEBIO_API_KEY
+        const debioApiKey = getEnv("VUE_APP_DEBIO_API_KEY")
         const { data } = await apiClientRequest.post("/substrate/wallet-binding", payload , {
           headers: { "debio-api-key" : debioApiKey }
         })