wip

frontend/src/app.module.ts

@@ -18,7 +18,7 @@ import { HomeComponent } from './components/home.component'
 import { LoginComponent } from './components/login.component'
 import { InstanceInfoResolver } from './api'
 
-// import '@fortawesome/fontawesome-svg-core/styles.css'
+import '@fortawesome/fontawesome-svg-core/styles.css'
 
 const ROUTES = [
     {

frontend/src/components/home.component.ts

@@ -15,9 +15,7 @@ class DemoConnector {
         private commonService: CommonService,
         private version: Version,
     ) {
-        this.getDistURL().then(distURL => {
+        targetWindow['tabbyWebDemoDataPath'] = `${this.getDistURL()}/${version.version}/tabby-web-demo/data`
-            targetWindow['tabbyWebDemoDataPath'] = `${distURL}/${version.version}/tabby-web-demo/data`
-        })
     }
 
     async loadConfig (): Promise<string> {
@@ -36,8 +34,8 @@ class DemoConnector {
         return this.version.version
     }
 
-    async getDistURL (): Promise<string> {
+    getDistURL (): string {
-        return await this.commonService.backendURL$ + '/app-dist'
+        return this.commonService.backendURL + '/app-dist'
     }
 
     getPluginsToLoad (): string[] {

frontend/src/components/login.component.pug

@@ -4,7 +4,7 @@ main(*ngIf='ready && loggedIn')
         a.btn(
             *ngFor='let provider of providers',
             [class]='provider.cls',
-            href='{{commonService.backendURL$|async}}/api/1/auth/social/login/{{provider.id}}'
+            href='{{commonService.backendURL}}/api/1/auth/social/login/{{provider.id}}'
         )
             fa-icon([icon]='provider.icon', [fixedWidth]='true')
             span Log in with {{provider.name}}

frontend/src/interceptor.ts

@@ -1,7 +1,6 @@
 import { Injectable } from '@angular/core'
 import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http'
-import { Observable, from } from 'rxjs'
+import { Observable } from 'rxjs'
-import { switchMap } from 'rxjs/operators'
 import { CommonService } from './services/common.service'
 
 @Injectable()
@@ -9,16 +8,14 @@ export class UniversalInterceptor implements HttpInterceptor {
     constructor (private commonService: CommonService) { }
 
     intercept (request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+        console.log(request.url)
         if (!request.url.startsWith('//') && request.url.startsWith('/')) {
-            return from(this.commonService.backendURL$).pipe(switchMap((baseUrl: string) => {
             const endpoint = request.url
-
+            console.log(this.commonService.backendURL, request.url)
             request = request.clone({
-                    url: `${baseUrl}${endpoint}`,
+                url: `${this.commonService.backendURL}${endpoint}`,
                 withCredentials: true,
             })
-                return next.handle(request)
-            }))
         }
         return next.handle(request)
     }

frontend/src/services/appConnector.service.ts

@@ -159,8 +159,8 @@ export class AppConnectorService {
         return this.version.version
     }
 
-    async getDistURL (): Promise<string> {
+    getDistURL (): string {
-        return await this.commonService.backendURL$ + '/app-dist'
+        return this.commonService.backendURL + '/app-dist'
     }
 
     getPluginsToLoad (): string[] {

frontend/src/services/common.service.ts

@@ -1,23 +1,14 @@
 import { Injectable } from '@angular/core'
 
+declare const BACKEND_URL: any
 
 @Injectable({ providedIn: 'root' })
 export class CommonService {
-    private configPromise: Promise<any>
+    backendURL: string = BACKEND_URL
-    backendURL$: Promise<string>
 
     constructor () {
-        this.configPromise = this.getConfig()
+        if (this.backendURL.endsWith('/')) {
-        this.backendURL$ = this.configPromise.then(cfg => {
+            this.backendURL = this.backendURL.slice(0, -1)
-            let backendURL = cfg.backendURL
-            if (backendURL.endsWith('/')) {
-                backendURL = backendURL.slice(0, -1)
         }
-            return backendURL
-        })
-    }
-
-    private async getConfig () {
-        return (await fetch('/config.json')).json()
     }
 }

frontend/src/terminal.ts

@@ -31,7 +31,7 @@ async function start () {
         await (await fetch(url)).text()
     }
 
-    const baseUrl = `${await connector.getDistURL()}/${appVersion}`
+    const baseUrl = `${connector.getDistURL()}/${appVersion}`
     const coreURLs = [
         `${baseUrl}/tabby-web-container/dist/preload.js`,
         `${baseUrl}/tabby-web-container/dist/bundle.js`,

frontend/webpack.config.base.js

@@ -1,3 +1,4 @@
+require('dotenv').config({path: '../.env'})
 const webpack = require('webpack')
 const MiniCssExtractPlugin = require("mini-css-extract-plugin")
 
@@ -55,5 +56,8 @@ module.exports  = {
   },
   plugins: [
     new MiniCssExtractPlugin(),
+    new webpack.DefinePlugin({
+        BACKEND_URL: JSON.stringify(process.env.BACKEND_URL || ''),
+    }),
   ],
 }

frontend/webpack.config.js

@@ -1,7 +1,6 @@
-require('dotenv').config()
 const baseConfig = require('./webpack.config.base.js')
-const fs = require('fs')
 const path = require('path')
+const webpack = require('webpack')
 const { AngularWebpackPlugin } =  require('@ngtools/webpack')
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 const HtmlWebpackPlugin = require('html-webpack-plugin')
@@ -12,15 +11,6 @@ const htmlPluginOptions = {
 }
 
 const outputPath = path.join(__dirname, 'build')
-const backendURL = process.env.BACKEND_URL
-
-if (process.env.DEV && !backendURL) {
-    backendURL = 'http://localhost:8001'
-}
-
-if (!backendURL) {
-  throw new Error('BACKEND_URL env var is required')
-}
 
 module.exports = {
   name: 'browser',
@@ -49,15 +39,6 @@ module.exports = {
       chunks: ['terminal'],
       ...htmlPluginOptions,
     }),
-    {
-      apply: (compiler) => {
-        compiler.hooks.afterEmit.tap('AfterEmitPlugin', () => {
-          fs.writeFileSync(path.join(outputPath, 'config.json'), JSON.stringify({
-            backendURL,
-          }))
-        })
-      },
-    },
   ],
   output: {
     path: outputPath,