BingoMeetings–4 steps to run in Docker both WebAPI and Site-part 22

Bingo is a small project, written in TypeScript , and developed with Alexandru Badita in launch break (one hour - more or less). You can find sources at https://github.com/alexandru360/PresentationBingoCards/ . Those are my blog posts for Bingo : ( scroll below for the post)
NrLink
1Create meeting
2Create Tests
3Finalize Create meeting
4Sharing meeting
5Keep Score
6Add obsolete
7Finalizing obsolete
8End meeting
9Dockerize tests
10Azure CI tests
11Yarn workspaces
12CLI
13Intermezzo - CLI improvements
14typescript compile run with node
15NestJS ,swagger and create a meeting
16Finalizing API
17Intermezzo - jest vs jasmine error
18Refactor WebAPI and test service
19Heroku Deploy NestJs
20Angular
21Deploy Angular to GitHub
22WebAPI and Web
23Documentation
24Documentation of the code
25Conclusions

(Now the actual blog post for Bingo Meetings project)

Now what I want to achieve is to run the WebAPI and Angular Site in docker. For this, we should compile the Angular site and copy into the WebAPI. Also, WebAPI should serve the index.html file generated by the Angular.

Those are the 4 steps:

1. Ensure that  the Angular routes and WebAPI routes should be different Solution: this is easy achieved by having /api prepended to the WebAPI routes)

2. The WebAPI should be configured as to build to different configurations: for our purpose, calling  root ( /). For docs ( https://alexandru360.github.io/PresentationBingoCards/ ) it should call official deploy http://bingo-meeting-api.herokuapp.com/api/ 

Solution: read about environment https://angular.io/guide/build . I have made a new environment dockerbuild  Rememeber to create a new environment.ts  + a new entry in angular.json to build this configuration + an entry in package.json to build it . Then modify the service to use environment( see the modifications at https://github.com/alexandru360/PresentationBingoCards/commit/6dafb0c0b005d46bc426d128f9caf5d53e039dfa ).

3. For NestJs to serve html file , add nest-middlewares/serve-static  , then add the following code in the appropiate places:

ServeStaticModule

.forRoot({

rootPath: join(__dirname, ‘..’, ‘dist’,’bingo-cards-ui’),

})],

ServeStaticMiddleware.configure(‘/test’ );

consumer.apply(ServeStaticMiddleware).forRoutes(‘/test’);

( see https://github.com/alexandru360/PresentationBingoCards/commit/6dafb0c0b005d46bc426d128f9caf5d53e039dfa )

4. In the docker compile the Angular , then copy the files into WebAPI folder, then run the WebAPI site . See https://github.com/alexandru360/PresentationBingoCards/blob/master/dockerize/docker_runwebapiweb.txt and https://github.com/alexandru360/PresentationBingoCards/blob/master/dockerize/build_RunWebApiWeb.bat