Use global variables for pusher config instead of dotenv-webpack

package.json

@@ -30,7 +30,6 @@
     "alertify.js": "^1.0.12",
     "axios": "^0.15.3",
     "blueimp-md5": "^2.3.0",
-    "dotenv-webpack": "^1.5.4",
     "intersection-observer": "^0.2.0",
     "ismobilejs": "^0.4.0",
     "local-storage": "^1.4.2",

resources/assets/js/services/socket.js

@@ -1,4 +1,3 @@
-import process from 'process'
 import Pusher from 'pusher-js'
 
 import { userStore } from '../stores'
@@ -10,18 +9,18 @@ export const socket = {
 
   async init () {
     return new Promise((resolve, reject) => {
-      if (!process.env.PUSHER_APP_KEY) {
+      if (!window.PUSHER_APP_KEY) {
         return resolve()
       }
 
-      this.pusher = new Pusher(process.env.PUSHER_APP_KEY, {
+      this.pusher = new Pusher(window.PUSHER_APP_KEY, {
         authEndpoint: '/api/broadcasting/auth',
         auth: {
           headers: {
             Authorization: `Bearer ${ls.get('jwt-token')}`
           }
         },
-        cluster: process.env.PUSHER_APP_CLUSTER,
+        cluster: window.PUSHER_APP_CLUSTER,
         encrypted: true
       })
 

resources/views/client-js-vars.blade.php

@@ -0,0 +1,8 @@
+<script>
+    {{-- 
+        We actually should use a library like dotenv-webpack to load .env variables.
+        Unfortunately, can't get it to work for now :(
+    --}}
+    window.PUSHER_APP_KEY = "{{ env('PUSHER_APP_KEY') }}";
+    window.PUSHER_APP_CLUSTER = "{{ env('PUSHER_APP_CLUSTER') }}";
+</script>

resources/views/index.blade.php

@@ -23,6 +23,7 @@
     <div id="app"></div>
 
     <noscript>It may sound funny, but Koel requires JavaScript to sing. Please enable it.</noscript>
+    @include('client-js-vars')
     <script src="{{ App::rev('/js/app.js') }}"></script>
 </body>
 </html>

resources/views/remote.blade.php

@@ -24,6 +24,7 @@
     <div id="app"></div>
 
     <noscript>It may sound funny, but Koel requires JavaScript to sing. Please enable it.</noscript>
+    @include('client-js-vars')
     <script src="{{ App::rev('/js/remote/app.js') }}"></script>
 </body>
 </html>

yarn.lock

@@ -2183,16 +2183,6 @@ dot-prop@^3.0.0:
   dependencies:
     is-obj "^1.0.0"
 
-dotenv-webpack@^1.5.4:
-  version "1.5.4"
-  resolved "https://registry.yarnpkg.com/dotenv-webpack/-/dotenv-webpack-1.5.4.tgz#9c92e46e412a1cfbc60217ed33d69d2bbfddbf9f"
-  dependencies:
-    dotenv "^4.0.0"
-
-dotenv@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-4.0.0.tgz#864ef1379aced55ce6f95debecdce179f7a0cd1d"
-
 duplexer2@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.1.4.tgz#8b12dab878c0d69e3e7891051662a32fc6bddcc1"