This commit is contained in:
Eugene Pankov 2021-07-25 14:38:14 +02:00
parent e11193b807
commit cabbc17581
No known key found for this signature in database
GPG Key ID: 5896FCBBDD1CF4F4
12 changed files with 74 additions and 53 deletions

View File

@ -4,7 +4,7 @@
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"build": "webpack --progress", "build": "webpack --progress",
"watch": "BACKEND_URL=http://localhost:8001 DEV=1 webpack --progress --watch", "watch": "DEV=1 webpack --progress --watch",
"build:server": "webpack --progress -c webpack.config.server.js", "build:server": "webpack --progress -c webpack.config.server.js",
"watch:server": "DEV=1 webpack --progress --watch -c webpack.config.server.js", "watch:server": "DEV=1 webpack --progress --watch -c webpack.config.server.js",
"start": "./manage.py runserver 8001", "start": "./manage.py runserver 8001",
@ -42,6 +42,7 @@
"core-js": "^3.14.0", "core-js": "^3.14.0",
"css-loader": "^2.1.0", "css-loader": "^2.1.0",
"deepmerge": "^4.2.2", "deepmerge": "^4.2.2",
"dotenv": "^10.0.0",
"eslint": "^7.31.0", "eslint": "^7.31.0",
"file-loader": "^1.1.11", "file-loader": "^1.1.11",
"html-loader": "^2.1.2", "html-loader": "^2.1.2",

View File

@ -37,7 +37,7 @@ class DemoConnector {
} }
async getDistURL (): Promise<string> { async getDistURL (): Promise<string> {
return await this.commonService.getBackendURL() + '/app-dist' return await this.commonService.backendURL$ + '/app-dist'
} }
getPluginsToLoad (): string[] { getPluginsToLoad (): string[] {

View File

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

View File

@ -1,5 +1,6 @@
import { Component } from '@angular/core' import { Component } from '@angular/core'
import { LoginService } from '../services/login.service' import { LoginService } from '../services/login.service'
import { CommonService } from '../services/common.service'
import { faGithub, faGitlab, faGoogle, faMicrosoft } from '@fortawesome/free-brands-svg-icons' import { faGithub, faGitlab, faGoogle, faMicrosoft } from '@fortawesome/free-brands-svg-icons'
@ -21,6 +22,7 @@ export class LoginComponent {
constructor ( constructor (
private loginService: LoginService, private loginService: LoginService,
public commonService: CommonService,
) { } ) { }
async ngOnInit () { async ngOnInit () {

View File

@ -10,11 +10,12 @@ export class UniversalInterceptor implements HttpInterceptor {
intercept (request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { intercept (request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
if (!request.url.startsWith('//') && request.url.startsWith('/')) { if (!request.url.startsWith('//') && request.url.startsWith('/')) {
return from(this.commonService.getBackendURL()).pipe(switchMap((baseUrl: string) => { return from(this.commonService.backendURL$).pipe(switchMap((baseUrl: string) => {
const endpoint = request.url const endpoint = request.url
request = request.clone({ request = request.clone({
url: `${baseUrl}${endpoint}`, url: `${baseUrl}${endpoint}`,
withCredentials: true,
}) })
return next.handle(request) return next.handle(request)
})) }))

View File

@ -1,54 +1,39 @@
require('source-map-support').install() import { install } from 'source-map-support'
import 'zone.js/dist/zone-node'; import 'zone.js/dist/zone-node'
import './ssr-polyfills' import './ssr-polyfills'
import { enableProdMode } from '@angular/core'; import { enableProdMode } from '@angular/core'
import { ngExpressEngine } from '@nguniversal/express-engine'
// Express Engine
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express' import * as express from 'express'
import { join } from 'path' import { join } from 'path'
// Faster server renders w/ Prod mode (dev mode never needed) install()
enableProdMode(); enableProdMode()
// Express server const app = express()
const app = express();
const PORT = process.env.PORT || 4000; const PORT = process.env.PORT || 4000
const DIST_FOLDER = join(process.cwd(), 'build'); const DIST_FOLDER = join(process.cwd(), 'build')
import { AppServerModule } from './app.server.module' import { AppServerModule } from './app.server.module'
app.engine('html', ngExpressEngine({ app.engine('html', ngExpressEngine({
bootstrap: AppServerModule, bootstrap: AppServerModule,
})); }))
app.set('view engine', 'html'); app.set('view engine', 'html')
app.set('views', DIST_FOLDER); app.set('views', DIST_FOLDER)
// Example Express Rest API endpoints app.get('*.*', express.static(DIST_FOLDER, {
// app.get('/api/**', (req, res) => { }); maxAge: '1y',
}))
// Server static files from /browser
app.use('/static', express.static(DIST_FOLDER, {
maxAge: '1y'
}));
// var proxy = require('express-http-proxy');
app.get('*', (req, res) => { app.get('*', (req, res) => {
res.render('index', { req }); res.render('index', { req })
}); })
// app.use('/', proxy('http://tabby.local:8000/api/', {
// }))
// Start up the Node server
app.listen(PORT, () => { app.listen(PORT, () => {
console.log(`Node Express server listening on http://localhost:${PORT}`); console.log(`Node Express server listening on http://localhost:${PORT}`)
}); })

View File

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

View File

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

View File

@ -169,8 +169,6 @@ SOCIAL_AUTH_PIPELINE = (
'social_core.pipeline.user.user_details', 'social_core.pipeline.user.user_details',
) )
LOGIN_REDIRECT_URL = '/app'
APP_DIST_PATH = Path(os.getenv('APP_DIST_PATH', BASE_DIR / 'app-dist')) APP_DIST_PATH = Path(os.getenv('APP_DIST_PATH', BASE_DIR / 'app-dist'))
NPM_REGISTRY = os.getenv('NPM_REGISTRY', 'https://registry.npmjs.org').rstrip('/') NPM_REGISTRY = os.getenv('NPM_REGISTRY', 'https://registry.npmjs.org').rstrip('/')
@ -229,3 +227,21 @@ else:
if FRONTEND_URL: if FRONTEND_URL:
CORS_ALLOWED_ORIGINS = [FRONTEND_URL] CORS_ALLOWED_ORIGINS = [FRONTEND_URL]
CORS_ALLOW_CREDENTIALS = True
CORS_ALLOW_HEADERS = [
'accept',
'accept-encoding',
'authorization',
'content-type',
'dnt',
'origin',
'user-agent',
'x-xsrf-token',
'x-requested-with',
]
CSRF_TRUSTED_ORIGINS = [FRONTEND_URL]
FRONTEND_URL = FRONTEND_URL.rstrip('/')
else:
FRONTEND_URL = ''
LOGIN_REDIRECT_URL = FRONTEND_URL + '/app'

View File

@ -8,7 +8,7 @@ urlpatterns = [
path('', include(app_urlpatterns)), path('', include(app_urlpatterns)),
path('api/1/auth/social/', include('social_django.urls', namespace='social')), path('api/1/auth/social/', include('social_django.urls', namespace='social')),
path('admin/', admin.site.urls), path('admin/', admin.site.urls),
path(f'^{settings.STATIC_URL}<path:path>', serve, kwargs={ path(f'{settings.STATIC_URL}<path:path>', serve, kwargs={
'document_root': settings.STATIC_ROOT, 'document_root': settings.STATIC_ROOT,
}), }),
] ]

View File

@ -1,3 +1,4 @@
require('dotenv').config()
const baseConfig = require('./webpack.config.base.js') const baseConfig = require('./webpack.config.base.js')
const fs = require('fs') const fs = require('fs')
const path = require('path') const path = require('path')
@ -12,6 +13,11 @@ const htmlPluginOptions = {
const outputPath = path.join(__dirname, 'build') const outputPath = path.join(__dirname, 'build')
const backendURL = process.env.BACKEND_URL const backendURL = process.env.BACKEND_URL
if (process.env.DEV && !backendURL) {
backendURL = 'http://localhost:8001'
}
if (!backendURL) { if (!backendURL) {
throw new Error('BACKEND_URL env var is required') throw new Error('BACKEND_URL env var is required')
} }
@ -45,7 +51,7 @@ module.exports = {
}), }),
{ {
apply: (compiler) => { apply: (compiler) => {
compiler.hooks.afterEmit.tap('AfterEmitPlugin', _ => { compiler.hooks.afterEmit.tap('AfterEmitPlugin', () => {
fs.writeFileSync(path.join(outputPath, 'config.json'), JSON.stringify({ fs.writeFileSync(path.join(outputPath, 'config.json'), JSON.stringify({
backendURL, backendURL,
})) }))

View File

@ -1826,6 +1826,11 @@ dot-case@^3.0.4:
no-case "^3.0.4" no-case "^3.0.4"
tslib "^2.0.3" tslib "^2.0.3"
dotenv@^10.0.0:
version "10.0.0"
resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-10.0.0.tgz#3d4227b8fb95f81096cdd2b66653fb2c7085ba81"
integrity sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==
duplexer@^0.1.2: duplexer@^0.1.2:
version "0.1.2" version "0.1.2"
resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6" resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"