Allow to have runtime configuration

Signed-off-by: Olivier Vernin <olivier.vernin@suse.com>
updatecli · Jul 3, 2023 · a71ceec · a71ceec
1 parent 8ebfc45
commit a71ceec
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 9 deletions.
diff --git a/.gitignore b/.gitignore
@@ -22,4 +22,4 @@ pnpm-debug.log*
 *.sln
 *.sw?
 
-auth_config.json
+public/config.js
diff --git a/README.md b/README.md
@@ -20,5 +20,22 @@ npm run build
 npm run lint
 ```
 
+## Deploy to production
+
+For being able to have runtime configuration, we rely on the file `/usr/share/nginx/html/config.js` with the following content:
+
+```
+const config = (() => {
+  return {
+    "OAUTH_DOMAIN": "oauth domain",
+    "OAUTH_CLIENTID": "xxx",
+    "OAUTH_AUDIENCE": "http://localhost:8080/api"
+  };
+})();
+```
+
+For the local development environment, this file must be located in `public/config.js`.
+It shouldn't be commit to the git repository
+
 ### Customize configuration
 See [Configuration Reference](https://cli.vuejs.org/config/).
diff --git a/package.json b/package.json
@@ -35,6 +35,9 @@
     "env": {
       "node": true
     },
+    "globals": {
+      "config": "readonly"
+    },
     "extends": [
       "plugin:vue/vue3-essential",
       "eslint:recommended"

diff --git a/public/index.html b/public/index.html
@@ -6,6 +6,8 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <!-- docker configurable variables -->
+    <script src="<%= BASE_URL %>config.js"></script>
   </head>
   <body>
     <noscript>

diff --git a/src/main.js b/src/main.js
@@ -4,19 +4,18 @@ import vuetify from './plugins/vuetify'
 import { loadFonts } from './plugins/webfontloader'
 import router from './router'
 import { createAuth0 } from "@auth0/auth0-vue";
-import authConfig from "../auth_config.json";
 
 loadFonts()
 
 createApp(App).use(router)
   .use(vuetify)
   .use(
     createAuth0({
-      domain: authConfig.domain,
-      clientId: authConfig.clientId,
+      domain: config.OAUTH_DOMAIN,
+      clientId: config.OAUTH_CLIENTID,
       authorizationParams: {
         redirect_uri: window.location.origin,
-        audience: authConfig.audience,
+        audience: config.OAUTH_AUDIENCE,
       }
     })
   )

diff --git a/src/views/QuickStart.vue b/src/views/QuickStart.vue
@@ -108,7 +108,6 @@
 import ReleaseFooter from '../components/ReleaseFooter.vue';
 import SideNavigation from '../components/SideNavigation.vue';
 import HeadNavigation from '../components/HeadNavigation.vue';
-import authConfig from "../../auth_config.json";
 
 export default {
   name: 'QuickStartView',
@@ -119,9 +118,9 @@ export default {
   },
 
   data: () => ({
-    oauthclientid: authConfig.clientId,
-    oauthauthdomain: authConfig.domain,
-    oauthaudience: authConfig.audience,
+    oauthclientid: config.OAUTH_CLIENTID ,
+    oauthauthdomain:  config.OAUTH_DOMAIN,
+    oauthaudience: config.OAUTH_AUDIENCE,
     host: location.host,
     externalLinks:[
       {