In the midst of writing more posts in the Full Stack Development Series I found myself diving into the world of Nx Generators and plugins. I thought about how often I find myself running similar commands in new projects: create a shared style library, define shared routes, etc. Thus,
@nx-fullstack was born! My goal with this collection of repositories is to provide plugins for Nx monorepos that are being used for full-stack applications.
Keep Your Front-End Styles In Sync
The first tool doesn't have the most creative name, but it does solve a problem I've encountered multiple times: if I wanted to add a SASS-only, shared style library to my monorepo, how would I go about that? It seems that Nx users have wanted something similar for awhile now, but I was actually inspired years ago by this blog post:
I took the advice in the above post, and started creating a
libs/shared/style library when I had multiple front end applications in a project. That eventually evolved into the popular 7-1 directory structure, and then grew into dedicated design systems with auto-generated SCSS documentation.
All that experience let to the creation of
With a single command you can now create your own dedicated style library in any Nx project:
$ npm i @nx-fullstack/style-lib $ nx g @nx-fullstack/style-lib:init
By default, this generator also installs nx-stylelint to ensure your styles are linted just like your source code! The new library will have a
stylelint run target in it's
project.json file, and of course you can customize which linting rules are applied via
You can also integrate your new library into an Angular application with another generator:
It's an early iteration (I'm still working on getting the README filled out!) but I have plans for this library such as:
- 💡 Auto-populate some of the stylesheets with sample styles, such as common "reset" styles or Google fonts
- 💡 Optionally add SassDoc support
- 💡 Implement a build target to compile the SCSS to CSS files that could be used elsewhere.
In The Pipeline 📫
I'm excited to grow this collection, and look forward to sharing updates with everyone. Some of the future plugins may include:
- 🗺 A library for defining API routes in a standardized manner, used by both backend and frontend applications
- 🔐 Starter template for adding user authentication to NestJS
- 🐳 Dockerfile generation for a variety of environments, using the most up-to-date best practices
Have any ideas for plugins, or feedback about the first library? Let me know in the comments, or start a discussion on GitHub!