🤟 This monorepo is built with React and Nx, providing a modular and scalable structure. It utilizes a shell application that serves as the main container, allowing you to integrate multiple applications such as appSecondary. All applications within the shell can leverage shared components and utilities located in the shared library, promoting code reuse and maintainability.
iconem🤯.
Learn more about this workspace setup and its capabilities or run npx nx graph to visually explore what was created. Now, let's get you up to speed!
Click here to finish setting up your workspace!
To run the dev server for your app, use:
npx nx serve shellTo create a production bundle:
npx nx build shellTo see all available targets to run for a project, run:
npx nx show project shellThese targets are either inferred automatically or defined in the project.json or package.json files.
More about running tasks in the docs »
While you could add new projects to your workspace manually, you might want to leverage Nx plugins and their code generation feature.
Use the plugin's generator to create new projects.
To generate a new application, use:
npx nx g @nx/react:app demoTo generate a new library, use:
npx nx g @nx/react:lib mylibThis monorepo is structured to maximize efficiency and maintainability by centralizing multiple applications and shared resources. Here's an overview of its components:
Shell: The primary application that acts as a container for various independent applications. It manages the layout and routing, providing a unified interface for the integrated apps. Apps: Multiple applications (e.g., appSecondary) that operate independently within the shell. Each app can be developed, tested, and deployed separately, allowing for modular development workflows. Shared: A library of shared components, utilities, and styles located in the shared folder. These shared resources can be utilized by any application within the monorepo, promoting code reuse and reducing duplication.
Modular Architecture: By separating applications and shared resources, the monorepo facilitates a clean and organized codebase, making it easier to manage and scale. Efficient Code Reuse: Shared libraries enable developers to use common components and utilities across different applications, ensuring consistency and reducing the effort required to implement similar features. Scalable Development: The structure supports the addition of new applications and shared libraries with minimal overhead, allowing the project to grow seamlessly as requirements evolve. Consistent Tooling: Leveraging Nx provides powerful tools for task running, code generation, and dependency management, enhancing developer productivity and maintaining project quality. This setup is ideal for large projects and multifunctional teams, enabling agile development practices and fostering collaboration through a well-organized codebase.
You can use npx nx list to get a list of installed plugins. Then, run npx nx list <plugin-name> to learn about more specific capabilities of a particular plugin. Alternatively, install Nx Console to browse plugins and generators in your IDE.
Learn more about Nx plugins » | Browse the plugin registry »
Nx Console is an editor extension that enriches your developer experience. It lets you run tasks, generate code, and improves code autocompletion in your IDE. It is available for VSCode and IntelliJ.
Learn more:
- Learn more about this workspace setup
- Learn about Nx on CI
- Releasing Packages with Nx release
- What are Nx plugins?
And join the Nx community: