🚀 Introducing @nx-fullstack: Plugins and Tools for Nx Monorepos
Tags: nxmonorepo, uiux, scss, nxfullstack
Published: 2023-04-07 19:42:15

---
title: 🚀 Introducing @nx-fullstack: Plugins and Tools for Nx Monorepos
published: true
date: 2023-04-07 19:36:19 UTC
tags: NxMonorepo,UIUX,SCSS,nxfullstack
canonical_url: https://thefullstack.engineer/introducing-nx-fullstack/
---

![🚀 Introducing @nx-fullstack: Plugins and Tools for Nx Monorepos](https://thefullstack.engineer/content/images/2023/04/cover.png)

In the midst of writing more posts in the [Full Stack Development Series](https://thefullstack.engineer/tag/full-stack-development-series/) I found myself diving into the world of [Nx Generators](https://nx.dev/recipes/generators?ref=thefullstack.engineer#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.

{% embed https://github.com/nxfullstack %}

[Want to be notified as soon as new content is available? Subscribe here!](https://thefullstack.engineer/#/portal/signup/free)

## 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](https://www.google.com/search?q=nx+style+library+site%3Agithub.com&sa=X&ved=2ahUKEwjM7ZSTuJj-AhUeK1kFHZC3B_gQrQIoBHoECB4QBQ&biw=1720&bih=1336&dpr=1&ref=thefullstack.engineer) for awhile now, but I was actually inspired years ago by this blog post:

{% embed https://dev.to/vitorstick/sharing-styles-between-apps-inside-nx-workspace-20i5?ref=thefullstack.engineer %}

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](https://sass-guidelin.es/?ref=thefullstack.engineer#the-7-1-pattern), and then grew into dedicated design systems with auto-generated SCSS documentation.

All that experience let to the creation of `@nx-fullstack/style-lib`:

{% embed https://github.com/nxfullstack/style-lib?ref=dev.to %}

With a single command you can now create your own dedicated style library in any Nx project:

```shell
$ npm i @nx-fullstack/style-lib

$ nx g @nx-fullstack/style-lib:init
```

By default, this generator also installs [nx-stylelint](https://github.com/Phillip9587/nx-stylelint?ref=thefullstack.engineer) 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:

```shell
> 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
```

_The lib.scss file should be one directory higher - that will be fixed shortly._

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](http://sassdoc.com/?ref=thefullstack.engineer) 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](https://github.com/nxfullstack/style-lib/discussions?ref=thefullstack.engineer) on GitHub!