Import into an existing project

Intro

The easiest way to use Nitrokit is to start building applications from scratch. However that is not always possible.

Nitrokit structure

It is important to have the exact same structure as nitrokit though. This means that your projects should have a *scope tag£ and type tag. Your project should also be compliant with the linting rules from tools/eslint-rules/rules/enforce-workspace-structure.ts.

This means:

• No directory nesting
• Every .ts file should be an element
• A spec.ts must have the same filename as the file it is testing
• All utils must be located in the src/lib/utils directory and have the .util.ts extension.
• All interceptors must be located in the src/lib/interceptors directory and have the .interceptor.ts extension.
• All constants must be located in the src/lib/constants directory and have the .const.ts extension.
• All validations must be located in the src/lib/validations directory and have the .validation.ts extension.
• All form-models must be located in the src/lib/form-models directory and have the .form-model.ts extension.
• All guards must be located in the src/lib/guards directory and have the .guard.ts extension.
• All types must be located in the src/lib/types directory and have the .type.ts extension.
• All interfaces must be located in the src/lib/interfaces directory and have the .interface.ts extension.
• All state machines must be located in the src/lib/state-machines directory and have the .state-machine.ts extension.
• All services must be located in the src/lib/services directory and have the .service.ts extension.
• All data services must be located in the src/lib/data-services directory and have the .data-service.ts extension.
• All directives must be located in the src/lib/directives directory and have the .directive.ts extension.
• All pipes must be located in the src/lib/pipes directory and have the .pipe.ts extension.
• All facades must be located in the src/lib directory and have the facade.service.ts name.
• A component should be of either type ui-component or smart-component
• All ui components must be located in the src/lib/components/ui directory and have the .ui-component.ts extension.
• All smart components must be located in the src/lib/components/smart directory and have the .smart-component.ts extension.

If this is the case you wan import Nitrokit like this:

Importing Nitrokit into your project:

• Copy apps/nitrokit to your root folder
• Copy apps/nitrokit-electron to your root folder
• Copy libs/nitrokit to your root folder

Add the following path mappings to your tsconfig.base.json:

{
  "@nitrokit/nitrokit-data-access-auth": [
    "libs/nitrokit/data-access-auth/src/index.ts"
  ],
  "@nitrokit/nitrokit-data-access-bucket": [
    "libs/nitrokit/data-access-bucket/src/index.ts"
  ],
  "@nitrokit/nitrokit-data-access-lemonsqueezy": [
    "libs/nitrokit/data-access-lemonsqueezy/src/index.ts"
  ],
  "@nitrokit/nitrokit-data-access-rag": [
    "libs/nitrokit/data-access-rag/src/index.ts"
  ],
  "@nitrokit/nitrokit-feat-auth": ["libs/nitrokit/feat-auth/src/index.ts"],
  "@nitrokit/nitrokit-feat-auth-lazy": [
    "libs/nitrokit/feat-auth-lazy/src/index.ts"
  ],
  "@nitrokit/nitrokit-feat-shell": [
    "libs/nitrokit/feat-shell/src/index.ts"
  ],
  "@nitrokit/nitrokit-guard-common": [
    "libs/nitrokit/guard-common/src/index.ts"
  ],
  "@nitrokit/nitrokit-state-crud": [
    "libs/nitrokit/state-crud/src/index.ts"
  ],
  "@nitrokit/nitrokit-state-supabase": [
    "libs/nitrokit/state-supabase/src/index.ts"
  ],
  "@nitrokit/nitrokit-type-automation": [
    "libs/nitrokit/type-automation/src/index.ts"
  ],
  "@nitrokit/nitrokit-type-claude": [
    "libs/nitrokit/type-claude/src/index.ts"
  ],
  "@nitrokit/nitrokit-type-guards": [
    "libs/nitrokit/type-guards/src/index.ts"
  ],
  "@nitrokit/nitrokit-type-openai": [
    "libs/nitrokit/type-openai/src/index.ts"
  ],
  "@nitrokit/nitrokit-type-supabase": [
    "libs/nitrokit/type-supabase/src/index.ts"
  ],
  "@nitrokit/nitrokit-ui-chat": ["libs/nitrokit/ui-chat/src/index.ts"],
  "@nitrokit/nitrokit-ui-design-system": [
    "libs/nitrokit/ui-design-system/src/index.ts"
  ],
  "@nitrokit/nitrokit-ui-infinite-scroll": [
    "libs/nitrokit/ui-infinite-scroll/src/index.ts"
  ],
  "@nitrokit/nitrokit-ui-toasts": ["libs/nitrokit/ui-toasts/src/index.ts"],
  "@nitrokit/nitrokit-util-array": [
    "libs/nitrokit/util-array/src/index.ts"
  ],
  "@nitrokit/nitrokit-util-automation": [
    "libs/nitrokit/util-automation/src/index.ts"
  ],
  "@nitrokit/nitrokit-util-client": [
    "libs/nitrokit/util-client/src/index.ts"
  ],
  "@nitrokit/nitrokit-util-config": [
    "libs/nitrokit/util-config/src/index.ts"
  ],
  "@nitrokit/nitrokit-util-date": ["libs/nitrokit/util-date/src/index.ts"],
  "@nitrokit/nitrokit-util-localstorage": [
    "libs/nitrokit/util-localstorage/src/index.ts"
  ],
  "@nitrokit/nitrokit-util-misc": ["libs/nitrokit/util-misc/src/index.ts"],
  "@nitrokit/nitrokit-util-nx-electron": [
    "libs/nitrokit/util-nx-electron/src/index.ts"
  ],
  "@nitrokit/nitrokit-util-nx-helpers": [
    "libs/nitrokit/util-nx-helpers/src/index.ts"
  ],
  "@nitrokit/nitrokit-util-signals": [
    "libs/nitrokit/util-signals/src/index.ts"
  ],
  "@nitrokit/nitrokit-util-toasts": [
    "libs/nitrokit/util-toasts/src/index.ts"
  ]
}

Add a keys.json file to the root of your application and provide an openai key:

{
  "openai-key": "<your-key>"
}

Run the following command:

npx nx g @nitrokit/nitrokit-util-automation:concat-generators

Update the package.json file

It is of vital importance that your project is an nx repo and the name is set correctly. If your npm-scope is @simplified your name property should be @simplified/source.

Also add the dependencies in the package.json file:

{
  "name": "@simplified/source",

  "devDependencies": {
    "@angular-devkit/build-angular": "19.0.4",
    "@angular-devkit/core": "19.0.4",
    "@angular-devkit/schematics": "19.0.4",
    "@angular-eslint/eslint-plugin": "19.0.1",
    "@angular-eslint/eslint-plugin-template": "19.0.1",
    "@angular-eslint/template-parser": "19.0.1",
    "@angular/cdk": "19.0.2",
    "@angular/cli": "~18.2.0",
    "@angular/compiler-cli": "19.0.3",
    "@angular/language-service": "19.0.3",
    "@anthropic-ai/sdk": "^0.30.1",
    "@babel/plugin-transform-modules-commonjs": "^7.24.8",
    "@babel/preset-env": "^7.25.4",
    "@chromatic-com/storybook": "3.2.2",
    "@nx/angular": "20.2.1",
    "@nx/cypress": "20.2.1",
    "@nx/eslint": "20.2.1",
    "@nx/eslint-plugin": "20.2.1",
    "@nx/jest": "20.2.1",
    "@nx/js": "20.2.1",
    "@nx/plugin": "20.2.1",
    "@nx/storybook": "20.2.1",
    "@nx/web": "20.2.1",
    "@nx/workspace": "20.2.1",
    "@schematics/angular": "19.0.4",
    "@storybook/addon-essentials": "8.4.7",
    "@storybook/addon-interactions": "8.4.7",
    "@storybook/angular": "8.4.7",
    "@storybook/core-server": "8.4.7",
    "@storybook/react": "8.4.7",
    "@storybook/test": "8.4.7",
    "@storybook/test-runner": "0.19.1",
    "@swc-node/register": "^1.10.9",
    "@swc/core": "^1.10.1",
    "@swc/helpers": "^0.5.15",
    "@testing-library/react": "15.0.6",
    "@types/canvas-confetti": "^1.6.4",
    "@types/electron": "^1.6.10",
    "@types/express": "4.17.14",
    "@types/jest": "29.5.12",
    "@types/lodash": "^4.14.201",
    "@types/node": "^18.16.9",
    "@types/react": "18.3.1",
    "@types/react-dom": "18.3.0",
    "@typescript-eslint/eslint-plugin": "7.18.0",
    "@typescript-eslint/parser": "7.18.0",
    "@typescript-eslint/utils": "7.18.0",
    "autoprefixer": "^10.4.16",
    "babel-jest": "^29.7.0",
    "concurrently": "^9.0.1",
    "cypress": "13.13.3",
    "electron": "^32.1.2",
    "electron-builder": "^25.1.7",
    "eslint": "8.57.0",
    "eslint-config-next": "14.2.16",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-cypress": "^3.5.0",
    "eslint-plugin-import": "2.31.0",
    "eslint-plugin-jsx-a11y": "6.10.1",
    "eslint-plugin-react": "7.35.0",
    "eslint-plugin-react-hooks": "5.0.0",
    "jest": "29.7.0",
    "jest-environment-jsdom": "29.7.0",
    "jest-environment-node": "^29.7.0",
    "jest-preset-angular": "14.4.2",
    "jsonc-eslint-parser": "^2.1.0",
    "nx": "20.2.1",
    "pg": "^8.13.1",
    "postcss": "8.4.38",
    "postgres": "^3.4.5",
    "prettier": "^2.6.2",
    "rxjs-for-await": "^1.0.0",
    "storybook-dark-mode": "^4.0.2",
    "tailwindcss": "3.4.3",
    "ts-jest": "^29.1.0",
    "ts-morph": "^24.0.0",
    "ts-node": "^10.9.1",
    "typescript": "5.6.3",
    "wait-on": "^8.0.1",
    "yaml": "^2.6.1",
    "zod": "^3.23.8",
    "zod-to-json-schema": "^3.23.3"
  },
  "dependencies": {
    "@angular/animations": "19.0.3",
    "@angular/build": "19.0.4",
    "@angular/cdk": "18.2.0",
    "@angular/common": "19.0.3",
    "@angular/compiler": "19.0.3",
    "@angular/core": "19.0.3",
    "@angular/forms": "19.0.3",
    "@angular/platform-browser": "19.0.3",
    "@angular/platform-browser-dynamic": "19.0.3",
    "@angular/platform-server": "19.0.3",
    "@angular/router": "19.0.3",
    "@angular/ssr": "19.0.4",
    "@codemirror/basic-setup": "^0.20.0",
    "@codemirror/lang-javascript": "^6.2.2",
    "@codemirror/lang-markdown": "^6.2.2",
    "@codemirror/state": "^6.4.1",
    "@codemirror/theme-one-dark": "^6.1.2",
    "@codemirror/view": "^6.29.1",
    "@floating-ui/dom": "^1.5.3",
    "@fortawesome/fontawesome-free": "^6.6.0",
    "@fortawesome/fontawesome-svg-core": "^6.6.0",
    "@fortawesome/free-brands-svg-icons": "^6.6.0",
    "@fortawesome/free-regular-svg-icons": "^6.6.0",
    "@fortawesome/free-solid-svg-icons": "^6.6.0",
    "@fortawesome/react-fontawesome": "^0.2.2",
    "@fullcalendar/angular": "6.1.10",
    "@fullcalendar/core": "6.1.10",
    "@fullcalendar/daygrid": "6.1.10",
    "@fullcalendar/interaction": "6.1.10",
    "@fullcalendar/timegrid": "6.1.10",
    "@ngx-translate/core": "^16.0.3",
    "@nx/devkit": "20.2.1",
    "@storybook/addon-styling-webpack": "^1.0.0",
    "@storybook/addon-themes": "^8.3.2",
    "@storybook/jest": "^0.2.3",
    "@storybook/testing-library": "^0.2.2",
    "@supabase/ssr": "^0.5.2",
    "@supabase/supabase-js": "^2.39.7",
    "@tailwindcss/forms": "^0.5.7",
    "@tailwindcss/typography": "^0.5.15",
    "bcrypt": "^5.1.1",
    "canvas-confetti": "^1.9.3",
    "chart.js": "^4.4.7",
    "clsx": "^2.1.1",
    "codemirror": "^6.0.1",
    "date-fns": "^2.30.0",
    "express": "~4.18.2",
    "flowbite": "^2.2.0",
    "jszip": "^3.10.1",
    "langchain": "^0.3.7",
    "lodash": "^4.17.21",
    "markdown-it": "^14.1.0",
    "markdown-it-anchor": "^9.2.0",
    "marked": "^14.1.2",
    "mermaid": "^11.2.0",
    "next": "14.2.16",
    "ngx-monaco-editor-v2": "^18.1.0",
    "ngx-vest-forms": "^1.0.3",
    "openai": "^4.66.1",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "rxjs": "~7.8.0",
    "storybook": "8.4.7",
    "tesseract.js": "^5.1.1",
    "tslib": "^2.3.0",
    "vest": "^5.4.1",
    "zone.js": "0.15.0"
  },
  "overrides": {
    "@supabase/supabase-js": {
      "@supabase/auth-js": "2.61.0"
    },
    "@fullcalendar/angular": {
      "@angular/common": "^19.0.0",
      "@angular/core": "^19.0.0"
    },
    "ngx-monaco-editor-v2": {
      "@angular/common": "^19.0.0",
      "@angular/core": "^19.0.0"
    }
  }
}

Updating from a new version of Nitrokit

Remove the nitrokit directories and repeat the previous steps again