Add env variables for frontend

config/webpack/development.js

@@ -1,5 +1,8 @@
 process.env.NODE_ENV = process.env.NODE_ENV || 'development'
 
+const dotenv = require('dotenv')
+dotenv.config({ path: '.env', silent: true })
+
 const environment = require('./environment')
 
 module.exports = environment.toWebpackConfig()

config/webpack/environment.js

@@ -2,6 +2,8 @@ const { environment } = require('@rails/webpacker')
 const { VueLoaderPlugin } = require('vue-loader')
 const vue = require('./loaders/vue')
 const path = require('path')
+const webpack = require('webpack')
+
 environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())
 environment.loaders.prepend('vue', vue)
 environment.loaders.append('audio', {
@@ -24,4 +26,14 @@ const resolve = {
 
 environment.config.merge({ resolve });
 
+const { pusher_cluster: cluster, pusher_key: token, fb_app_id: fbAppID } = process.env
+
+environment.plugins.prepend('DefinePlugin', new webpack.DefinePlugin({
+  __PUSHER__: {
+    token: `"${token}"`,
+    cluster: `"${cluster}"`,
+  },
+  __FB_ID__: `"${fbAppID}"`,
+}))
+
 module.exports = environment