provide config.js

2021-07-28 21:52:12 +02:00 · 2021-07-28 21:52:12 +02:00 · 6bd794ad6b
commit 6bd794ad6b
parent e7730020ef
12 changed files with 40 additions and 26 deletions
--- a/.gitignore
+++ b/.gitignore
@ -2,6 +2,8 @@
 node_modules
 /dist

+# KI
+/public/config.js

 # local env files
 .env.local
--- a/README.md
+++ b/README.md
@ -3,19 +3,28 @@
 [![Build Status](https://drone.wtf-eg.de/api/badges/kompetenzinventar/ki-frontend/status.svg)](https://drone.wtf-eg.de/kompetenzinventar/ki-frontend)

 Vue3 Projekt: 
+
 ## Project setup
 ```
 npm ci
 ```

+### Konfigurationsdatei anpassen
+
+```
+cp public/config.js.dev public/config.js
+vi public/config.js
+```
+
+
 ### Compiles and hot-reloads for development
 ```
-VUE_APP_API_URL=http://localhost:8000 npm run serve
+npm run serve
 ```

 ### Compiles and minifies for production
 ```
-VUE_APP_API_URL=http://localhost:8000 npm run build
+npm run build
 ```

 ### Lints and fixes files
@ -28,9 +37,6 @@ See [Configuration Reference](https://cli.vuejs.org/config/).

 Vorraussetzung: Node & NPM

-### Enviroment Variable
-VUE_APP_API_URL ist die Enviroment Variable mit der die Adresse der API übergeben wird
-

 ## Docker

@ -46,7 +52,7 @@ docker build --target ki-frontend --tag ki_frontend .
 ```
 docker run \
    --name=ki_frontend \
-    -e VUE_APP_API_URL=http://localhost:5000 \
+    -v ${PWD}/public/config.js:/user/share/nginx/html/config.js \
    -p 8000:80 \
    ki_frontend
 ```
--- a/public/config.js.dev
+++ b/public/config.js.dev
@ -0,0 +1,3 @@
+window.ki = {
+  apiUrl: 'http://localhost:5000'
+}
--- a/public/config.js.int
+++ b/public/config.js.int
@ -0,0 +1,3 @@
+window.ki = {
+  apiUrl: 'http://localhost:13338'
+}
--- a/public/index.html
+++ b/public/index.html
@ -4,9 +4,13 @@
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+
    <link rel="icon" type="image/png" href="<%= BASE_URL %>favicon.ico">
    <link rel="icon" type="image/png" href="<%= BASE_URL %>favicon-96x96.png" sizes="96x96">
+
    <title>Kompetenz Inventar der WTF eG</title>
+
+    <script src="<%= BASE_URL %>config.js"></script>
  </head>
  <body>
    <noscript>
--- a/src/App.vue
+++ b/src/App.vue
@ -107,4 +107,4 @@ export default {
    },
  },
 };
-</script>
+</script>
--- a/src/components/AutoComplete.vue
+++ b/src/components/AutoComplete.vue
@ -109,7 +109,7 @@ export default {
  },
  data() {
    return {
-      iconUrl: process.env.VUE_APP_API_URL,
+      iconUrl: this.apiUrl,
      searchText: "",
      contactContent: "",
      searchResults: [],
@ -122,7 +122,7 @@ export default {
    async search() {
      try {
        const request = await this.axios.get(
-          `${process.env.VUE_APP_API_URL}/${this.type}s?search=${this.searchText}`,
+          `${this.apiUrl}/${this.type}s?search=${this.searchText}`,
          {
            headers: {
              Authorization: `Bearer ${localStorage.getItem("token")}`,
@ -204,4 +204,4 @@ export default {
    },
  },
 };
-</script>
+</script>
--- a/src/components/ProfileList.vue
+++ b/src/components/ProfileList.vue
@ -59,8 +59,8 @@ export default {
  },
  data() {
    return {
-      iconUrl: process.env.VUE_APP_API_URL
+      iconUrl: this.apiUrl
    }
  }
 };
-</script>
+</script>
--- a/src/main.js
+++ b/src/main.js
@ -1,4 +1,4 @@
-import { createApp } from 'vue/dist/vue.esm-bundler';
+import { createApp } from 'vue/dist/vue.esm-bundler'
 import App from './App.vue'
 import router from './router'

@ -12,10 +12,6 @@ const app = createApp(App)
 app.use(router)

 app.config.globalProperties.axios=axios
-
-app.config.globalProperties.apiUrl= (process.env.VUE_APP_API_URL ? process.env.VUE_APP_API_URL : '')
+app.config.globalProperties.apiUrl = window.ki.apiUrl

 app.mount('#app')
-
-
-
--- a/src/views/Search.vue
+++ b/src/views/Search.vue
@ -80,7 +80,7 @@ export default {
    async submitSearch() {
      this.showErrorMessage = false;
      try {
-        let url = `${process.env.VUE_APP_API_URL}/users/profiles`;
+        let url = `${this.apiUrl}/users/profiles`;
        if (this.searchText != "") {
          url += `?nickname=${this.searchText}`;
        }
@ -98,4 +98,4 @@ export default {
    },
  },
 };
-</script>
+</script>
--- a/src/views/profile/Edit.vue
+++ b/src/views/profile/Edit.vue
@ -127,7 +127,7 @@
            v-model="profile.address.country"
          />
        </div>
-      </div>      
+      </div>

      <button type="submit" class="btn btn-outline-success mb-4 mt-4 col-12">Speichern</button>
      <div
@ -182,7 +182,7 @@ export default {
  async created() {
    try {
      const userProfile = await axios.get(
-        `${process.env.VUE_APP_API_URL}/users/${localStorage.getItem(
+        `${this.apiUrl}/users/${localStorage.getItem(
          "user_id"
        )}/profile`,
        {
@ -198,7 +198,7 @@ export default {
    async submitForm() {
      try {
        const formSubmitResult = await axios.post(
-          `${process.env.VUE_APP_API_URL}/users/${localStorage.getItem(
+          `${this.apiUrl}/users/${localStorage.getItem(
            "user_id"
          )}/profile`,
          this.profile,
@ -222,4 +222,4 @@ export default {
    }
  },
 };
-</script>
+</script>
--- a/src/views/profile/View.vue
+++ b/src/views/profile/View.vue
@ -44,7 +44,7 @@ export default {
  async created() {
    try {
      const userProfile = await this.axios.get(
-        `${process.env.VUE_APP_API_URL}/users/${this.$route.params.memberId}/profile`,
+        `${this.apiUrl}/users/${this.$route.params.memberId}/profile`,
        {
          headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
        }
@ -55,4 +55,4 @@ export default {
    }
  },
 };
-</script>
+</script>