Merge pull request 'config.js' (#9) from feature-config-js into main
All checks were successful
continuous-integration/drone/push Build is passing

Reviewed-on: #9
This commit is contained in:
weeman 2021-08-02 18:02:10 +02:00
commit cd97f31051
12 changed files with 40 additions and 26 deletions

2
.gitignore vendored
View File

@ -2,6 +2,8 @@
node_modules
/dist
# KI
/public/config.js
# local env files
.env.local

View File

@ -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
```

3
public/config.js.dev Normal file
View File

@ -0,0 +1,3 @@
window.ki = {
apiUrl: 'http://localhost:5000'
}

3
public/config.js.int Normal file
View File

@ -0,0 +1,3 @@
window.ki = {
apiUrl: 'http://localhost:13338'
}

View File

@ -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>

View File

@ -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")}`,

View File

@ -59,7 +59,7 @@ export default {
},
data() {
return {
iconUrl: process.env.VUE_APP_API_URL
iconUrl: this.apiUrl
}
}
};

View File

@ -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')

View File

@ -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}`;
}

View File

@ -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,

View File

@ -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")}` },
}