Building and Publishing an App

When you generate a new app using the yuuvis client CLI (version 19.7.0 or later), it automatically creates an npm script in your project’s package.json that allows you to build the app as a standalone Angular library. This is essential for publishing your app to an npm registry so other projects can install and use it.

Build Script Generation

For an app named myapp, the CLI generates the following script:

{
  ...
  "scripts": {
    ...
    "build:app:myapp": "ng build myapp"
    ...
  }
  ...
}

The script follows the naming convention build:app:{app-name} and uses Angular’s ng build command to compile the app library.

Building Your App

To build your app library, run:

npm run build:app:myapp

This command compiles your app using ng-packagr, which:

Transpiles TypeScript to JavaScript
Generates type definitions (.d.ts files)
Creates optimized bundles for distribution
Prepares the package for npm publication

The build output is placed in the dist/ directory:

dist/
└── myapp/
    ├── esm2022/          # ES2022 modules
    ├── fesm2022/         # Flattened ES2022 modules
    ├── lib/              # Compiled JavaScript and type definitions
    ├── package.json      # Generated package metadata
    └── README.md         # Package documentation

Publishing to npm

After building your app, you can publish it to an npm registry:

cd dist/myapp
npm publish

For scoped packages (e.g., @mycompany/myapp), ensure your app is configured with the correct scope in its package.json. You may also want to publish to a private registry:

cd dist/myapp
npm publish --registry https://registry.mycompany.com

Using the Published App

Once published, other projects can install your app using the add command:

yuv add app @mycompany/myapp