Category: nestjs

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

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)
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 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

Intermezzo – NestJS + Jest vs Angular + Jasmine

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)
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

We decided to add an Angular project.  As a immediate consequence , the compile ( tsc ) of the API ( bingo-cards-api) it failes with the first error being:

../node_modules/@types/jasmine/ts3.1/index.d.ts:16:1 – error TS6200: Definitions of the following identifiers conflict with those in another file: beforeAll, beforeEach, afterAll, afterEach, describe, fdescribe, xdescribe, it, fit, xit, expect, DEFAULT_TIMEOUT_INTERVAL, CustomMatcherFactory, CustomEqualityTester

 

Obviously, we have a conflict… And the conflict is done by Angular( that comes with Jasmine by default) and Nest ( that comes with Jest) ( and us, that we have choose Jest)

 

There are 3 solving paths:

  1. Convert all to Jasmine
  2. Convert all to Jest
  3. Eliminate the tests from the Angular , eliminate the tests from Nest and create the own library to test (we have done already this, in bingo-meeting-objects-test)

 

Solution 1 : means re-factor all. Not good.

I have tried the 2 , but , in spite of many tutorials on the internet, some problems have arrived.

So we have the 3 : eliminate all references to Jest and Jasmine, with the exception of bingo-meeting-objects-test

And… it worked!

 

Bingo for meetings–finalizing API for web–part 16

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)
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

The API that we want to create is

  1. create meeting
  2. add participant
  3. check cards
  4. see result meeting(

Those API’s  were simpler for the console application, because of the single participant involved.

There are also some technical problems and some architectural ones.

Let’s start with technical: nestjs suggest ( as per sample project with contacts) to add a route like:

    @Put(':id/addParticipant')
    async addParticipant(@Param('id') id: any, @Body() nameParticipant: string): Promise<Meeting> {
        // console.log(`userName : ${JSON.stringify(cm.userName)}  meetingName: ${JSON.stringify(cm.meetingName)}`);
        return this.meetingsService.AddParticipant(id, nameParticipant);
    }

However , this is not available to be tested via Swagger – so we modify to

export class AddParticipant {
    @ApiModelProperty()
  meetingId: any;
  @ApiModelProperty()
  nameParticipant: string;
}
//CODE OF THE CONTROLLER OMITTED
@Put('addParticipant')
    async addParticipant(@Body() addParticipant: AddParticipant): Promise<Meeting> {
        // console.log(`userName : ${JSON.stringify(cm.userName)}  meetingName: ${JSON.stringify(cm.meetingName)}`);
        return this.meetingsService.AddParticipant(addParticipant.meetingId, addParticipant.nameParticipant);
    }


Also, when we handle in the meeting service the CheckCard we discover to be missing something for the original DDD model . For example, we need a FindCard and FindParticipantAfterName .

public checkCard(idMeeting: any, idCard: number, nameParticipant:string ): Meeting{
        const m = this.meetings.find(it => it.Id === idMeeting );
        // TODO: throw if meeting is null
        const c = m.FindCard(idCard);
        // TODO: throw if card is null
        const p = m.FindParticipantAfterName(nameParticipant);
        // TODO: throw if participant is null

        m.CheckCardByParticipant(c, p);
        return m;

    }

For the architectural ones:

  1. The service that we just created should be tested and put into the right project. It could belong to the bingo-meeting-objects.
  2. The controller has some classes that should be tested. However, the classes involving in the @Body have   swagger attributes, so they cannot be moved into bingo-meeting-objects .
export class AddParticipant {
//bingo-meeting-objects  should not have reference to swagger properties
    @ApiModelProperty()
  meetingId: any;
  @ApiModelProperty()
  nameParticipant: string;
}


Download the actual code from https://github.com/alexandru360/PresentationBingoCards/releases/tag/api_final

Andrei Ignat weekly software news(mostly .NET)

* indicates required

Please select all the ways you would like to hear from me:

You can unsubscribe at any time by clicking the link in the footer of our emails. For information about our privacy practices, please visit our website.

We use Mailchimp as our marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing. Learn more about Mailchimp's privacy practices here.