video-29: implemted everythiing for a Deployment to aws elastic beanstalk

Author: TommiCodes

api/package-lock.json

@@ -8,6 +8,7 @@
   "scripts": {
     "prebuild": "rimraf dist",
     "build": "nest build",
+    "build:prod": "cd ../frontend && ng build --prod --output-path ../api/dist/frontend && cd ../api && nest build",
     "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
     "start": "nest start",
     "start:dev": "nest start --watch",
@@ -27,6 +28,7 @@
     "@nestjs/jwt": "^7.0.0",
     "@nestjs/passport": "^7.0.0",
     "@nestjs/platform-express": "^7.2.0",
+    "@nestjs/serve-static": "^2.1.3",
     "@nestjs/typeorm": "^7.0.0",
     "bcrypt": "^4.0.1",
     "nestjs-typeorm-paginate": "^2.0.3",

api/package.json

@@ -6,9 +6,14 @@ import {TypeOrmModule} from '@nestjs/typeorm';
 import { UserModule } from './user/user.module';
 import { AuthModule } from './auth/auth.module';
 import { BlogModule } from './blog/blog.module';
+import { ServeStaticModule } from '@nestjs/serve-static/dist/serve-static.module';
+import { join } from 'path';
 
 @Module({
   imports: [
+    ServeStaticModule.forRoot({
+      rootPath: join(__dirname, './', 'frontend'),
+    }),
     ConfigModule.forRoot({isGlobal: true}),
     TypeOrmModule.forRoot({
       type: 'postgres',

api/src/app.module.ts

@@ -4,6 +4,6 @@ import { AppModule } from './app.module';
 async function bootstrap() {
   const app = await NestFactory.create(AppModule);
   app.setGlobalPrefix('api');
-  await app.listen(3000);
+  await app.listen(process.env.PORT || 3000);
 }
 bootstrap();

api/src/main.ts

@@ -28,6 +28,7 @@ import { UserProfileComponent } from './components/user/user-profile/user-profil
 import { AllBlogEntriesComponent } from './components/blog-entry/all-blog-entries/all-blog-entries.component';
 import { CreateBlogEntryComponent } from './components/blog-entry/create-blog-entry/create-blog-entry.component';
 import { ViewBlogEntryComponent } from './components/blog-entry/view-blog-entry/view-blog-entry.component';
+import { WINDOW_PROVIDERS } from './window-token';
 
 @NgModule({
   declarations: [
@@ -63,6 +64,7 @@ import { ViewBlogEntryComponent } from './components/blog-entry/view-blog-entry/
     MarkdownModule.forRoot()
   ],
   providers: [
+    WINDOW_PROVIDERS,
     JwtHelperService, 
     { provide: JWT_OPTIONS, useValue: JWT_OPTIONS },
     {

api/uploads/profileimages/Download0e4f0456-aea4-4037-b786-d0e3da00c63b.jpg

@@ -3,7 +3,7 @@
         <div style="display: flex;">
             <div>
                 <img *ngIf="blogEntry.headerImage !== null; else placeholderImage"
-                    src="http://localhost:3000/api/blog-entries/image/{{blogEntry.headerImage}}">
+                    src="{{origin}}/api/blog-entries/image/{{blogEntry.headerImage}}">
                 <ng-template #placeholderImage>
                     <img src="../../../assets/placeholders/placeholder-blog-entry.png">
                 </ng-template>

frontend/src/app/app.module.ts

@@ -1,9 +1,11 @@
+import { Inject } from '@angular/core';
 import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { MatPaginator, PageEvent } from '@angular/material/paginator';
 import { Router } from '@angular/router';
 import { Observable } from 'rxjs';
 import { BlogEntriesPageable } from 'src/app/model/blog-entry.interface';
 import { BlogService } from 'src/app/services/blog-service/blog.service';
+import { WINDOW } from 'src/app/window-token';
 
 @Component({
   selector: 'app-all-blog-entries',
@@ -17,7 +19,9 @@ export class AllBlogEntriesComponent {
 
   pageEvent: PageEvent;
 
-  constructor(private router: Router) { }
+  origin = this.window.location.origin;
+
+  constructor(private router: Router, @Inject(WINDOW) private window: Window) { }
 
   onPaginateChange(event: PageEvent) {
     event.pageIndex = event.pageIndex + 1;

frontend/src/app/components/blog-entry/all-blog-entries/all-blog-entries.component.html

@@ -5,7 +5,7 @@
             <div style="width: 80%;">
                 <mat-card>
                     <mat-card-content>
-                        <img *ngIf="form.get('headerImage').value" src="http://localhost:3000/api/blog-entries/image/{{form.get('headerImage').value}}">
+                        <img *ngIf="form.get('headerImage').value" src="{{origin}}/api/blog-entries/image/{{form.get('headerImage').value}}">
                         <ul>
                             <li>
                                 <mat-progress-bar [value]="file.progress"></mat-progress-bar>

frontend/src/app/components/blog-entry/all-blog-entries/all-blog-entries.component.ts

@@ -1,10 +1,12 @@
 import { HttpErrorResponse, HttpEventType } from '@angular/common/http';
+import { Inject } from '@angular/core';
 import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { of } from 'rxjs';
 import { catchError, map, tap } from 'rxjs/operators';
 import { BlogService } from 'src/app/services/blog-service/blog.service';
+import { WINDOW } from 'src/app/window-token';
 
 export interface File {
   data: any;
@@ -29,11 +31,13 @@ export class CreateBlogEntryComponent implements OnInit {
 
   form: FormGroup;
 
+  origin = this.window.location.origin;
 
   constructor(
     private formBuilder: FormBuilder,
     private blogService: BlogService,
-    private router: Router
+    private router: Router,
+    @Inject(WINDOW) private window: Window
   ) { }
 
   ngOnInit(): void {