Skip to content

joshcalafell/jmc-monorepo

Repository files navigation

JMC Monorepo

This workspace has been generated by Nx, Smart Monorepos · Fast CI.

Proof of concept

So the goals of this project were to create a monorepo with to apps and a common shared library which contains a drag and drop library that is easily imported into multipple apps and/or other libraries. All components are standalone, and use Angular's new flow-control template syntax. I'm using CDK's Drag and Drop module, nut other than that, this is a purposely uncomplicated app.

Video of application

POC Video As you can see, the drag and drop works fine.

The dependency graph

Nx Graph Results

You can run nx graph to see the following:

As you can see, my-ui-lib (which contains the drag-drop feature component and service) is used by both my-app and my-second-app. As the app becomes more complex, this becoms very u seful.

Nx Cloud

Running nx run-many -t lint test build e2e-ci -p my-app my-second-app my-ui-lib will fire off all tests, linting, and builds of all my apps and libs.

NxCloud Results

Storybook configuration

Storybook Video

To get this web tool running, run the following command:

nx storybook my-ui-lib

This will let stakeholders, designers, and others to see and play with DragDropComponent and functionality in action as standalone stries in isolation!

GitHub Actions

This project is set up to use node 20 for GitHub Actions

Integrate with editors

Enhance your Nx experience by installing Nx Console for your favorite editor. Nx Console provides an interactive UI to view your projects, run tasks, generate code, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users.

Start the application

Run npx nx serve my-app to start the development server. Happy coding!

Build for production

Run npx nx build my-app to build the application. The build artifacts are stored in the output directory (e.g. dist/ or build/), ready to be deployed.

Running tasks

To execute tasks with Nx use the following syntax:

npx nx <target> <project> <...options>

You can also run multiple targets:

npx nx run-many -t <target1> <target2>

..or add -p to filter specific projects

npx nx run-many -t <target1> <target2> -p <proj1> <proj2>

Targets can be defined in the package.json or projects.json. Learn more in the docs.

Set up CI!

Nx comes with local caching already built-in (check your nx.json). On CI you might want to go a step further.

Explore the project graph

Run npx nx graph to show the graph of the workspace. It will show tasks that you can run with Nx.

Connect with us!

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published