✨ This workspace has been generated by Nx, Smart Monorepos · Fast CI. ✨
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.
As you can see, the drag and drop works fine.
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.
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.
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!
This project is set up to use node 20 for GitHub Actions
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.
Run npx nx serve my-app
to start the development server. Happy coding!
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.
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.
Nx comes with local caching already built-in (check your nx.json
). On CI you might want to go a step further.
Run npx nx graph
to show the graph of the workspace.
It will show tasks that you can run with Nx.