Add default env file to configure app externally at runtime

CHANGELOG.md

@@ -29,6 +29,8 @@ under `media/create` (playback possible using forked
 [vue-video-player](https://github.com/dasantonym/vue-video-player))
 - Export timelines as CSV
 - Mobile compatiblity for MoSys Editor
+- The file `statics/env.js` can be overwritten to configure
+the frontend at runtime
 
 ### Changed
 

src-electron/main-process/auth-service-electron.js

@@ -13,11 +13,11 @@ const
   keytarAccount = os.userInfo().username
 
 function getAuthenticationURL () {
-  return 'https://' + process.env.AUTH0_DOMAIN + '/authorize?' +
-    'audience=' + process.env.AUTH0_AUDIENCE + '&' +
+  return 'https://' + (window.AUTH0_DOMAIN || process.env.AUTH0_DOMAIN) + '/authorize?' +
+    'audience=' + (window.AUTH0_AUDIENCE || process.env.AUTH0_AUDIENCE) + '&' +
     'scope=openid profile offline_access&' +
     'response_type=code&' +
-    'client_id=' + process.env.AUTH0_CLIENT_ID + '&' +
+    'client_id=' + (window.AUTH0_CLIENT_ID || process.env.AUTH0_CLIENT_ID) + '&' +
     'redirect_uri=' + redirectUri
 }
 
@@ -25,9 +25,9 @@ async function refreshTokens () {
   const refreshToken = await keytar.getPassword(keytarService, keytarAccount)
   if (!refreshToken) return throw new Error('No refresh token found')
 
-  const result = await axios.post(`https://${process.env.AUTH0_DOMAIN}/oauth/token`, {
+  const result = await axios.post(`https://${window.AUTH0_DOMAIN || process.env.AUTH0_DOMAIN}/oauth/token`, {
     grant_type: 'refresh_token',
-    client_id: process.env.AUTH0_CLIENT_ID,
+    client_id: window.AUTH0_CLIENT_ID || process.env.AUTH0_CLIENT_ID,
     refresh_token: refreshToken
   }, {
     headers: {'Content-Type': 'application/json'}
@@ -43,12 +43,12 @@ async function loadTokens (callbackURL) {
 
   const exchangeOptions = {
     'grant_type': 'authorization_code',
-    'client_id': process.env.AUTH0_CLIENT_ID,
+    'client_id': window.AUTH0_CLIENT_ID || process.env.AUTH0_CLIENT_ID,
     'code': query.code,
     'redirect_uri': redirectUri
   }
 
-  const result = await axios.post(`https://${process.env.AUTH0_DOMAIN}/oauth/token`, exchangeOptions, {
+  const result = await axios.post(`https://${window.AUTH0_DOMAIN || process.env.AUTH0_DOMAIN}/oauth/token`, exchangeOptions, {
     headers: {
       'Content-Type': 'application/json'
     }
@@ -66,7 +66,7 @@ async function logout () {
 }
 
 function getLogOutUrl () {
-  return `https://${process.env.AUTH0_DOMAIN}/v2/logout`
+  return `https://${window.AUTH0_DOMAIN || process.env.AUTH0_DOMAIN}/v2/logout`
 }
 
 export {

src/App.vue

@@ -9,7 +9,10 @@
 
 <script>
 export default {
-  name: 'App'
+  name: 'App',
+  mounted () {
+    console.log(window.TRANSCODER_HOST)
+  }
 }
 </script>
 

src/index.template.html

@@ -21,5 +21,6 @@
 <div id="q-app"></div>
 
 <!-- built files will be auto injected here -->
+<script src="statics/env.js" language="JavaScript"></script>
 </body>
 </html>

src/plugins/auth.js

@@ -8,10 +8,10 @@ export default ({ Vue }) => {
   }
   else {
     authService = new AuthService({
-      domain: process.env.AUTH0_DOMAIN,
-      clientID: process.env.AUTH0_CLIENT_ID,
-      redirectUri: process.env.AUTH0_REDIRECT_URL || `${document.location.origin}/users/callback`,
-      audience: process.env.AUTH0_AUDIENCE,
+      domain: window.AUTH0_DOMAIN || process.env.AUTH0_DOMAIN,
+      clientID: window.AUTH0_CLIENT_ID || process.env.AUTH0_CLIENT_ID,
+      redirectUri: `${document.location.origin}/users/callback`,
+      audience: window.AUTH0_AUDIENCE || process.env.AUTH0_AUDIENCE,
       scope: 'openid profile read write',
       responseType: 'token id_token'
     })

src/statics/env.js

+Object.assign(window, {
+  //
+  // HOST CONFIG
+  //
+  API_HOST: 'https://api.motionbank.org',
+  TRANSCODER_HOST: 'https://transcoder.motionbank.org',
+  SOCKETS_HOST: 'https://sockets.motionbank.org',
+  STORAGE_HOST: 'https://storage.motionbank.org',
+  PACKAGER_HOST: 'https://packager.motionbank.org',
+  //
+  // AUTH
+  //
+  AUTH0_CLIENT_ID: '80t5TRU9MVhGDVnZ522CvX4hutBxDB6U',
+  AUTH0_DOMAIN: 'auth.motionbank.org',
+  AUTH0_AUDIENCE: 'https://api.motionbank.org'
+})