BingoMeetings–build and deploy Angular WebSite to GitHub–part 21

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)

What  we need is to deploy somewhere the WebSite application – the Angular. One version is to compile and deploy to the WebApi (http://bingo-meeting-api.herokuapp.com/api/ ), however  , I do prefer keeping separate.

One simple idea is to deploy to GitHub site . For each repository , GitHub lets you have a website correlated . For example , for our project, https://github.com/alexandru360/PresentationBingoCards/ , github lets you have the site https://alexandru360.github.io/PresentationBingoCards/ ( see username and repository changing position?) . What is there could come form different GitHub project settings – I choose to be in the docs folder.

So we need to compile the Angular Application and put the result on the docs folder on  Github

If we do this on a CI on Azure, it could provide an endless loop ( push code oin GitHub, compoiling on Azure, push on GitHub folder docs, compile again…)

So it should come from Developer PC. But how to do this in a repeatable manner ? Simple – Docker!

So we build inside Docker the Angular site, copy the compile from Docker on the local system, then we manually push the modifications on Github. The system has the advantage that it can be reproducible also on Azure.

So the bat looks like this

call build_web.bat
del /S /Q ..\docs\*.*
copy dist\bingo-cards-ui\*.* ..\docs\

See https://github.com/alexandru360/PresentationBingoCards/tree/master/docs  for more details about the docker files.

One small modification also: the base href from angular should be this, to accept https://alexandru360.github.io/PresentationBingoCards/ that is not rooted:

<!– <base href=”/”> –>

<script>

var isCordovaApp = !!window.cordova;

var hrefApp = “.”;

if (!isCordovaApp) {

var baseHref = window.location.href.split(‘/’);

baseHref.pop();

hrefApp = baseHref.join(‘/’) + ‘/’;

}

document.write(‘<base href=”‘ + hrefApp + ‘” />’);

</script>

create docker to deploy to docs

build_docs.bat