Make api url configurable in index.html

.drone.yml

@@ -38,8 +38,8 @@ steps:
     commands:
       - yarn --frozen-lockfile
       - yarn run lint
-      - "echo '{\"VIKUNJA_API_BASE_URL\": \"/api/v1/\"}' > /drone/src/public/config.json" # Override config
       - yarn run build
+      - sed -i 's/http\:\/\/localhost\:8080\/api\/v1/\/api\/v1/g' dist/index.html # Override the default api url used for developing
 
   - name: static
     image: kolaente/zip
@@ -112,8 +112,8 @@ steps:
     commands:
       - yarn --frozen-lockfile
       - yarn run lint
-      - "echo '{\"VIKUNJA_API_BASE_URL\": \"/api/v1/\"}' > /drone/src/public/config.json" # Override config
       - yarn run build
+      - sed -i 's/http\:\/\/localhost\:8080\/api\/v1/\/api\/v1/g' dist/index.html # Override the default api url used for developing
 
   - name: static
     image: kolaente/zip

Dockerfile

@@ -5,11 +5,12 @@ WORKDIR /build
 
 COPY .  ./
 
-# Override config
-RUN echo '{"VIKUNJA_API_BASE_URL": "/api/v1/"}' > /build/public/config.json && \
+RUN \
   # Build the frontend
   yarn install --frozen-lockfile && \
-  yarn run build
+  yarn run build && \
+  # Override config
+  sed -i 's/http\:\/\/localhost\:8080\/api\/v1/\/api\/v1/g' dist/index.html
 
 # Stage 2: copy 
 FROM nginx

public/config.json

@@ -1,3 +0,0 @@
-{
-  "VIKUNJA_API_BASE_URL": "http://localhost:8080/api/v1/"
-}

public/index.html

@@ -25,5 +25,13 @@
 </noscript>
 <div id="app"></div>
 <!-- built files will be auto injected -->
+<script>
+    //
+	// This variable points the frontend to the api.
+	// It has to be the full url, including the last /api/v1 part and port.
+	// You can change this if your api is not reachable on the same port as the frontend.
+	window.API_URL = 'http://localhost:8080/api/v1'
+    //
+</script>
 </body>
 </html>

src/http-common/index.js

@@ -1,6 +1,5 @@
 import axios from 'axios'
-let config = require('../../public/config.json')
 
 export const HTTP = axios.create({
-  baseURL: config.VIKUNJA_API_BASE_URL
+  baseURL: window.API_URL
 })

src/models/user.js

@@ -1,5 +1,4 @@
 import AbstractModel from './abstractModel'
-import config from '../../public/config'
 
 export default class UserModel extends AbstractModel {
 	constructor(data) {
@@ -19,6 +18,6 @@ export default class UserModel extends AbstractModel {
 	}
 
 	getAvatarUrl(size = 50) {
-		return `${config.VIKUNJA_API_BASE_URL}${this.username}/avatar?size=${size}`
+		return `${window.API_URL}${this.username}/avatar?size=${size}`
 	}
 }

src/services/abstractService.js

@@ -2,8 +2,6 @@ import axios from 'axios'
 import {reduce, replace} from 'lodash'
 import { objectToSnakeCase } from '../helpers/case'
 
-let config = require('../../public/config.json')
-
 export default class AbstractService {
 
 	/////////////////////////////
@@ -33,7 +31,7 @@ export default class AbstractService {
 	 */
 	constructor(paths) {
 		this.http = axios.create({
-			baseURL: config.VIKUNJA_API_BASE_URL,
+			baseURL: window.API_URL,
 			headers: {
 				'Content-Type': 'application/json',
 			},