🚀 Introducing @nx-fullstack: Plugins and Tools for Nx Monorepos

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.

nx-fullstack

Simplifying full-stack development in Nx monorepos - nx-fullstack

GitHub

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:

Sharing styles between apps inside Nx workspace

In my current job we have decided to make the change into Nx workspace and with that we decided to cr…

DEV CommunityVitor Ferreira

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 @nx-fullstack/style-lib:

GitHub - nxfullstack/style-lib: Easily add a SASS-based, shared style library to your repository

Easily add a SASS-based, shared style library to your repository - GitHub - nxfullstack/style-lib: Easily add a SASS-based, shared style library to your repository

GitHubnxfullstack

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 .stylelintrc.json.

You can also integrate your new library into an Angular application with another generator:

> nx g @nx-fullstack/style-lib:ng-add

>  NX  Generating @nx-fullstack/style-lib:ng-add

✔ Which Angular application would you like to add support to? · angular-client
✔ Which style library would you like to use? · my-style-lib
UPDATE apps/angular-client/project.json
CREATE apps/angular-client/src/app/lib.scss

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!