DEV Community: YggdrasilTS

The Nx Dev Tool for Monorepos

David (ダビッド ) — Fri, 21 Aug 2020 14:45:33 +0000

Original Post

In JavaScript world, we already know the battles to be the most popular framework or library in the community. There are lots of these creating awesome sites to attract developers for its documentation and usability, showing how easy is to create an application using them, etc.

Over time, some of these frameworks / libraries achieved this popularity but not alone and instead of talking about only frameworks or libraries, we started to listen the JavaScript Stacks.

These JavaScript Stacks are just a selection of some of those popular frameworks / libraries to build the different parts of an application. The popular known stacks are:

As you can see, all of these stacks are nearly the same but the frontend framework, and all of them are also valid to build whatever web application you want.

Enterprises are adopting this JavaScript Stacks to build its web applications even its backend as well. Due to their amount of applications and/or libraries, they have necessities not to only solve what JavaScript Stack to choose, they want to know how to organize the code, architecture patterns to build a scalable application and share components or libraries between their applications as well. In this case, the Nx Dev Tools it is the evolution of this JavaScript Stacks to choose.

The Nx Dev Tools

Nx Dev Tools, as its website says, is a set of extensible dev tools for monorepos, which helps you develop like Google, Facebook, and Microsoft and was created in Nrwl.io, founded by two ex-Googlers, Victor Savkin & Jeff Cross.

In the current version, Nx workspace has different options to build projects with the following stacks:

Frameworks to build FRONTEND applications
Framework to build BACKEND applications
- NestJS
- Nextjs
- Express

In the current version there is no support for Vue.js but you can find some comments talking about its support here.

As you can see, Nx Dev Tools is an awesome resource thought to help developers and enterprises to build whatever they want.

Nx Dev Tools - Resources

Besides its core features, Nx Dev Tools also has a CLI that helps you setup, develop, build, and maintain applications and more and more Plugins, build by their own or by the community, that contain schematics and builders to extend a Nx workspace.

How to Start

At this stage, you should want to know how to start using it, shouldn't it? To start, you can check the above links or if you want to get to work, then you can check its Angular tutorial in the following link:

Tutorial: Step 1: Create Application

Angular and NestJS are my prefered options to build applications 🤓

Conclusion

If you are thinking to start a big, medium or small project, I recommend you to take a look its Getting Started Page to see how this tool can help you to organize your entire project.

In next posts I will show you examples using this Nx Dev Tools 🙂.

Axiosfit in a real project - Arango Of Thrones

David (ダビッド ) — Mon, 02 Mar 2020 11:04:02 +0000

Original post

In a previous post, I told about the YggdrasilTS flagship, Axiosfit. Now, it turns to show a sample in a real project.

Although Axiosfit is yet in the early version, the last version has enough features to be used in a real project and start testing how it works. Let's begin...

The project we are going to build is a NestJS application that loads the Game Of Thrones data inside an ArangoDB database using services built with Axiosfit.

'INFO' This data is extracted from one of the ArangoDB examples datasets and if you want to practice a little bit with ArangoDB, here you can find the tutorial.

The first step is to create a NestJS application. To do so, you can follow its documentation and create the application using its client with the name arangodb-axiosfit, or whatever name you want. After this, you can open the project with your best editor or IDE and you will see something like the following image:

Like its documentation sais, you can execute npm start and you will see how it works.

Now, we are going to adapt the application adding the Axiosfit library and create all the needed resources.

To add Axiosfit, we only need to execute npm i @yggdrasilts/axiosfit. After this, we are going to see the Axiosfit dependency in our package.json file with the latest version published:

...
"dependencies": {
  "@nestjs/common": "^6.10.14",
  "@nestjs/core": "^6.10.14",
  "@nestjs/platform-express": "^6.10.14",
  "@yggdrasilts/axiosfit": "^0.8.0", <- Axiosfit dependency
  "reflect-metadata": "^0.1.13",
  "rimraf": "^3.0.0",
  "rxjs": "^6.5.4"
},
...

Before continue, I would like to talk about how we are going to use ArangoDB. If you want, you can install it normally using its documentation but, for the purpose of this example, we are going to use the ArangoDB docker container using TestContainers library.

'INFO' What is TestContainers? This library has been thought to support tests, providing lightweight, throwaway instances of common databases or anything else that can run in a Docker container.

In this case, it is not for testing purpose but TestContainers is an easy way to manage docker containers through the code.

In their web, TestContainers shows how to be used with java but also it has its own nodejs library, testscontainers-node, that we will use in the project. To install it, we only need to execute the following command: npm i -D testcontainers.

'INFO' Docker is a requirement if you want to use TestContainers.

Once installed, we will create a setup.ts file inside test folder where we will instantiate ArangoDB docker image with TestContainers.

import { GenericContainer } from 'testcontainers';
import { StartedTestContainer } from 'testcontainers/dist/test-container';
import logger from 'testcontainers/dist/logger';

let mockServer: StartedTestContainer;

export const stopMockServer = async () => {
  await mockServer.stop();
  logger.info('Mock Server stopped.');
};

export const startMockServer = async (port: number = 8529): Promise<StartedTestContainer> => {
  let arangoDBserverIP: string;
  let arangoDBserverPort: string;

  try {
    const container = await new GenericContainer('arangodb', '3.6.0');

    mockServer = await container
      .withExposedPorts(port)
      .withEnv('ARANGO_NO_AUTH', '1')
      .start();

    arangoDBserverIP = await mockServer.getContainerIpAddress();
    arangoDBserverPort = String(await mockServer.getMappedPort(port));
    const url = `http://${arangoDBserverIP}:${arangoDBserverPort}`;
    logger.info(url);
    process.env.MOCK_SERVER_URL = url;

    return mockServer;
  } catch (error) {
    logger.error(error);
    await stopMockServer();
    throw new Error(error);
  }
};

export default async () => await startMockServer();

Finally, we are going to modify our main.ts file to initialize the ArangoDB with our NestJS application.

import { NestFactory } from '@nestjs/core';
import { INestApplication, Logger } from '@nestjs/common';

import { startMockServer, stopMockServer } from '../test/setup';

import { AppModule } from './app.module';

let baseUrl = '';
const port = process.env.PORT || 3000;
let app: INestApplication;
const logger = new Logger('Bootstrap');

async function stopArangoDBServer() {
  logger.debug('Stopping ArangoDB instance.');
  await stopMockServer();
  logger.debug('ArangoDB instance stopped.');
  app.close();
}

async function startArangoDBServer() {
  try {
    logger.debug('Starting ArangoDB instance.');
    const arangodbPort: number = Number(process.env.ARANGODB_PORT) || 8529;
    const arangodbServer = await startMockServer();
    const arangoDBserverIP = await arangodbServer.getContainerIpAddress();
    const arangoDBserverPort = String(
      await arangodbServer.getMappedPort(arangodbPort),
    );
    baseUrl = `http://${arangoDBserverIP}:${arangoDBserverPort}`;
    process.env.BASE_URL = baseUrl;
    logger.log(`ArangoDB server running at ${baseUrl}`);
    logger.debug('ArangoDB instance started.');
  } catch (error) {
    logger.error(error);
    await stopArangoDBServer();
  }
}

async function bootstrap() {
  await startArangoDBServer();

  app = await NestFactory.create(AppModule);
  await app.listen(port);
  logger.log(
    `arangodb-axiosfit application running at http://localhost:${port}`,
  );
}

bootstrap();

process.on('SIGINT', stopArangoDBServer);
process.on('SIGQUIT', stopArangoDBServer);
process.on('SIGTERM', stopArangoDBServer);

After all, you can start the application npm start and see the ArangoDB server running at your computer:

odin@asgard:~/issues $ npm start

[Nest] 1193   - 02/28/2020, 5:10:53 PM   [Bootstrap] Starting ArangoDB instance.
[Nest] 1193   - 02/28/2020, 5:11:00 PM   [Bootstrap] ArangoDB server running at http://localhost:42359
[Nest] 1193   - 02/28/2020, 5:11:00 PM   [Bootstrap] ArangoDB instance started.
[Nest] 1193   - 02/28/2020, 5:11:00 PM   [NestFactory] Starting Nest application... +75ms
[Nest] 1193   - 02/28/2020, 5:11:00 PM   [InstanceLoader] AppModule dependencies initialized +9ms
[Nest] 1193   - 02/28/2020, 5:11:00 PM   [RoutesResolver] AppController {/}: +4ms
[Nest] 1193   - 02/28/2020, 5:11:00 PM   [RouterExplorer] Mapped {/, GET} route +2ms
[Nest] 1193   - 02/28/2020, 5:11:00 PM   [NestApplication] Nest application successfully started +2ms
[Nest] 1193   - 02/28/2020, 5:11:00 PM   [Bootstrap] arangodb-axiosfit application running at http://localhost:3000

'INFO' Check line [Bootstrap] ArangoDB server running at [URL] to access ArangoDB web interface.

The base project is done and able to continue creating, now, the Axiosfit services.

Thankfully to NestJS module system, we are going to create our own arangodb module and we will be able to reuse it in other projects if we want. To do so, we only need to create the module either manually or using the NestJS CLI with the following command: nest g module arangodb. After that, the project structure will be like this one:

ArangoDB has different REST API endpoints grouped by category. Due to this organization, we are going to create a class, arangodb.axiosfit.service.ts, to manage each category and each category will have its own Axiosfit service into the services folder.

'INFO' We are only going to create services to manage the endpoints that we need for this project.

To start doing this, we are going to create our Axiosfit services.

'INFO' I am going to show how to create the collections.axiosfit.service.ts and you can get the rest of services and entities from the repository.

Let's start creating the collections.axiosfit.service.ts file inside src/arangodb/services folder and adding the CollectionService class.

export class CollectionService {

}

Inside this class, we are going to manage some of the ArangoDB REST API endpoints related to collections.

To enable the Axiosfit features for this class, we need to add the @HTTP main decorator that indicates the class will be an Axiosfit instance.

import { HTTP } from '@yggdrasilts/axiosfit';

@HTTP()
export class CollectionService {

}

By default, this decorator enables Axiosfit instance to use Observables but, in this case, we are going to change this default configuration to use Promises instead. We are going to enable the Axiosfit logger as well.

import { HTTP } from '@yggdrasilts/axiosfit';

@HTTP({ usePromises: true, enableAxiosLogger: true })
export class CollectionService {

}

Ok. We already have the Axiosfit base service to manage the collection requests. Now, we are going to add some methods needed to create collections and getting their information.

The endpoints to manage will be the following ones:

Create collection: POST /_db/{database-name}/_api/collection
Get collection information: GET /_db/{database-name}/_api/collection/{collection-name}

You can see that we are going to manage some variables in our requests:

Methods: We need to have a GET and POST.
Path: We need to manage the database and collection names.
Body: Also, we need to send body information.

To manage all of these things, Axiosfit give us specific decorators:

Methods: We are going to use @GET and @POST.
Path: @Path will help us to manage the database and collection names.
Body: And @Body decorator is able to manage the body data.

Finally, Axiosfit uses axios to manage the requests. For this reason, all the requests will respond with an AxiosResponse object where the data will be the answer to the endpoints.

Getting all together, the CollectionService looks like this:

import { AxiosResponse, HTTP, GET, POST, Path, Body } from '@yggdrasilts/axiosfit';

import { CollectionCreateOptions, CreateCollectionResponse, CollectionInfo } from '../entities';

@HTTP({ usePromises: true, enableAxiosLogger: true })
export class CollectionService {
  /**
   * Return information about a collection.
   *
   * @param {string} db The name of the database.
   * @param {string} collection The name of the collection.
   * @returns {Promise<AxiosResponse<CollectionInfo>>} Data {@link CollectionInfo}
   * @memberof CollectionService
   */
  @GET('/_db/:db/_api/collection/:collection')
  public getCollectionInfo(@Path('db') db: string, @Path('collection') collection: string): Promise<AxiosResponse<CollectionInfo>> {
    return null;
  }

  /**
   * Create collection.
   *
   * @param {string} db The name of the database.
   * @param {CollectionCreateOptions} body {@link CollectionCreateOptions}
   * @returns {Promise<AxiosResponse<CreateCollectionResponse>>} Data {@link CreateCollectionResponse}
   * @memberof CollectionService
   */
  @POST('/_db/:db/_api/collection')
  public createCollection(@Path('db') db: string, @Body() body: CollectionCreateOptions): Promise<AxiosResponse<CreateCollectionResponse>> {
    return null;
  }
}

As you see, using Axiosfit the requests are organized and stored in one class, you can manage the path using variables and of course, you can send body data if the endpoint requires it.

The last thing that we need to do is to instantiate the Axiosfit service to be able to use it but before, and after the Axiosfit services creation, we need to modify our modules, arangodb.module.ts and app.module.ts, adapt our main.ts file and finally, instantiate our Axiosfit services giving them the ArangoDB URL inside our arangodb.axiosfit.service.ts.

To do so, we are going to use the Dynamic Modules feature provided by NestJS. Using this technique, we will be able to register our modules passing them the ArangoDB URL as a variable. Let's start modifying arangodb.module.ts file.

import { Module, DynamicModule } from '@nestjs/common';

import { ArangoDBService } from './arangodb.axiosfit.service';

@Module({})
export class ArangodbModule {
  static register(baseUrl: string): DynamicModule {
    return {
      module: ArangodbModule,
      providers: [
        {
          provide: 'BASE_URL',
          useValue: baseUrl,
        },
        ArangoDBService,
      ],
      exports: [ArangoDBService],
    };
  }
}

You can see that instead of passing the configurations inside the @Module decorator, we have created a static register method that needs a string variable, baseUrl. This will be the ArangoDB URL. Also, we have created a new provider BASE_URL that we will be used to build the ArangoDBService.

import { Injectable, Inject, Logger } from '@nestjs/common';

import { Axiosfit } from '@yggdrasilts/axiosfit';

import { AdminService, DatabaseService, CollectionService, BulkService } from './services';

@Injectable()
export class ArangoDBService {
  private readonly logger = new Logger(ArangoDBService.name);

  public adminService: AdminService;
  public databaseService: DatabaseService;
  public collectionService: CollectionService;
  public bulkService: BulkService;

  constructor(@Inject('BASE_URL') baseUrl: string) {
    this.logger.debug(`Initializing ArangoDBService services using ${baseUrl}...`);
    // Initialize ArangoDB services
    this.adminService = new Axiosfit<AdminService>().baseUrl(baseUrl).create(AdminService);
    this.adminService = new Axiosfit<AdminService>().baseUrl(baseUrl).create(AdminService);
    this.databaseService = new Axiosfit<DatabaseService>().baseUrl(baseUrl).create(DatabaseService);
    this.collectionService = new Axiosfit<CollectionService>().baseUrl(baseUrl).create(CollectionService);
    this.bulkService = new Axiosfit<BulkService>().baseUrl(baseUrl).create(BulkService);
  }
}

Now, it turns to the app.module.ts file.

import { Module, DynamicModule } from '@nestjs/common';

import { AppController } from './app.controller';
import { AppService } from './app.service';

import { ArangodbModule } from './arangodb/arangodb.module';

@Module({})
export class AppModule {
  static register(baseUrl: string): DynamicModule {
    return {
      module: AppModule,
      imports: [ArangodbModule.register(baseUrl)],
      controllers: [AppController],
      providers: [AppService],
    };
  }
}

We have used the same technique here to pass the baseUrl variable between modules. And finally, we need to adapt our main.ts where we have the ArangoDB URL.

...
async function bootstrap() {
  await startArangoDBServer();

  app = await NestFactory.create(AppModule.register(baseUrl));
  await app.listen(port);
  logger.log(
    `arangodb-axiosfit application running at http://localhost:${port}`,
  );
}
...

After all these modifications, we can run the application again, npm start, and see how the application is running fine.

The last thing to do is use the Axiosfit services to load the Game Of Thrones data inside ArangoDB.

'INFO' You can download the resources from the repository or from the ArangoDB datasets.

To do so, we are going to add a new method inside our arangodb.axiosfit.service.ts called initGOTData.

import { Injectable, Inject, Logger } from '@nestjs/common';

import { Axiosfit } from '@yggdrasilts/axiosfit';

import * as Characters from '../../test/resources/GameOfThrones/Characters.json';
import * as Traits from '../../test/resources/GameOfThrones/Traits.json';
import * as ChildOf from '../../test/resources/GameOfThrones/ChildOf.json';
import * as Locations from '../../test/resources/GameOfThrones/Locations.json';

import { CollectionType, QueryType } from './entities';

import { AdminService, DatabaseService, CollectionService, BulkService } from './services';

@Injectable()
export class ArangoDBService {
  private readonly logger = new Logger(ArangoDBService.name);

  private readonly db = 'GameOfThrones';
  private readonly collections: { name: string; type: CollectionType; data: object[] }[] = [
    { name: 'Characters', type: CollectionType.DOCUMENT, data: Characters },
    { name: 'Traits', type: CollectionType.DOCUMENT, data: Traits },
    { name: 'ChildOf', type: CollectionType.EDGES, data: ChildOf },
    { name: 'Locations', type: CollectionType.DOCUMENT, data: Locations },
  ];

  public adminService: AdminService;
  public databaseService: DatabaseService;
  public collectionService: CollectionService;
  public bulkService: BulkService;

  constructor(@Inject('BASE_URL') baseUrl: string) {
    this.logger.debug(`Initializing ArangoDBService services using ${baseUrl}...`);
    // Initialize ArangoDB services
    this.adminService = new Axiosfit<AdminService>().baseUrl(baseUrl).create(AdminService);
    this.adminService = new Axiosfit<AdminService>().baseUrl(baseUrl).create(AdminService);
    this.databaseService = new Axiosfit<DatabaseService>().baseUrl(baseUrl).create(DatabaseService);
    this.collectionService = new Axiosfit<CollectionService>().baseUrl(baseUrl).create(CollectionService);
    this.bulkService = new Axiosfit<BulkService>().baseUrl(baseUrl).create(BulkService);
  }

  async initGOTData() {
    const databaseResponse = await this.databaseService.createDatabase({ name: this.db });
    if (databaseResponse.data.error) {
      throw new Error(`Problems creating database '${this.db}'. ${databaseResponse.data.errorMessage}`);
    }
    this.logger.debug(`Database ${this.db} created.`);

    for (const collection of this.collections) {
      const createCollectionResponse = await this.collectionService.createCollection(this.db, {
        name: collection.name,
        type: collection.type,
      });
      if (createCollectionResponse.data.error) {
        throw new Error(`Error creating collection '${collection.name}'.`);
      }
      const collectionInfo = await this.collectionService.getCollectionInfo(this.db, collection.name);
      if (collectionInfo.data.error) {
        throw new Error(`Error checking collection '${collection.name}'.`);
      }
      const bulkImportResponse = await this.bulkService.importJson(
        this.db,
        { type: QueryType.LIST, collection: collection.name },
        collection.data,
      );
      if (bulkImportResponse.data.error) {
        throw new Error(`Error importing data for collection '${collection.name}'.`);
      }
    }
  }
}

'INFO' This code is based in the import.js file from the ArangoDB datasets.

Finally, we create our bootstrap endpoint in our app.controller.ts to call this initialization.

import { Controller, Get, Logger } from '@nestjs/common';

import { AppService } from './app.service';
import { ArangoDBService } from './arangodb/arangodb.axiosfit.service';

@Controller()
export class AppController {
  private readonly logger = new Logger(AppController.name);

  constructor(private readonly appService: AppService, private readonly arangodbService: ArangoDBService) {}

  @Get('bootstrap')
  async initArangoDB(): Promise<string> {
    this.logger.debug('Initializing ArangoDB with GOT data...');
    await this.arangodbService.initGOTData();
    return 'Game Of Thrones data added to ArangoDB server.';
  }

  @Get()
  async getHello(): Promise<string> {
    this.logger.debug(JSON.stringify((await this.arangodbService.adminService.getStatus()).data));
    return this.appService.getHello();
  }
}

Now, we can start our application, npm start, go to http://localhost:3000/bootstrap and, if there are no errors, we will see the following message in the browser: Game Of Thrones data added to ArangoDB server. and if we go to the terminal, we can see the Axiosfit logs:

Also, if we go to ArangoDB web UI, [ARANGODB_SERVER_URL]/_db/GameOfThrones/_admin/aardvark/index.html#collections, we will be able to see the collections and edges imported.

'INFO' ARANGODB_SERVER_URL can be found in the logs in the line [Bootstarp] ArangoDB server running at...

Conclusion

In this post we have seen how using Axiosfit we have been able to create organized services to call different ArangoDB REST endpoints to load or get data. Axiosfit give us specific decorators facilitating the request management and storage.

You can see more examples inside the Axiosfit samples and also reading its documentation.

If you have enjoyed this post and Axiosfit library, I would really appreciate your feedback giving us Github stars, open Issues requesting new features, problems using the library and also your comments :-)

Enjoy!! 🌳

Which Package Manager should I choose?

David (ダビッド ) — Mon, 10 Feb 2020 19:36:34 +0000

Original Post

Package Manager is the backbone in every TypeScript/NodeJS project. There are several options to choose but, because of its popularity, npm, yarn or pnpm are the candidates.

In my experience, I have been switching between npm and yarn. The first choice was npm. It was the first package manager in the NodeJS ecosystem and it was the obligatory step if you started to do things with NodeJS.

Later, when yarn came to the playground, I changed to try it because I had read different articles with good impressions and I have to say it was mine as well.

After some time, and some npm improvements, I came back to npm, not without testing pnpm briefly before but, with not a good taste. At the beginning of this year, the yarn team released the version 2 but, unlike my previous try, this time I continued using npm, I am happy with it and it is not needed any package manager change in my projects.

I have made my decision and I have chosen npm but not everyone is choosing npm and if you want to share your projects with others developers, I think it is a good practice try not to force anybody to use your package manager selection so, I started to search some way to create projects with an agnostic package manager and I came across with npm-run-all library.

This library is able to run your run-scripts in different ways (serial, parallel) with no package manager indications, I mean, you can use npm, yarn or your favorite package manager with no worries about the other scripts execution.

Our Axiosfit library is using it and I encourage you to try it as well.

If you want to see a more complex sample, also you can check our TypeScript Full Stack project.

Enjoy!! 🌳

'INFO' Although it is true that there are some other tools like Gulp or Grunt to customize your run tasks, I like to be independent and only use my package manager scripts.

NVM - Node Version Manager

David (ダビッド ) — Tue, 04 Feb 2020 18:42:56 +0000

Original Post

The first thing that every TypeScript (JavaScript) developer has to do if it wants to start with their project is installing the JavaScript runtime. Nowadays, we have several known options to choose: NodeJS or Deno. For this post, I am going to choose NodeJS.

All we already know that the JavaScript ecosystem is evolving fastly and every month we have to manage some fixing, minor or even major library updates. This is also happening with the NodeJS runtime. Because of this fast-changing environment, I recommend using some version manager, in this case, nvm is the greatest option to manage your NodeJS runtime.

As an experienced developer, I do not recommend to develop with Windows but if you are using it, first, good luck 🤪, and also you can check the NVM for windows (I am not going to talk about it in this post).

As they said in the Github page, it is to easy to install or update nvm, you only have to run the install script using cURL or wget command:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash

'INFO' Check nvm Github page to get the latest version.

Once installed, you can manage your NodeJS runtime easily changing to the NodeJS version that you want, reinstalling global packages within your local NodeJS version, etc.

odin@asgard:~/NVM $ nvm

Node Version Manager (v0.35.2)

Note: <version> refers to any version-like string nvm understands. This includes:
  - full or partial version numbers, starting with an optional "v" (0.10, v0.1.2, v1)
  - default (built-in) aliases: node, stable, unstable, iojs, system
  - custom aliases you define with `nvm alias foo`

 Any options that produce colorized output should respect the `--no-colors` option.

Usage:
  nvm --help                                Show this message
  nvm --version                             Print out the installed version of nvm
  nvm install [-s] <version>                Download and install a <version>, [-s] from source. Uses .nvmrc if available
    --reinstall-packages-from=<version>     When installing, reinstall packages installed in <node|iojs|node version number>
    --lts                                   When installing, only select from LTS (long-term support) versions
    --lts=<LTS name>                        When installing, only select from versions for a specific LTS line
    --skip-default-packages                 When installing, skip the default-packages file if it exists
    --latest-npm                            After installing, attempt to upgrade to the latest working npm on the given node version
    --no-progress                           Disable the progress bar on any downloads
  nvm uninstall <version>                   Uninstall a version
  nvm uninstall --lts                       Uninstall using automatic LTS (long-term support) alias `lts/*`, if available.
  nvm uninstall --lts=<LTS name>            Uninstall using automatic alias for provided LTS line, if available.
  nvm use [--silent] <version>              Modify PATH to use <version>. Uses .nvmrc if available
    --lts                                   Uses automatic LTS (long-term support) alias `lts/*`, if available.
    --lts=<LTS name>                        Uses automatic alias for provided LTS line, if available.
  nvm exec [--silent] <version> [<command>] Run <command> on <version>. Uses .nvmrc if available
    --lts                                   Uses automatic LTS (long-term support) alias `lts/*`, if available.
    --lts=<LTS name>                        Uses automatic alias for provided LTS line, if available.
  nvm run [--silent] <version> [<args>]     Run `node` on <version> with <args> as arguments. Uses .nvmrc if available
    --lts                                   Uses automatic LTS (long-term support) alias `lts/*`, if available.
    --lts=<LTS name>                        Uses automatic alias for provided LTS line, if available.
  nvm current                               Display currently activated version of Node
  nvm ls [<version>]                        List installed versions, matching a given <version> if provided
    --no-colors                             Suppress colored output
    --no-alias                              Suppress `nvm alias` output
  nvm ls-remote [<version>]                 List remote versions available for install, matching a given <version> if provided
    --lts                                   When listing, only show LTS (long-term support) versions
    --lts=<LTS name>                        When listing, only show versions for a specific LTS line
    --no-colors                             Suppress colored output
  nvm version <version>                     Resolve the given description to a single local version
  nvm version-remote <version>              Resolve the given description to a single remote version
    --lts                                   When listing, only select from LTS (long-term support) versions
    --lts=<LTS name>                        When listing, only select from versions for a specific LTS line
  nvm deactivate                            Undo effects of `nvm` on current shell
  nvm alias [<pattern>]                     Show all aliases beginning with <pattern>
    --no-colors                             Suppress colored output
  nvm alias <name> <version>                Set an alias named <name> pointing to <version>
  nvm unalias <name>                        Deletes the alias named <name>
  nvm install-latest-npm                    Attempt to upgrade to the latest working `npm` on the current node version
  nvm reinstall-packages <version>          Reinstall global `npm` packages contained in <version> to current version
  nvm unload                                Unload `nvm` from shell
  nvm which [current | <version>]           Display path to installed node version. Uses .nvmrc if available
  nvm cache dir                             Display path to the cache directory for nvm
  nvm cache clear                           Empty cache directory for nvm

Example:
  nvm install 8.0.0                     Install a specific version number
  nvm use 8.0                           Use the latest available 8.0.x release
  nvm run 6.10.3 app.js                 Run app.js using node 6.10.3
  nvm exec 4.8.3 node app.js            Run `node app.js` with the PATH pointing to node 4.8.3
  nvm alias default 8.1.0               Set default node version on a shell
  nvm alias default node                Always default to the latest available node version on a shell

Note:
  to remove, delete, or uninstall nvm - just remove the `$NVM_DIR` folder (usually `~/.nvm`)

'INFO' Check nvm Usage section to know more about the commands.

Which other tools are you using? ⚒👇

Enjoy!! 🌳

TypeScript Full Stack project (Part III) - NestJS, the server-side

David (ダビッド ) — Sat, 01 Feb 2020 10:30:26 +0000

The previous post showed the client-side part. Now, we are going to create the server-side using NestJS. That team has done a very great job with the framework but also has awesome documentation as well. If you still not knowing NestJS, I strongly recommend you to take a look.

Server-side

Let's go to create the NestJS application that we use it as server-side part using its CLI and the following options:

package-manager: npm. I prefer npm than yarn and I am using it inside the rest of the project.

odin@asgard:~/issues $ nest new server --package-manager npm

The new folder structure will contain a new folder server, with the NestJS application.

issues
  ├── client
  ├── .git
  ├── .gitignore
  ├── package.json
  └── server

To start the server from the parent folder, issues, we are going to modify the package.json adding a new start:server script.

{
  ...
  "scripts": {
    "start:server": "npm start --prefix ./server"
  },
  ...
}

Now we are able to start the NestJS application:

odin@asgard:~/issues $ npm run start:server

Because of the purpose of this post is not to build a NestJS application, you can get the server-side code from this repository.

If you want to know more about how to use the NestJS CLI, Kamil Mysliwiec has written a very interesting post.

In the next post, I am going to explain how to create the shared libraries part.

Create an API service using nestframework

David (ダビッド ) — Sun, 26 Jan 2020 09:56:32 +0000

Original Post

In this post, I want to show you how easy is to create a backend API using the nestframework and also, create the swagger documentation.

Introduction
Part 1 - Project Creation
- API Service
- Requirements
- Service Creation
Part 2 - EchartsService Creation
- Delete Unnecessary Files
- Modifying app.controller.ts file
- Modifying app.service.ts file
Part 3 - Logger, Validations and Pipes, Handling Errors and Modules
- Logger
- Validations and Pipes
- Handling Errors
- Modules
Part 4 - Swagger
To Sum Up

Introduction

I have to say that I am in love with NestJS to build backend applications, services, libraries, etc. using TypeScript. This framework has been the fastest-growing nodejs framework in 2019 due to its awesome features that, besides helps you to build your code, if you are thinking about to build medium or large services and you want it to be maintainable and scalable, also it give you a way to have your project well structured.

Part 1 - Project Creation

API Service

The service that I am going to create is a simple API service that contains 2 endpoints. Each endpoint returns a chart as image in different formats:

/image: Return an image as attachment.
/image-base64: Return an image as base64 string data.

To build the charts, I am going to use node-echarts library to get ECharts images in the backend world. ECharts is an open-sourced JavaScript visualization tool that in my opinion, it has great options to build tons of different chart types.

You can check its examples if you don't believe me 😛

Let's begging to create.

Requirements

nodejs (nvm)
NestJS CLI
node-echarts (OS package dependencies)
Visual Studio Code (or your preferred Code Editor / IDE)

Service Creation

Once all requirements are installed, I am going to use the NestJS CLI to create the project structure:

odin@asgard:~/Blog $ nest new echarts-api-service -p npm

After the execution, I have opened the ~/Blog/echarts-api-service folder in my Visual Studio Code and this is the project structure:

Here, you can see more about the NestJS project structure. I assume that you are familiar with this structure and I continue building the service.

Now, you can run the service using npm start and the service will respond a Hello World! string doing the following request: http://localhost:3000, as you can see in the following image (I'm using REST Client extension for Visual Studio Code).

Before continue, I am going to add a .prettierc file for code formatting using Prettier with the following options:

{
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false,
  "trailingComma": "all",
  "printWidth": 140
}

And also I like to add the hot reload option to check faster my code changes. To do this, and because I am using NestJS CLI, it is only necessary to change the start:dev script inside the package.json as nest start --watch --webpack. In NestJS Hot Reload documentation you can see more options.

Now, I am ready to modify the code to add the above endpoints /image and /image-base64.

'End of Part 1' You can check the project code in the part-1 tag

Part 2 - EchartsService creation

I am going to modify/delete all the not needed files to adapt the project in a better way.

Delete unnecessary files

In my case, It is not needed to use the app.controller.spec.ts. I delete it.

Modifying app.controller.ts file

This file is responsible for handling incoming requests and returning responses to the client and it is the site where I am going to create the endpoints to let NestJS know the code to use when receiving the requests.

import { Controller, Post } from '@nestjs/common';
import { AppService } from './app.service';

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}

  @Post('image')
  async getImage(): Promise<void> {
    console.log('getImage');
  }

  @Post('image-base64')
  async getImageInBase64(): Promise<string> {
    return 'getImageInBase64';
  }
}

More information about controllers in NestJS Controllers documentation.

Once modified, you can start the service again npm run start:dev and execute both requests:

POST http://localhost:3000/image

POST http://localhost:3000/image-base64

Modifying app.service.ts file

The service is responsible for data storage and retrieval, in my case, the service will be the chart image creator.

Because I use ECharts, with node-echarts, I am going to create a new folder called echarts and inside another folder called entities. After this, move the app.service.ts to this new folder echarts and renamed it to echarts.service.ts.

'WARN' If you use Visual Studio Code, you will see that in every change, the editor adapts the code. Take care if not and adapt the code to be compiled.

After the changes, I am going to create the getImage method which has the code to create the ECharts image. But first, I am going to install the necessary npm dependencies to create the method:

npm i --save imagemin imagemin-pngquant imagemin-jpegtran https://github.com/telco2011/node-echarts.git
npm i --save-dev @types/imagemin @types/echarts

And the method:

async getImage(opt: Options): Promise<Buffer> {
  return buffer(
    node_echarts({
      option: opt.echartOptions,
      width: opt.options?.width || DEFAULT_IMAGE_WIDTH,
      height: opt.options?.height || DEFAULT_IMAGE_HEIGHT,
    }),
    {
      plugins: [
        imageminJpegtran(),
        imageminPngquant({
          quality: [0.6, 0.8],
        }),
      ],
    },
  );
}

Once all the changes are done, your code won't compile due to the compiler does not find the Options name. This name will be a new class with two options, one to store the ECharts options to create the chart and other to store some properties to create the image that will contain the ECharts.

To do so, I am going to create the next 3 files:

src/echarts/entities/options.entity.ts

import { EChartOption } from 'echarts';

import { ImageOptions } from './image-options.entity';

/**
 * Class to configure echarts options.
 */
export class Options {
  echartOptions: EChartOption;

  options?: ImageOptions;
}

src/echarts/entities/image-options.entity.ts

/**
 * Class to configure image options.
 */
export class ImageOptions {
  // Image width
  width?: number;

  // Image height
  height?: number;

  // Download file name
  filename?: string;
}

'INFO' The file name structure is important in NestJS because it will be relevant for Part 4 of this post. It is IMPORTANT that the entity file name follows the next structure: [NAME].entity.ts

src/echarts/constants.ts

/**
 * Application constants.
 */
export const DEFAULT_IMAGE_WIDTH = 600;

export const DEFAULT_IMAGE_HEIGHT = 250;

export const DEFAULT_FILENAME = 'echarts.png';

Finally the echarts.service.ts code is the following:

import { Injectable } from '@nestjs/common';

import * as node_echarts from 'node-echarts';

import { buffer } from 'imagemin';
import imageminPngquant from 'imagemin-pngquant';
import * as imageminJpegtran from 'imagemin-jpegtran';

import { DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT } from './constants';

import { Options } from './entities/options.entity';

@Injectable()
export class EchartsService {
  /**
   * Get the echarts as image.
   *
   * @param {Options} opt {@link Options}.
   */
  async getImage(opt: Options): Promise<Buffer> {
    return buffer(
      node_echarts({
        option: opt.echartOptions,
        width: opt.options?.width || DEFAULT_IMAGE_WIDTH,
        height: opt.options?.height || DEFAULT_IMAGE_HEIGHT,
      }),
      {
        // plugins to compress the image to be sent
        plugins: [
          imageminJpegtran(),
          imageminPngquant({
            quality: [0.6, 0.8],
          }),
        ],
      },
    );
  }
}

After these updates, the code compiles well and you can start the server again npm run start:dev.

'HINT' If you want, you can add/modify/delete all of these files without stopping the service and you will see how the Hot Reload feature works.

Now, I am going to connect the controller to the service to get all the functionality on. To do this, I am going to make some modifications in the app.controller.ts file to call the getImage method inside the service:

import { Controller, Post, Header, Body, Res } from '@nestjs/common';
import { Response } from 'express';

import { HttpHeaders, MimeType, BufferUtils } from '@yggdrasilts/volundr';

import { EchartsService } from './echarts/echarts.service';
import { Options } from './echarts/entities/options.entity';
import { DEFAULT_FILENAME } from './echarts/constants';

@Controller()
export class AppController {
  constructor(private readonly echartsService: EchartsService) {}

  @Post('image')
  @Header(HttpHeaders.CONTENT_TYPE, MimeType.IMAGE.PNG)
  async getImage(@Body() opt: Options, @Res() response: Response): Promise<void> {
    const result = await this.echartsService.getImage(opt);
    response.setHeader(HttpHeaders.CONTENT_LENGTH, result.length);
    response.setHeader(HttpHeaders.CONTENT_DISPOSITION, `attachment;filename=${opt.options?.filename || DEFAULT_FILENAME}`);
    response.end(result);
  }

  @Post('image-base64')
  @Header(HttpHeaders.CONTENT_DISPOSITION, MimeType.TEXT.PLAIN)
  async getImageInBase64(@Body() opt: Options): Promise<string> {
    return BufferUtils.toBase64(await this.echartsService.getImage(opt));
  }
}

The code does not compile because of a dependency is not installed yet. This dependency is @yggdrasilts/volundr, part of our toolset. This library is a set of utilities for TypeScript developments. To compile, you only need to install it using npm i --save @yggdrasilts/volundr.

If you want to know more about it, take a look to its repository @yggdratilsts/volundr

If you see the code, it is very easy to understand it because the NestJS decorators are very explicit.

@post() decorator indicates that both endpoints are listening POST request.
I am using the @Header() decorator to set the response Headers.
And also I am using @Body() decorator to get the request body to be used inside the service.

At this point, if you start the service npm run start:dev you will have available the wanted endpoints:

POST http://localhost:3000/image

POST http://localhost:3000/image-base64

I'm getting the *echartOptions data from the ECharts Example - Stacked Area Chart*

'End of Part 2' You can check the project code in the part-2 tag

Part 3 - Logger, Validations and Pipes, Handling Errors and Modules

Now, the application is functional but before to finish, I would like to add, and talk, about some other features that NestJS provides to create a service.

Logger

In my opinion, every project should have a good logger implementation because it is the principal way to know what is happening in the flow. In this case, NestJS has a built-in text-based Logger that is enough for our service.

To use this logger, it is only necessary to instantiate the class and start using it. For example:

import { Controller, Get, Logger } from '@nestjs/common';

@Controller()
export class MyController {
  private readonly logger = new Logger(MyController.name);

  @Get('log-data')
  getImage(): void {
      this.logger.debug('Logging data with NestJS it's so easy...');  
  }
}

The service that I am creating will use this logger for the app.controller.ts, body.validation.pipe.ts and http-exception.filter.ts. I am going to talk about these two last files in the following parts of the post.

If you want to know more about how to use the NestJS logger, you can go to its documentation. Also, in the following posts, I will talk about it.

Validations and Pipes

Like NestJS documentation says in its Validation section, it is best practice to validate the correctness of any data sent into a web application. For this reason, I am going to use the Object Schema Validation and creating a custom Pipe to do so.

First, I am going to adapt the project installing some needed dependencies and creating and modifying some files and folders.

Installing needed dependencies

npm i --save @hapi/joi
npm i --save-dev @types/hapi__joi

@hapi/joi lets you describe your data using a simple, intuitive, and readable language

Creating new files and folders

src/pipes/body.validation.pipe.ts

import { PipeTransform, Injectable, ArgumentMetadata, BadRequestException, Logger } from '@nestjs/common';

import { Schema } from '@hapi/joi';

/**
 * Pipe to validate request body.
 */
@Injectable()
export class BodyValidationPipe implements PipeTransform {
  private readonly logger = new Logger(BodyValidationPipe.name);

  constructor(private readonly schema: Schema) {}

  transform(value: any, metadata: ArgumentMetadata) {
    this.logger.debug(`Input body: ${JSON.stringify(value)}`);
    const { error } = this.schema.validate(value);
    if (error) {
      this.logger.error(`Error validating body: ${JSON.stringify(error)}`);
      throw new BadRequestException(`Validation failed: ${error.message}`);
    }
    return value;
  }
}

Modifying app.controller.ts

import { Controller, Post, Header, Body, Res, UsePipes, Logger } from '@nestjs/common';
import { Response } from 'express';

import { HttpHeaders, MimeType, BufferUtils } from '@yggdrasilts/volundr';

import { EchartsService } from './echarts/echarts.service';
import { Options } from './echarts/entities/options.entity';
import { DEFAULT_FILENAME, IMAGE_BODY_VALIDATION_SCHEMA } from './echarts/constants';

import { BodyValidationPipe } from './pipes/body.validation.pipe';

@Controller()
export class AppController {
  private readonly logger = new Logger(AppController.name);

  constructor(private readonly echartsService: EchartsService) {}

  @Post('image')
  @Header(HttpHeaders.CONTENT_TYPE, MimeType.IMAGE.PNG)
  @UsePipes(new BodyValidationPipe(IMAGE_BODY_VALIDATION_SCHEMA))
  async getImage(@Body() opt: Options, @Res() response: Response): Promise<void> {
    const result = await this.echartsService.getImage(opt);
    response.setHeader(HttpHeaders.CONTENT_LENGTH, result.length);
    response.setHeader(HttpHeaders.CONTENT_DISPOSITION, `attachment;filename=${opt.options?.filename || DEFAULT_FILENAME}`);
    response.end(result);
  }

  @Post('image-base64')
  @Header(HttpHeaders.CONTENT_DISPOSITION, MimeType.TEXT.PLAIN)
  @UsePipes(new BodyValidationPipe(IMAGE_BODY_VALIDATION_SCHEMA))
  async getImageInBase64(@Body() opt: Options): Promise<string> {
    return BufferUtils.toBase64(await this.echartsService.getImage(opt));
  }
}

Modifying echarts/constants.ts

/**
 * Application constants.
 */
import * as Joi from '@hapi/joi';

export const DEFAULT_IMAGE_WIDTH = 600;

export const DEFAULT_IMAGE_HEIGHT = 250;

export const DEFAULT_FILENAME = 'echarts.png';

export const IMAGE_BODY_VALIDATION_SCHEMA = Joi.object({
  echartOptions: Joi.object().required(),
  options: Joi.object().optional(),
});

Now, if you start the service npm run start:dev and do a request with an invalid body, you will see an error.

POST http://localhost:3000/image

This is a simple error handling that NestJS provides by default but I like to customize it and show more readable error using NestJS Exceptions Filters.

'End of Part 3.1' You can check the project code in the part-3.1 tag

Handling Errors

First, I am going to create my custom Exception Filter and activated it in the global-scope to manage all endpoint errors.

To do this purpose, I am going to create a new folder and file called src/exceptions/http-exception.filter.ts

import { ExceptionFilter, Catch, ArgumentsHost, HttpException, Logger } from '@nestjs/common';
import { Request, Response } from 'express';

import { HttpHeaders, MimeType } from '@yggdrasilts/volundr';

/**
 * Filter to catch HttpException manipulating the response to get understandable response.
 */
@Catch(HttpException)
export class HttpExceptionFilter implements ExceptionFilter {
  private readonly logger = new Logger(HttpExceptionFilter.name);

  catch(exception: HttpException, host: ArgumentsHost) {
    const ctx = host.switchToHttp();
    const response = ctx.getResponse<Response>();
    const request = ctx.getRequest<Request>();
    const status = exception.getStatus();
    const message = exception.message;

    const errorData = {
      timestamp: new Date().toISOString(),
      message,
      details: {
        request: {
          method: request.method,
          query: request.query,
          body: request.body,
        },
        path: request.url,
      },
    };
    this.logger.error(`${JSON.stringify(errorData)}`);
    response.setHeader(HttpHeaders.CONTENT_TYPE, MimeType.APPLICATION.JSON);
    response.status(status).json(errorData);
  }
}

This filter is similar to the one in NestJS Exception Filter section, but I have made some personal customizations to get more information in the error data.

After the file creation, it is needed to activate this filter in the global-scope. To do so, I am going to modify the main.js file:

import { NestFactory } from '@nestjs/core';

import { AppModule } from './app.module';

import { HttpExceptionFilter } from './exceptions/http-exception.filter';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);

  app.useGlobalFilters(new HttpExceptionFilter());

  await app.listen(3000);
}
bootstrap();

Now, you can start the service again npm run start:dev and see how the error has changed.

POST http://localhost:3000/image

'End of Part 3.2' You can check the project code in the part-3.2 tag

Modules

To finalize this part, I am going to use modules to follow the structure that NestJS propose because I think this structure it is very intuitive to follow having different modules with their own functionality.

To do this, I am going to create the src/echarts/echarts.module.ts file:

import { Module } from '@nestjs/common';

import { EchartsService } from './echarts.service';

@Module({
  providers: [EchartsService],
  exports: [EchartsService],
})
export class EchartsModule {}

And modify the app.module.ts file to import this new module instead of importing the EcharsService directly:

import { Module } from '@nestjs/common';

import { EchartsModule } from './echarts/echarts.module';

import { AppController } from './app.controller';

@Module({
  imports: [EchartsModule],
  controllers: [AppController],
})
export class AppModule {}

Finally, I am going to check if the service continues working as before executing npm run start:dev and checking the endpoints with the REST Client VS extension like at the end of Part 2.

'End of Part 3.3' You can check the project code in the part-3.3 tag

Part 4 - Swagger

Providing good documentation for every API is essential if we want to be used by other people. There are lots of alternatives to create this documentation but NestJS has an awesome module that use Swagger for this purpose.

Kamil Mysliwiec, NestJS creator, has written a great article talking about the new NestJS Swagger module features. I recommend you to read it, it is very interesting.

Before to start documenting, it is necessary to install the NestJS Swagger module:

odin@asgard:~/Blog $ npm install --save @nestjs/swagger swagger-ui-express

Once installed, we bootstrap the service modifying the main.ts file like the documentation sais:

import { NestFactory } from '@nestjs/core';
import { SwaggerModule, DocumentBuilder } from '@nestjs/swagger';

import { AppModule } from './app.module';

import { HttpExceptionFilter } from './exceptions/http-exception.filter';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);

  app.useGlobalFilters(new HttpExceptionFilter());

  const options = new DocumentBuilder()
    .setTitle('Echarts API')
    .setDescription('API to get charts, using echartsjs, as image file.')
    .setExternalDoc('More about echartsjs', 'https://echarts.apache.org/en/index.html')
    .setVersion('1.0')
    .build();
  const document = SwaggerModule.createDocument(app, options);
  SwaggerModule.setup('api', app, document);

  await app.listen(3000);
}
bootstrap();

Now we can start the service npm run start:dev and automatically we will have the Swagger documentation at http://localhost:3000/api:

Don't you think this is so easy? 😉

If you are read the above Kamil Mysliwiec's post, with the new NestJS Swagger plugin version, the NestJS CLI has the ability to search in all of our code and create the Swagger documentation automatically. To do so, the only thing that we need to modify is the nest-cli.json file adding the following lines:

{
  ...
  "compilerOptions": {
    "plugins": ["@nestjs/swagger/plugin"]
  }
}

Once added, we can run the service again npm run start:dev but in this case, we are going to see the following error:

This is because the service is using the EchartOption and the NestJS Swagger plugin is not able to parse. Also easy to solve. I am going to document this particular object by myself adding the following NestJS Swagger decorators to the echartOptions variable inside the src/echarts/entities/options.entity.ts file:

import { ApiProperty } from '@nestjs/swagger';

import { EChartOption } from 'echarts';

import { ImageOptions } from './image-options.entity';

/**
 * Class to configure echarts options.
 */
export class Options {
  @ApiProperty({
    type: 'EChartOption',
    description: 'Chart configuration.',
    externalDocs: { url: 'https://echarts.apache.org/en/option.html' },
  })
  echartOptions: EChartOption;

  options?: ImageOptions;
}

Now, we can run the service again npm run start:dev and the Swagger documentation will have changed and we will have the new properties:

As I said before, don't you think this is so easy?

End of Part 4. You can check the project code in the part-4 tag

To Sum Up

As I said at the begging of this post, I am in love with NestJS because it is an awesome framework that helps you to create backend services in an efficient, reliable and scalable way, using TypeScript, with which I am in love as well. In this post, it has been shown several parts of NestJS framework and how it helps you to build a backend service easily.

I hope you have enjoyed reading it and learn, improve or discover this great framework. In the following link, I leave you the Github repository where you can find the project code.

yggdrasilts / echarts-api-service

This project is the sample used in the Create an API service using nestframework post showing how to create an API service using NestJS framework that use a service to return an ECharts image chart.

Echarts API Service

Description

This project is the sample used in the Create an API service using nestframework post showing how to create an API service using NestJS framework that use a service to return an ECharts image chart.

Requirements

OS	Command
OS X	`brew install pkg-config cairo pango libpng jpeg giflib`
Ubuntu	`sudo apt-get install libcairo2-dev libjpeg8-dev libpango1.0-dev libgif-dev build-essential g++`
Fedora	`sudo yum install cairo cairo-devel cairomm-devel libjpeg-turbo-devel pango pango-devel pangomm pangomm-devel giflib-devel`
Solaris	`pkgin install cairo pango pkg-config xproto renderproto kbproto xextproto`

More information in the node-echarts repository.

Installation

$ npm install

Running the app

# development
$ npm run start

# watch mode
$ npm run start:dev

Test

# e2e tests
$ npm run test:e2e

Stay in touch

Website - https://blog.yggdrasilts.com/
Twitter - @yggdrasilTS

License

This sample is MIT licensed.

View on GitHub

Enjoy!!

TypeScript Full Stack project (Part II) - Client-side

David (ダビッド ) — Sun, 19 Jan 2020 18:02:22 +0000

Original Post

In the previous post, I told about the project structure. Now, we are going to create the client-side.

Client-Side

Let's go to create the Angular application using its CLI and the following options:

name: issues-ui. Because the angular application will be the client-side project.
directory: client. I want a container folder different as the client-side project name.
enableIvy: true. I want to use Angular Ivy for compilation.
routing: true. The project will have routing to manage the page flow.
style: scss. And finally, I prefer to use scss to manage styles.

odin@asgard:~/issues $ ng new issues-ui --directory=client --enableIvy=true --routing=true --style=scss

The new folder structure will contain a new folder client, with the
angular application.

issues    
  ├── client    
  ├── .git    
  ├── .gitignore    
  └── package.json

To start the client from the parent folder, issues, we need to
modify the package.json adding a new start:ui script.

{    
  ...    
  "scripts": {
    "start:ui": "npm start --prefix ./client"    
  },
  ...
}

Now we are able to start the angular application:

odin@asgard:~/issues $ npm run start:ui

Once all is working, we commit all the changes to save the advance.

odin@asgard:~/issues $ git add .odin@asgard:~/issues $ git commit -m "UI working"

Because of the purpose of this post is not to build an angular application, you can get the client-side code from this repository.

TypeScript Full Stack project (Part I)

David (ダビッド ) — Wed, 15 Jan 2020 09:31:34 +0000

Original Post

Nowadays, when we want to build an application to give some service, we have to think which technological stack want to use. There are many options to select but here, we are going to talk about using TypeScript for all the platform building an Angular application for the client-side and using NestJS framework to build the server-side.

At this point, in the JavaScript world, all we already know Angular and NestJS framework has become very popular for all the developers who want to create server-side applications with JavaScript due to its greatest features to build scalable server-side TypeScript applications.

In this post, I do not want to show how to create applications using these frameworks. Rather than this, I am going to write the first of a series of posts where I want to show you one of the advantages of creating TypeScript applications for your entire platform, using Angular in the client-side and a NestJS on the server-side and sharing the data entities between both worlds.

Requirements

Before to start, we are going to list all the requirements to build the project structure:

NodeJS
- I recommend you to use nvm, for linux or Mac, or nvm-windows for Windows, to install the latest LTS version of NodeJS.
Angular CLI
Nest CLI
NPX
Git

Project structure

I want to start talking about how to create the project folder structure to manage the client, server and the shared libraries.

First of all, I am going to create the container folder, in my case, a full stack project called issues. This folder will be a npm project and of course, with git initialized.

odin@asgard:~/ $ mkdir issues
odin@asgard:~/ $ cd issues
odin@asgard:~/issues $ npm init -y
odin@asgard:~/issues $ git init

After this, the container folder will have only the package.json and .git folder.

issues
  ├── .git
  └── package.json

Now, I am going to modify the package.json file to get the properties that I want.

{
  "name": "issues",
  "version": "1.0.0",
  "description": "Sample of full stack project.",
  "keywords": [
      "angular",
      "nestjs",
      "typescript"
  ],
  "author": "David López <davidlopez.david@gmail.com>",
  "license": "MIT"
}

Also, I like to create the .gitignore file to manage the files not to be uploaded to git. For this purpose, I am going to use the gitignore.io with node, angular and visulastudiocode templates but you are free to create, or not, this file as you want.

odin@asgard:~/issues $ curl https://www.gitignore.io/api/node,angular,visualstudiocode -o .gitignore

Once all created, we commit all the changes and we start to create the rest of the structure: the client, server and shared-libs folders.

odin@asgard:~/issues $ git add .
odin@asgard:~/issues $ git commit -m "Full Stack project structure created"

In the next post I will explain how to create the client-side part.

Axiosfit, a cool way to organize your HTTP client requests

David (ダビッド ) — Sat, 09 Nov 2019 16:49:46 +0000

Original Post

Nowadays, all the developers have had to build applications that need communication with other applications or services even more important if you are in a microservices architecture. Depending on how much communications you have had to use, the big amount of endpoints that would be needed to handle could turn into a big headache.

The main purpose of Axiosfit is giving you a pill to minimize this headache 😜 and helping you to manage all of these endpoints in an organized way.

What is Axiosfit?

Axiosfit is the first component of YggdrasilTS tool set and, like its README sais, it is a project inspired by Retrofit to create declarative HTTP clients using axios, one of the most popular libraries used in Javascript.

It has been thought to be used inside TypeScript projects, both worlds, frontend and backend, and it helps you to have your HTTP clients organized.

Since it is developed in TypeScript, all of its main features are a set of Decorators that make easy to configure your HTTP clients to interact with different APIs.

DEV Community: YggdrasilTS

The Nx Dev Tool for Monorepos

The Nx Dev Tools

Nx Dev Tools - Resources

How to Start

Conclusion

Axiosfit in a real project - Arango Of Thrones

Conclusion

Which Package Manager should I choose?

NVM - Node Version Manager

TypeScript Full Stack project (Part III) - NestJS, the server-side

Server-side

Create an API service using nestframework

Table Of Contents

Introduction

Part 1 - Project Creation

API Service

Requirements

Service Creation

Part 2 - EchartsService creation

Delete unnecessary files

Modifying app.controller.ts file

Modifying app.service.ts file

Part 3 - Logger, Validations and Pipes, Handling Errors and Modules

Logger

Validations and Pipes

Installing needed dependencies

Creating new files and folders

Modifying app.controller.ts

Modifying echarts/constants.ts

Handling Errors

Modules

Part 4 - Swagger

To Sum Up

yggdrasilts / echarts-api-service

This project is the sample used in the Create an API service using nestframework post showing how to create an API service using NestJS framework that use a service to return an ECharts image chart.

Echarts API Service

Description

Requirements

Installation

Running the app

Test

Stay in touch

License

TypeScript Full Stack project (Part II) - Client-side

Client-Side

TypeScript Full Stack project (Part I)

Requirements

Project structure

Axiosfit, a cool way to organize your HTTP client requests

What is Axiosfit?