diff --git a/website/client/package-lock.json b/website/client/package-lock.json
index d75b3b07be..f70989a808 100644
--- a/website/client/package-lock.json
+++ b/website/client/package-lock.json
@@ -6776,6 +6776,11 @@
       "integrity": "sha512-zzK8+ByrzvOL6N92hRewwUKL0wN0TOaIuUjX0Jj8lraxWvr5wHYs2YTjaj2lstF+8qMv5cmPPef47va8NT8lDw==",
       "dev": true
     },
+    "jquery": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.4.1.tgz",
+      "integrity": "sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw=="
+    },
     "js-levenshtein": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz",
diff --git a/website/client/package.json b/website/client/package.json
index ac2a34374e..2d34b99794 100644
--- a/website/client/package.json
+++ b/website/client/package.json
@@ -18,6 +18,7 @@
     "habitica-markdown": "^1.3.0",
     "hellojs": "^1.18.1",
     "intro.js": "^2.9.3",
+    "jquery": "^3.4.1",
     "smartbanner.js": "^1.14.5",
     "vue": "^2.6.10",
     "vue-mugen-scroll": "^0.2.6",
@@ -40,6 +41,7 @@
     "pug-plain-loader": "^1.0.0",
     "sass": "^1.19.0",
     "sass-loader": "^8.0.0",
-    "vue-template-compiler": "^2.6.10"
+    "vue-template-compiler": "^2.6.10",
+    "webpack": "^4.41.0"
   }
 }
diff --git a/website/client/src/app.vue b/website/client/src/app.vue
index bdc896c4e4..cfbcf29354 100644
--- a/website/client/src/app.vue
+++ b/website/client/src/app.vue
@@ -198,7 +198,7 @@ import { CONSTANTS, getLocalSetting, removeLocalSetting } from '@/libs/userlocal
 import svgClose from '@/assets/svg/close.svg';
 import bannedAccountModal from '@/components/bannedAccountModal';
 
-const COMMUNITY_MANAGER_EMAIL = process.env.EMAILS.COMMUNITY_MANAGER_EMAIL; // eslint-disable-line
+const COMMUNITY_MANAGER_EMAIL = process.env.EMAILS_COMMUNITY_MANAGER_EMAIL; // eslint-disable-line
 
 export default {
   mixins: [notifications, spellsMixin],
@@ -247,7 +247,7 @@ export default {
       const min = 1;
       const randomNumber = Math.random() * (numberOfTips - min) + min;
       const tipNumber = Math.floor(randomNumber);
-      this.currentTipNumber = tipNumber;
+      this.currentTipNumber = tipNumber; // eslint-disable-line vue/no-side-effects-in-computed-properties
 
       return this.$t(`tip${tipNumber}`);
     },
diff --git a/website/client/src/components/avatar.vue b/website/client/src/components/avatar.vue
index 6f45dfd6f1..0699576841 100644
--- a/website/client/src/components/avatar.vue
+++ b/website/client/src/components/avatar.vue
@@ -180,6 +180,8 @@ export default {
       if (!this.avatarOnly && this.member.items.currentMount && this.member.items.currentMount.indexOf('Kangaroo') !== -1) {
         return 'offset-kangaroo';
       }
+
+      return null;
     },
   },
   methods: {
diff --git a/website/client/src/components/bannedAccountModal.vue b/website/client/src/components/bannedAccountModal.vue
index 20f613f4a6..191a18e211 100644
--- a/website/client/src/components/bannedAccountModal.vue
+++ b/website/client/src/components/bannedAccountModal.vue
@@ -15,7 +15,7 @@
 <script>
 import markdownDirective from '@/directives/markdown';
 
-const COMMUNITY_MANAGER_EMAIL = process.env.EMAILS.COMMUNITY_MANAGER_EMAIL; // eslint-disable-line
+const COMMUNITY_MANAGER_EMAIL = process.env.EMAILS_COMMUNITY_MANAGER_EMAIL; // eslint-disable-line
 
 export default {
   directives: {
diff --git a/website/client/src/components/chat/autoComplete.vue b/website/client/src/components/chat/autoComplete.vue
index f46c1521b2..12ae32ca16 100644
--- a/website/client/src/components/chat/autoComplete.vue
+++ b/website/client/src/components/chat/autoComplete.vue
@@ -110,8 +110,8 @@ export default {
     searchResults () {
       if (!this.searchActive) return [];
       if (!this.atRegex.exec(this.text)) return [];
-      this.currentSearch = this.atRegex.exec(this.text)[0];
-      this.currentSearch = this.currentSearch.substring(1, this.currentSearch.length);
+      this.currentSearch = this.atRegex.exec(this.text)[0]; // eslint-disable-line vue/no-side-effects-in-computed-properties
+      this.currentSearch = this.currentSearch.substring(1, this.currentSearch.length); // eslint-disable-line vue/no-side-effects-in-computed-properties
 
       return this.tmpSelections.filter((option) => {
         return option.displayName.toLowerCase().indexOf(this.currentSearch.toLowerCase()) !== -1 || option.username && option.username.toLowerCase().indexOf(this.currentSearch.toLowerCase()) !== -1;
diff --git a/website/client/src/components/inventory/equipment/index.vue b/website/client/src/components/inventory/equipment/index.vue
index b64fa06d94..27cf0cf25e 100644
--- a/website/client/src/components/inventory/equipment/index.vue
+++ b/website/client/src/components/inventory/equipment/index.vue
@@ -333,7 +333,7 @@ export default {
 
 
       each(this.gearTypesToStrings, (string, type) => {
-        this.viewOptions[type].firstRender = false;
+        this.viewOptions[type].firstRender = false; // eslint-disable-line vue/no-side-effects-in-computed-properties
       });
 
       return gearItemsByType;
@@ -372,7 +372,7 @@ export default {
       });
 
       each(this.gearClassesToStrings, (string, klass) => {
-        this.viewOptions[klass].firstRender = false;
+        this.viewOptions[klass].firstRender = false; // eslint-disable-line vue/no-side-effects-in-computed-properties
       });
 
       return gearItemsByClass;
diff --git a/website/client/src/components/payments/amazonButton.vue b/website/client/src/components/payments/amazonButton.vue
index 381469e2c1..4f1ffbef75 100644
--- a/website/client/src/components/payments/amazonButton.vue
+++ b/website/client/src/components/payments/amazonButton.vue
@@ -8,8 +8,6 @@ import { mapState } from '@/libs/store';
 import uuid from 'uuid';
 import paymentsMixin from '@/mixins/payments';
 
-const AMAZON_PAYMENTS = process.env.AMAZON_PAYMENTS; // eslint-disable-line
-
 export default {
   mixins: [paymentsMixin],
   data () {
@@ -77,7 +75,7 @@ export default {
     showButton () {
       window.OffAmazonPayments.Button( // eslint-disable-line new-cap
         this.buttonId, // ID of the button
-        AMAZON_PAYMENTS.SELLER_ID,
+        process.env.AMAZON_PAYMENTS_SELLER_ID,
         {
           type: 'PwA',
           color: 'Gold',
diff --git a/website/client/src/components/payments/amazonModal.vue b/website/client/src/components/payments/amazonModal.vue
index 0b8526f9b3..e947b27aef 100644
--- a/website/client/src/components/payments/amazonModal.vue
+++ b/website/client/src/components/payments/amazonModal.vue
@@ -35,7 +35,6 @@ import { mapState } from '@/libs/store';
 import { CONSTANTS, setLocalSetting } from '@/libs/userlocalManager';
 import pick from 'lodash/pick';
 
-const AMAZON_PAYMENTS = process.env.AMAZON_PAYMENTS; // eslint-disable-line
 const habiticaUrl = `${location.protocol}//${location.host}`;
 
 export default {
@@ -108,7 +107,7 @@ export default {
   methods: {
     amazonInitWidgets () {
       let walletParams = {
-        sellerId: AMAZON_PAYMENTS.SELLER_ID, // @TODO: Import
+        sellerId: process.env.AMAZON_PAYMENTS_SELLER_ID, // @TODO: Import
         design: {
           designMode: 'responsive',
         },
@@ -123,7 +122,7 @@ export default {
           this.amazonPayments.billingAgreementId = billingAgreement.getAmazonBillingAgreementId();
 
           new window.OffAmazonPayments.Widgets.Consent({
-            sellerId: AMAZON_PAYMENTS.SELLER_ID,
+            sellerId: process.env.AMAZON_PAYMENTS_SELLER_ID,
             amazonBillingAgreementId: this.amazonPayments.billingAgreementId,
             design: {
               designMode: 'responsive',
diff --git a/website/client/src/components/shops/seasonal/index.vue b/website/client/src/components/shops/seasonal/index.vue
index 5777e98f4e..827d4a38f1 100644
--- a/website/client/src/components/shops/seasonal/index.vue
+++ b/website/client/src/components/shops/seasonal/index.vue
@@ -402,7 +402,7 @@
         // If we are out of gear, show the spells
         // @TODO: add dates to check instead?
         if (seasonal.featured.items.length === 0) {
-          this.featuredGearBought = true;
+          this.featuredGearBought = true; // eslint-disable-line vue/no-side-effects-in-computed-properties
           if (seasonal.categories.length > 0) {
             seasonal.featured.items = seasonal.featured.items.concat(seasonal.categories[0].items);
           }
diff --git a/website/client/src/components/shops/shopItem.vue b/website/client/src/components/shops/shopItem.vue
index 8518da44bd..6ccf2bd9d6 100644
--- a/website/client/src/components/shops/shopItem.vue
+++ b/website/client/src/components/shops/shopItem.vue
@@ -215,6 +215,7 @@ div
     computed: {
       showNotes () {
         if (['armoire', 'potion'].indexOf(this.item.path) > -1) return true;
+        return false;
       },
       currencyClass () {
         if (this.item.currency && this.icons[this.item.currency]) {
diff --git a/website/client/src/components/tasks/approvalHeader.vue b/website/client/src/components/tasks/approvalHeader.vue
index 2570cc6be2..577aea9f83 100644
--- a/website/client/src/components/tasks/approvalHeader.vue
+++ b/website/client/src/components/tasks/approvalHeader.vue
@@ -43,6 +43,8 @@ export default {
         return this.$t('userCountRequestsApproval', {userCount: approvalsLength});
       } else if (approvalsLength === 1 && userIsRequesting || this.task.group.approval && this.task.group.approval.requested && !this.task.group.approval.approved) {
         return this.$t('youAreRequestingApproval');
+      } else {
+        return null;
       }
     },
     userIsAdmin () {
diff --git a/website/client/src/components/tasks/taskModal.vue b/website/client/src/components/tasks/taskModal.vue
index ebe5d71373..cceb4c6387 100644
--- a/website/client/src/components/tasks/taskModal.vue
+++ b/website/client/src/components/tasks/taskModal.vue
@@ -790,6 +790,8 @@ export default {
         return task.everyX === 1 ? this.$t('month') : this.$t('months');
       } else if (task.frequency === 'yearly') {
         return task.everyX === 1 ? this.$t('year') : this.$t('years');
+      } else {
+        return null;
       }
     },
     repeatsOn: {
diff --git a/website/client/src/components/userMenu/inbox.vue b/website/client/src/components/userMenu/inbox.vue
index ead40cd44d..4afb7d9be9 100644
--- a/website/client/src/components/userMenu/inbox.vue
+++ b/website/client/src/components/userMenu/inbox.vue
@@ -377,10 +377,9 @@ export default {
       // Vue-subscribe to changes
       const subScribeToUpdate = this.messagesLoading || this.updateConversionsCounter > -1;
 
-
       const selectedConversationKey = this.selectedConversation.key;
       const selectedConversation = this.messagesByConversation[selectedConversationKey];
-      this.messages = selectedConversation || [];
+      this.messages = selectedConversation || []; // eslint-disable-line vue/no-side-effects-in-computed-properties
 
       const ordered = orderBy(this.messages, [(m) => {
         return m.timestamp;
@@ -389,6 +388,8 @@ export default {
       if (subScribeToUpdate) {
         return ordered;
       }
+
+      return [];
     },
     filtersConversations () {
       // Vue-subscribe to changes
diff --git a/website/client/src/components/yesterdailyModal.vue b/website/client/src/components/yesterdailyModal.vue
index 080a9feb52..53ceda9658 100644
--- a/website/client/src/components/yesterdailyModal.vue
+++ b/website/client/src/components/yesterdailyModal.vue
@@ -68,7 +68,7 @@ export default {
   computed: {
     ...mapState({user: 'user.data'}),
     tasksByType () {
-      this.dueDate = moment().subtract(1, 'days');
+      this.dueDate = moment().subtract(1, 'days'); // eslint-disable-line vue/no-side-effects-in-computed-properties
 
       return {
         daily: this.yesterDailies,
diff --git a/website/client/src/libs/payments.js b/website/client/src/libs/payments.js
index 813a48e9df..efbafbf710 100644
--- a/website/client/src/libs/payments.js
+++ b/website/client/src/libs/payments.js
@@ -1,7 +1,5 @@
 import getStore from '@/store';
 
-const AMAZON_PAYMENTS = process.env.AMAZON_PAYMENTS; // eslint-disable-line
-const NODE_ENV = process.env.NODE_ENV; // eslint-disable-line
 
 export function setup () {
   const store = getStore();
@@ -10,7 +8,7 @@ export function setup () {
   // Added here to make sure the listener is registered before the script can be executed
   window.onAmazonLoginReady = () => {
     store.state.isAmazonReady = true;
-    window.amazon.Login.setClientId(AMAZON_PAYMENTS.CLIENT_ID);
+    window.amazon.Login.setClientId(process.env.AMAZON_PAYMENTS_CLIENT_ID);
   };
 
   // Load the scripts
@@ -20,7 +18,7 @@ export function setup () {
   let firstScript = document.getElementsByTagName('script')[0];
   amazonScript.type = 'text/javascript';
   amazonScript.async = true;
-  amazonScript.src = `https://static-na.payments-amazon.com/OffAmazonPayments/us/${(AMAZON_PAYMENTS.MODE === 'sandbox' ? 'sandbox/' : '')}js/Widgets.js`;
+  amazonScript.src = `https://static-na.payments-amazon.com/OffAmazonPayments/us/${(process.env.AMAZON_PAYMENTS_MODE === 'sandbox' ? 'sandbox/' : '')}js/Widgets.js`;
   firstScript.parentNode.insertBefore(amazonScript, firstScript);
 
   // Stripe
diff --git a/website/client/src/mixins/notifications.js b/website/client/src/mixins/notifications.js
index 5cf32c457d..76c619ab8a 100644
--- a/website/client/src/mixins/notifications.js
+++ b/website/client/src/mixins/notifications.js
@@ -4,7 +4,7 @@ import { getDropClass, getXPMessage, getSign, round } from '@/libs/notifications
 
 // See https://stackoverflow.com/questions/4187146/truncate-number-to-two-decimal-places-without-rounding
 function toFixedWithoutRounding (num, fixed) {
-  const re = new RegExp(`^-?\\d+(?:\.\\d{0,${(fixed || -1)}})?`);
+  const re = new RegExp(`^-?\\d+(?:\.\\d{0,${(fixed || -1)}})?`); // eslint-disable-line no-useless-escape
   return num.toString().match(re)[0];
 }
 
diff --git a/website/client/vue.config.js b/website/client/vue.config.js
index 8f5f677a24..9c58f8ce61 100644
--- a/website/client/vue.config.js
+++ b/website/client/vue.config.js
@@ -1,15 +1,45 @@
-// TODO abstract from server
 const path = require('path');
+const webpack = require('webpack');
 const nconf = require('nconf');
 const setupNconf = require('../../website/server/libs/setupNconf');
 
 let configFile = path.join(path.resolve(__dirname, '../../config.json'));
 
+// TODO abstract from server
 setupNconf(configFile);
 
 const DEV_BASE_URL = nconf.get('BASE_URL');
 
+const envVars = [
+  'AMAZON_PAYMENTS_SELLER_ID',
+  'AMAZON_PAYMENTS_CLIENT_ID',
+  'AMAZON_PAYMENTS_MODE',
+  'EMAILS_COMMUNITY_MANAGER_EMAIL',
+  'EMAILS_TECH_ASSISTANCE_EMAIL',
+  'EMAILS_PRESS_ENQUIRY_EMAIL',
+  'BASE_URL',
+  'GA_ID',
+  'STRIPE_PUB_KEY',
+  'FACEBOOK_KEY',
+  'GOOGLE_CLIENT_ID',
+  'AMPLITUDE_KEY',
+  'LOGGLY_CLIENT_TOKEN',
+  // TODO necessary? if yes how not to mess up with vue cli? 'NODE_ENV'
+];
+
+const envObject = {};
+
+envVars
+  .forEach(key => {
+    envObject[key] = nconf.get(key);
+  });
+
 module.exports = {
+  configureWebpack: {
+    plugins: [
+      new webpack.EnvironmentPlugin(envObject)
+    ],
+  },
   chainWebpack: config => {
     const pugRule = config.module.rule('pug')