nx-extensions

Nxext provides a collection of extensions and tools designed to bring various UI frameworks and mobile runtimes into the Nx ecosystem. It enables seamless integration for building and managing projects using the following technologies:

• Stencil: For building reusable, scalable Web Components.
• Svelte & SvelteKit: For building high-performance user interfaces using the Svelte compiler.
• SolidJS: For building UIs with simple and performant reactivity.
• Preact: A fast, lightweight (3kB) alternative to React.
• Ionic (Angular & React): For building and shipping mobile applications.
• Capacitor: A cross-platform native runtime for web applications.

@nxext provides a collection of Nx plugins designed to integrate various mobile and web frameworks into the Nx monorepo ecosystem.

Supported frameworks include:

• Capacitor: For mobile app development.
• Ionic: Support for both Angular and React implementations.
• Stencil: For building web components.
• Svelte and SvelteKit: For Svelte-based web applications.
• SolidJS: For SolidJS applications.
• Preact: For Preact applications.

The @nxext/sveltekit plugin integrates SvelteKit into an Nx workspace.

::: warning This plugin is currently in alpha state. It is not feature complete and is not recommended for production use. :::

It allows developers to leverage the SvelteKit framework within the Nx monorepo ecosystem, benefiting from Nx's task orchestration and dependency management.

@nxext/ionic-angular is an Nx plugin designed to facilitate the development of Ionic Angular applications and libraries within an Nx workspace.

To get started with the plugin, refer to the official Getting Started guide and the complete documentation at nxext.github.io.

Capacitor plugin dependencies must be added to the project-level package.json (e.g., ./apps/my-app/package.json) using relative paths to the workspace node_modules.

// ./apps/my-app/package.json
{
  "name": "my-app",
  "dependencies": {
    "@capacitor/android": "../../node_modules/@capacitor/android",
    "@capacitor/ios": "../../node_modules/@capacitor/ios",
    // Example plugin
    "@capacitor-community/apple-sign-in": "../../node_modules/@capacitor-community/apple-sign-in"
  }
}

When adding Capacitor plugin dependencies, they must be added to the project-level package.json using relative paths to the workspace's node_modules to ensure they are correctly resolved within the Nx structure.

// ./apps/my-app/package.json
{
  "name": "my-app",
  "dependencies": {
    "@capacitor/android": "../../node_modules/@capacitor/android",
    "@capacitor/ios": "../../node_modules/@capacitor/ios",
    "@capacitor-community/apple-sign-in": "../../node_modules/@capacitor-community/apple-sign-in"
  }
}

When using @nxext, you must ensure that the version of the @nxext package matches the version of Nx you are running.

Example Compatibility Rule:

• If you are using version 17.0 of an @nxext package, you must use Nx version 16.2.
• Note that @nxext packages with version 16.7 are not compatible with Nx 16.8.

Always verify that your Nx version and @nxext package version are aligned according to the specific compatibility requirements of the package you are installing.

Use the @nxext/preact:application schematic to generate a new Preact application within your Nx workspace. You can use the shorthand app or specify the collection explicitly if it is not set as the default in your nx.json.

# Using the explicit collection
nx g @nxext/preact:application --name=my-app --directory=apps/my-app

# Using shorthand if collection is default
nx g app my-app --directory=apps/my-app

# Preview changes without writing to disk
nx g application my-app --directory=apps/my-app --dry-run