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.