diff --git a/frontend/.env.dist b/frontend/.env.dist
new file mode 100644
index 000000000..bbd42d002
--- /dev/null
+++ b/frontend/.env.dist
@@ -0,0 +1,3 @@
+LOGIN_API_URL=http://localhost/login_api/
+COMMUNITY_API_STATE_BALANCE_URL=http://localhost/state-balances/
+COMMUNITY_API_TRANSACTION_CREATION_URL=http://localhost/transaction-creations/
\ No newline at end of file
diff --git a/frontend/package.json b/frontend/package.json
index 6d6897726..eab06f5ed 100755
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -29,6 +29,7 @@
     "google-maps": "^3.2.1",
     "nouislider": "^12.1.0",
     "perfect-scrollbar": "^1.3.0",
+    "qrcode": "^1.4.4",
     "quill": "^1.3.6",
     "sweetalert2": "^9.5.4",
     "vee-validate": "^3.2.1",
@@ -42,9 +43,8 @@
     "vue-flatpickr-component": "^8.1.2",
     "vue-good-table": "^2.21.3",
     "vue-i18n": "^8.22.4",
-    "qrcode": "^1.4.4",
-    "vue-qrcode-reader": "^2.3.16",
     "vue-qrcode": "^0.3.5",
+    "vue-qrcode-reader": "^2.3.16",
     "vue-router": "^3.0.6",
     "vue2-transitions": "^0.2.3",
     "vuex": "^3.6.0"
@@ -56,6 +56,7 @@
     "@vue/eslint-config-prettier": "^4.0.1",
     "babel-eslint": "^10.1.0",
     "babel-plugin-component": "^1.1.0",
+    "dotenv-webpack": "^6.0.4",
     "node-sass": "^4.12.0",
     "sass-loader": "^7.1.0",
     "vue-template-compiler": "^2.6.11"
diff --git a/frontend/src/apis/communityAPI.js b/frontend/src/apis/communityAPI.js
index 15284a663..a1da31707 100644
--- a/frontend/src/apis/communityAPI.js
+++ b/frontend/src/apis/communityAPI.js
@@ -1,8 +1,5 @@
 import axios from 'axios';
-
-// TODO move this
-const COMMUNITY_API_STATE_BALANCE_URL = 'http://localhost/state-balances/'
-const COMMUNITY_API_TRANSACTION_CREATION_URL = 'http://localhost/transaction-creations/'
+import CONFIG from '../config'
 
 const apiGet = async (url) => {
   try {
@@ -36,10 +33,10 @@ const apiPost = async (url, payload) => {
 
 const communityAPI = {
   balance: async (session_id) => {
-    return apiGet(COMMUNITY_API_STATE_BALANCE_URL + 'ajaxGetBalance/' + session_id)
+    return apiGet(CONFIG.COMMUNITY_API_STATE_BALANCE_URL + 'ajaxGetBalance/' + session_id)
   },
   transactions: async (session_id) => {
-    return apiGet(COMMUNITY_API_STATE_BALANCE_URL + 'ajaxListTransactions/' + session_id)
+    return apiGet(CONFIG.COMMUNITY_API_STATE_BALANCE_URL + 'ajaxListTransactions/' + session_id)
   },
   create: async (session_id, email, amount, memo, target_date = new Date() ) => {
     const payload = {
@@ -50,7 +47,7 @@ const communityAPI = {
       memo,
       auto_sign: true
     }
-    return apiPost(COMMUNITY_API_TRANSACTION_CREATION_URL + 'ajaxCreate/', payload)
+    return apiPost(CONFIG.COMMUNITY_API_TRANSACTION_CREATION_URL + 'ajaxCreate/', payload)
   }
 }
 
diff --git a/frontend/src/apis/loginAPI.js b/frontend/src/apis/loginAPI.js
index ef0d35045..8756a6840 100644
--- a/frontend/src/apis/loginAPI.js
+++ b/frontend/src/apis/loginAPI.js
@@ -1,7 +1,5 @@
 import axios from 'axios';
-
-// TODO move this
-const LOGIN_API_URL = 'http://localhost/login_api/'
+import CONFIG from '../config'
 
 // control email-text sended with email verification code
 const EMAIL_TYPE = {
@@ -30,11 +28,11 @@ const loginAPI = {
       email,
       password,
     }
-    return apiPost(LOGIN_API_URL + 'unsecureLogin', payload)
+    return apiPost(CONFIG.LOGIN_API_URL + 'unsecureLogin', payload)
   },
   logout: async (session_id) => {
     const payload= { session_id }
-    return apiPost(LOGIN_API_URL + 'logout', payload)
+    return apiPost(CONFIG.LOGIN_API_URL + 'logout', payload)
   },
   create : async (email, first_name, last_name, password) => {
     const payload = {
@@ -45,7 +43,7 @@ const loginAPI = {
       emailType: EMAIL_TYPE.DEFAULT,
       login_after_register: true
     }
-    return apiPost(LOGIN_API_URL + 'createUser', payload)
+    return apiPost(CONFIG.LOGIN_API_URL + 'createUser', payload)
   },     
 }
 
diff --git a/frontend/src/config/index.js b/frontend/src/config/index.js
new file mode 100644
index 000000000..d783842b6
--- /dev/null
+++ b/frontend/src/config/index.js
@@ -0,0 +1,23 @@
+// ATTENTION: DO NOT PUT ANY SECRETS IN HERE (or the .env)
+
+// Load Package Details for some default values
+// const pkg = require('../../package')
+
+const environment = {
+  NODE_ENV: process.env.NODE_ENV,
+  DEBUG: process.env.NODE_ENV !== 'production' || false,
+  PRODUCTION: process.env.NODE_ENV === 'production' || false,
+}
+
+const server = {
+  LOGIN_API_URL: process.env.LOGIN_API_URL || 'http://localhost/login_api/',
+  COMMUNITY_API_STATE_BALANCE_URL: process.env.COMMUNITY_API_STATE_BALANCE_URL || 'http://localhost/state-balances/',
+  COMMUNITY_API_TRANSACTION_CREATION_URL: process.env.COMMUNITY_API_TRANSACTION_CREATION_URL || 'http://localhost/transaction-creations/',
+}
+
+const CONFIG = {
+  ...environment,
+  ...server,
+}
+
+export default CONFIG
diff --git a/frontend/vue.config.js b/frontend/vue.config.js
index e736f9343..537477c6d 100644
--- a/frontend/vue.config.js
+++ b/frontend/vue.config.js
@@ -1,4 +1,5 @@
 const path = require('path');
+const dotenv = require('dotenv-webpack');
 
 function resolveSrc(_path) {
   return path.join(__dirname, _path);
@@ -20,7 +21,11 @@ module.exports = {
       alias: {
         assets: resolveSrc('src/assets')
       }
-    }
+    },
+    plugins: [
+      new dotenv()
+    ]
+    
   },
   css: {
     // Enable CSS source maps.
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 4ba4377ee..9c5ab1e10 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -3539,11 +3539,25 @@ dot-prop@^5.2.0:
   dependencies:
     is-obj "^2.0.0"
 
+dotenv-defaults@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/dotenv-defaults/-/dotenv-defaults-2.0.1.tgz#ea6f9632b3b5cc55e48b736760def5561f1cb7c0"
+  integrity sha512-ugFCyBF7ILuwpmznduHPQZBMucHHJ8T4OBManTEVjemxCm2+nqifSuW2lD2SNKdiKSH1E324kZSdJ8M04b4I/A==
+  dependencies:
+    dotenv "^8.2.0"
+
 dotenv-expand@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/dotenv-expand/-/dotenv-expand-5.1.0.tgz#3fbaf020bfd794884072ea26b1e9791d45a629f0"
   integrity sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==
 
+dotenv-webpack@^6.0.4:
+  version "6.0.4"
+  resolved "https://registry.yarnpkg.com/dotenv-webpack/-/dotenv-webpack-6.0.4.tgz#4874045d408598e45a95519d3cc71017c91c9104"
+  integrity sha512-WiTPNLanDNJ1O8AvgkBpsbarw78a4PMYG2EfJcQoxTHFWy+ji213HR+3f4PhWB1RBumiD9cbiuC3SNxJXbBp9g==
+  dependencies:
+    dotenv-defaults "^2.0.1"
+
 dotenv@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-7.0.0.tgz#a2be3cd52736673206e8a85fb5210eea29628e7c"