...
 
Commits (3)
  • Konrad Mohrfeldt's avatar
    don’t proxy /media/ path · 71a73093
    Konrad Mohrfeldt authored
    This path is handled by the lohrothek-api django app.
    71a73093
  • Konrad Mohrfeldt's avatar
    fix lint error · e8c054a8
    Konrad Mohrfeldt authored
    e8c054a8
  • Konrad Mohrfeldt's avatar
    improve support for external APIs in development · 47e4fdff
    Konrad Mohrfeldt authored
    The current production deployment of the lohrothek-api project is picky
    when it comes to being a PROXY_TARGET and because the production
    deployment of thekno will use an external origin anyway it’s a good idea
    to support it during development.
    
    Setting VUE_APP_APIORIGIN as an environment variable allows users to set
    the origin of an external API that should be used for data retrieval.
    47e4fdff
......@@ -12,7 +12,13 @@ The project uses a number of external dependencies, that you can install with th
*thekno* ships with fixtures that do not require a backend server, but in case you do want to work with the [Lohrothek REST API](https://git.hack-hro.de/lohro/lohrothek/lohrothek-api) you can do that. The development server started by `npm run serve` will proxy all requests to the `/api/` endpoint to `http://localhost:8000/` by default. This matches the default configuration for the Django webserver. In case you want to use a different backend server or have started Django on a non-standard port you can provide the `PROXY_TARGET` environment variable to `npm run serve`. A development server with the production-backend available on [thek.lohro.de](https://thek.lohro.de) can be started like this:
```sh
PROXY_TARGET="https://thek.lohro.de/" npm run serve
PROXY_TARGET=http://localhost:5000 npm run serve
```
Alternatively you can also directly use another API by passing the `VUE_APP_APIORIGIN` environment variable.
```sh
VUE_APP_APIORIGIN=https://thek.lohro.de npm run serve
```
You may also use the included docker script `scripts/docker.sh`. It will build and start *thekno* in an environment similar to those in production. Providing a [custom environment](#custom-environment) is possible with the `--build-arg` option like this:
......
import { TheknoNoApiError } from './error'
const { location, fetch } = window
const defaultOrigin = location.origin
const apiOrigin = process.env.VUE_APP_APIORIGIN || defaultOrigin
function retryAPI (origin = apiOrigin) {
return fetch(`${origin}/api/v1/`)
.then(res => res.json())
.then(
() => ({ apiOrigin: origin }),
() => { throw new TheknoNoApiError() })
}
function handleEarlyResponseFailure (e) {
if (/Failed to fetch/.test(e.message)) {
// Failures before a preliminary response is available indicate a CORS issue
return retryAPI()
}
throw e
}
function handleResponseProcessingFailure (e) {
if (/^Unexpected token/.test(e.message)) {
// Looks like the response could not be parsed as JSON.
// Maybe the default route handler kicked in returning the index.html.
// Try the current origin path for the API and if that fails give up.
return retryAPI()
}
// We’re out of ideas what might have gone wrong.
// Rethrow and let others handle this.
throw e
}
export function loadEnvironment () {
return fetch(`${defaultOrigin}/thekno-env.json`)
.then(res => res.json(), handleEarlyResponseFailure)
.catch(handleResponseProcessingFailure)
}
......@@ -6,7 +6,8 @@ import router from './router'
import createStore from './store'
import i18n from './i18n'
import Player from './player'
import { TheknoNoApiError, errorToHtml } from './error'
import { errorToHtml } from './error'
import { loadEnvironment } from './bootstrap'
Vue.config.productionTip = false
Vue.config.keyCodes = {
......@@ -19,8 +20,6 @@ Vue.config.keyCodes = {
Vue.use(Player)
Vue.use(VueFeather)
const { location, fetch } = window
function init (env) {
const store = createStore(env)
......@@ -32,24 +31,7 @@ function init (env) {
}).$mount('#app')
}
fetch('/thekno-env.json')
.then(res => res.json())
.catch(e => {
if (/^Unexpected token/.test(e.message)) {
// Looks like the response could not be parsed as JSON.
// Maybe the default route handler kicked in returning the index.html.
// Try the current origin path for the API and if that fails give up.
return fetch('/api/v1/')
.then(res => res.json())
.then(
() => ({ apiOrigin: location.origin }),
() => { throw new TheknoNoApiError() })
} else {
// We’re out of ideas what might have gone wrong.
// Rethrow and use general error handling.
throw e
}
})
loadEnvironment()
.then(init, e => {
document.querySelector('#app').innerHTML =
errorToHtml(e, 'Could not initialize thekno app')
......
const proxyTarget = process.env.PROXY_TARGET || 'http://localhost:8000/'
const proxyTarget = process.env.PROXY_TARGET || (process.env.VUE_APP_APIORIGIN ? 'disable' : 'http://localhost:8000/')
const proxyOptions = {
target: proxyTarget,
changeOrigin: true,
toProxy: true,
protocolRewrite: true,
autoRewrite: true
}
module.exports = {
integrity: true,
outputDir: 'build/dist',
devServer: {
proxy: {
'/api/': {
target: proxyTarget
}
}
proxy: proxyTarget !== 'disable' ? {
'/api/': proxyOptions,
'/media/': proxyOptions
} : null
},
pluginOptions: {
i18n: {
......@@ -39,7 +45,7 @@ module.exports = {
source: 'src',
img: 'src',
image: 'xlink:href',
'v-img': 'src',
'v-img': 'src'
}
return options
......