webapp-code-sharing

Explain code sharing architecture in the SonarQube webapp NX monorepository.

11|15|Updated Dec 6, 2024
One-click install
npx skills add https://github.com/SonarSource/sonarqube-webapp --skill webapp-code-sharing
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: webapp-code-sharing
Source: https://github.com/SonarSource/sonarqube-webapp/tree/main/.claude/skills/webapp-code-sharing
Command: npx skills add https://github.com/SonarSource/sonarqube-webapp --skill webapp-code-sharing

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill clarifies the complex code organization within the webapp NX monorepository, helping developers understand project interdependencies and determine the correct location for new code.

Core Features & Use Cases

  • Monorepo Structure Explanation: Provides a detailed breakdown of the apps/, libs/, and private/ directories and their sub-modules.
  • Code Location Guidance: Helps developers decide where to place shared code, product-specific code, and feature modules.
  • Dependency Management: Explains how aliases like ~adapters and handling of circular dependencies work.
  • Use Case: A new developer joins the team and needs to add a new UI component. They can use this Skill to understand if the component should go into a shared library, a feature library, or a product-specific adapter.

Quick Start

Use the webapp-code-sharing skill to understand how to share code between SQS and SQC.

Frequently Asked Questions about webapp-code-sharing

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I share code between SQS and SQC in an NX monorepo?

To share code between SQS and SQC in an NX monorepo, organize shared modules and feature modules within the apps, libs, and private directories to maximize code reuse and maintainability.

Where should I place new UI components in a webapp monorepo?

Placing new UI components in a webapp monorepo depends on usage scope; use shared libraries for global reuse, feature libraries for specific modules, or product-specific adapters for isolated logic.

How do NX monorepo adapter patterns handle product-specific code and dependencies?

NX monorepo adapter patterns handle product-specific code by utilizing aliases like ~adapters to manage dependencies and resolve circular dependencies, ensuring clean separation between SQS and SQC configurations.

What is the structure of apps, libs, and private directories in a webapp monorepo?

The structure of apps, libs, and private directories in a webapp monorepo organizes project interdependencies, separating shared modules, feature modules, and adapters to clarify where new code belongs.

When do I need to use build-time configurations for code sharing in a TypeScript monorepo?

You need build-time configurations for code sharing in a TypeScript monorepo when managing product-specific code and dependencies across SQS and SQC, ensuring correct build outputs and maintainability.