Add logic for serving front-end from /app
@ -55,6 +55,7 @@ const FlitterUnits = {
|
||||
'Forms' : require('flitter-forms/FormsUnit'),
|
||||
'Auth' : require('flitter-auth/AuthUnit'),
|
||||
'Flap' : require('flitter-flap/FlapUnit'),
|
||||
'FrontEnd' : require('./app/FrontendUnit'),
|
||||
|
||||
/*
|
||||
* Custom Flitter Units
|
||||
|
||||
42
app/FrontendUnit.js
Normal file
@ -0,0 +1,42 @@
|
||||
const Unit = require('libflitter/Unit')
|
||||
const Express = require('express')
|
||||
const path = require('path')
|
||||
|
||||
class FrontendUnit extends Unit {
|
||||
static get services() {
|
||||
return [...super.services, 'configs', 'express', 'canon', 'utility']
|
||||
}
|
||||
|
||||
constructor(...args) {
|
||||
super(...args)
|
||||
|
||||
/**
|
||||
* Fully qualified path to the root of the ionic app.
|
||||
* @type {string}
|
||||
*/
|
||||
this.directory = this.utility.path(this.configs.get('server.frontend_path'))
|
||||
}
|
||||
|
||||
async go(app) {
|
||||
app.express.use('/app', [
|
||||
this.canon.get('middleware::auth:UserOnly'),
|
||||
(req, res, next) => {
|
||||
const allowed_extensions = [
|
||||
'.html', '.js', '.css', '.svg', '.ttf', '.jpg', '.png',
|
||||
'.jpeg', '.webmanifest', '.json', '.eot', '.svg', '.cur',
|
||||
'.webp', '.gif', '.otf', '.woff', '.woff2', '.ani', '.map',
|
||||
'.ico',
|
||||
]
|
||||
|
||||
for ( const k1 in allowed_extensions ) {
|
||||
if ( req.path.endsWith(allowed_extensions[k1]) ) return next()
|
||||
}
|
||||
|
||||
return res.sendFile(path.resolve(this.directory, 'index.html'))
|
||||
},
|
||||
Express.static(this.directory),
|
||||
])
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = exports = FrontendUnit
|
||||
@ -14,6 +14,12 @@ const server_config = {
|
||||
*/
|
||||
environment: env('ENVIRONMENT', 'production'),
|
||||
|
||||
/*
|
||||
* The relative path to the front-end application.
|
||||
* Relative to the repository root.
|
||||
*/
|
||||
frontend_path: env('FRONT_END_PATH', 'frontend'),
|
||||
|
||||
logging: {
|
||||
|
||||
/*
|
||||
|
||||
|
Before Width: | Height: | Size: 116 KiB After Width: | Height: | Size: 116 KiB |
|
Before Width: | Height: | Size: 118 KiB After Width: | Height: | Size: 118 KiB |
|
Before Width: | Height: | Size: 120 KiB After Width: | Height: | Size: 120 KiB |
|
Before Width: | Height: | Size: 114 KiB After Width: | Height: | Size: 114 KiB |
|
Before Width: | Height: | Size: 120 KiB After Width: | Height: | Size: 120 KiB |
|
Before Width: | Height: | Size: 117 KiB After Width: | Height: | Size: 117 KiB |
@ -4,7 +4,18 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>Fantasy Football</title>
|
||||
<link rel="stylesheet" href="./src/style/components.css">
|
||||
|
||||
<script>
|
||||
let loc = window.location.href
|
||||
if ( loc.endsWith('index.html') ) loc = loc.slice(0, -('index.html').length)
|
||||
loc = loc.split(/[?#]/)[0]
|
||||
loc = loc.split('/app')[0]
|
||||
if ( !loc.endsWith('/') ) loc = `${loc}/app/`
|
||||
|
||||
window.APP_BASE_PATH = loc
|
||||
</script>
|
||||
|
||||
<link rel="stylesheet" href="/app/src/style/components.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- This is the container where the Vue.js application will render to. -->
|
||||
@ -14,16 +25,8 @@
|
||||
<app-top-level></app-top-level>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let loc = window.location.href
|
||||
if ( loc.endsWith('index.html') ) loc = loc.slice(0, -('index.html').length)
|
||||
loc = loc.split(/[?#]/)[0];
|
||||
if ( !loc.endsWith('/') ) loc = `${loc}/`
|
||||
|
||||
window.APP_BASE_PATH = loc
|
||||
</script>
|
||||
<script src="./lib/vue-2.6.11.js"></script>
|
||||
<script src="./lib/vues6.js" type="module"></script>
|
||||
<script src="./src/module/start.js" type="module"></script>
|
||||
<script src="/app/lib/vue-2.6.11.js"></script>
|
||||
<script src="/app/lib/vues6.js" type="module"></script>
|
||||
<script src="/app/src/module/start.js" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||