TypeScript Full Stack project (Part IV) - Shared Libraries
TypeScript Full Stack

TypeScript Full Stack project (Part IV) - Shared Libraries

An advantage to use TypeScript for your entire stack, creating shared libraries for your client and server side.

TypeScript Full Stack project (Part III) - NestJS, the server-side
Creating a NestJS application used in the server-side to show the advantages to use TypeScript for your entire project stack.

The previous post showed the server-side part. Now, we are going to create the shared libraries.


Shared Libraries

Finally, let's go to create the shared libraries folder that we use to share classes between the client and the server side. First of all, we are going to create the shared-libs folder that will include all necessary library projects that we will want to use to be shared.

odin@asgard:~/issues $ mkdir shared-libs

The new folder structure will contain a new folder shared-libs.

issues
  ├── client
  ├── .git
  ├── .gitignore
  ├── package.json
  ├── shared-libs
  └── server

I do not know any CLI, like we have used before with Angular and NestJS, to create a TypeScript library easily but, because I like the structure of the NestJS projects, we are going to use the Nest CLI to create the base project, data-entities. This will be the name of the library and it will contain the entity to be shared between client-side and server-side. Also, it will contain the classes that we want to use to be stored in the database and used as main entity in server-side and the client-side applications as well.

Like in the part II, we are going to create a shared library using the Nest CLI and the following options:

  • package-manager: npm.
odin@asgard:~/issues/shared-libs $ nest new data-entities --package-manager npm

The new folder structure will contain a new folder data-entities inside the shared-libs folder, with a NestJS application.

issues
  ├── client
  ├── .git
  ├── .gitignore
  ├── package.json
  ├── shared-libs
  |    └── data-entities
  |         ├── .gitignore
  |         ├── .prettierrc
  |         ├── nest-cli.json
  |         ├── node_modules  
  |         ├── package-lock.json
  |         ├── package.json
  |         ├── README.md
  |         ├── src
  |         │   ├── app.controller.spec.ts
  |         │   ├── app.controller.ts
  |         │   ├── app.module.ts
  |         │   ├── app.service.ts
  |         │   └── main.ts
  |         ├── test
  |         │   ├── app.e2e-spec.ts
  |         │   └── jest-e2e.json
  |         ├── tsconfig.build.json
  |         ├── tsconfig.json
  |         └── tslint.json
  └── server

To adapt the project, we are going to delete all the unnecessary files and let only the following ones:

issues
  ├── client
  ├── .git
  ├── .gitignore
  ├── package.json
  ├── shared-libs
  |    └── data-entities
  |         ├── src
  |         |    └── index.ts
  |         ├── .gitignore
  |         ├── .prettierrc
  |         ├── package.json
  |         ├── tsconfig.json
  |         └── tslint.json
  └── server

Also, we are going to modify the package.json file as the following one:

{
  "name": "@issues/data-entities",
  "version": "1.0.0",
  "description": "Issues data entites.",
  "author": "David López <davidlopez.david@gmail.com>",
  "license": "MIT",
  "scripts": {
    "prebuild": "rimraf dist",
    "build": "webpack --config ./webpack.config.js",
    "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:cov": "jest --coverage"
  },
  "devDependencies": {
    "@types/jest": "^24.0.18",
    "@types/node": "^12.7.5",
    "prettier": "^1.18.2",
    "rimraf": "^3.0.0",
    "ts-jest": "^24.1.0",
    "ts-loader": "^6.1.1",
    "ts-node": "^8.4.1",
    "tsconfig-paths": "^3.9.0",
    "tslint": "^5.20.0",
    "typescript": "^3.6.3",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10"
  },
  "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "ts"
    ],
    "rootDir": "src",
    "testRegex": ".spec.ts$",
    "transform": {
      "^.+\\.(t|j)s$": "ts-jest"
    },
    "coverageDirectory": "./coverage",
    "testEnvironment": "node"
  }
}

Because this library can be used in the client-side and the server-side, we are going to use webpack to compile the code. To do so, we need to create a webpack.config.js:

const { resolve } = require('path');

module.exports = {
  mode: process.env.NODE_ENV || 'development',
  entry: {
    main: './src/index.ts',
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'issues-data-entities.js',
    path: resolve('dist'),
  },
};

Once all created, the project structure is:

issues
  ├── client
  ├── .git
  ├── .gitignore
  ├── package.json
  ├── shared-libs
  |    └── data-entities
  |         ├── src
  |         |    ├── Bug.ts
  |         |    └── index.ts
  |         ├── .gitignore
  |         ├── .prettierrc
  |         ├── package.json
  |         ├── tsconfig.json
  |         ├── tslint.json
  |         └── webpack.config.js
  └── server

You can find the library code from the repository as well.

If you have followed all the previous posts, you will have a TypeScript Full Stack project and now, the only thing that we need is know how to work with this project. In the following post, I am going to show you how to start the entire application.

TypeScript Full Stack project (Part V) - Running the project
Run the whole project and use docker if you want.

But before, I let you the link to read all the post series:

TypeScript Full Stack
TypeScript for all your platform building an Angular application for the client-side and using NestJS framework to build the server-side.

Share Tweet Send
0 Comments
Loading...
You've successfully subscribed to YggdrasilTS
Great! Next, complete checkout for full access to YggdrasilTS
Welcome back! You've successfully signed in
Success! Your account is fully activated, you now have access to all content.