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

Bingo

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)

Nr	Link
1	Create meeting
2	Create Tests
3	Finalize Create meeting
4	Sharing meeting
5	Keep Score
6	Add obsolete
7	Finalizing obsolete
8	End meeting
9	Dockerize tests
10	Azure CI tests
11	Yarn workspaces
12	CLI
13	Intermezzo - CLI improvements
14	typescript compile run with node
15	NestJS ,swagger and create a meeting
16	Finalizing API
17	Intermezzo - jest vs jasmine error
18	Refactor WebAPI and test service
19	Heroku Deploy NestJs
20	Angular
21	Deploy Angular to GitHub
22	WebAPI and Web
23	Documentation
24	Documentation of the code
25	Conclusions

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