🚀 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 · GitHub

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

github.com

Want to be notified as soon as new content is available? Subscribe here!

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

Vitor Ferreira ・ Jun 2 '20 ・ 2 min read

#angular #nx #css #webdev

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:

nxfullstack / style-lib

Easily add a SASS-based, shared style library to your repository

Create a custom, shared style library for your monorepo!

Explore the docs 📘 View Demo 🖥 Report Bug 🐛 Request Feature 🧰

Table Of Contents

• About the Project
• Built With
• Getting Started
  • Prerequisites
  • Installation
• Usage
• Roadmap
• Contributing
• License
• Authors
• Acknowledgements

Built With

This section should list any major frameworks that you built your project using. Leave any add-ons/plugins for the acknowledgements section. Here are a few examples.

• Nx
• Stylelint

Installation

NPM

npm install @nx-fullstack/style-lib

Yarn

yarn add @nx-fullstack/style-lib

Usage

Add a new style library to your repo

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

Integrating your style library with an existing Angular application

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

Roadmap

See the open issues for a list of proposed features (and known issues).

License

Distributed under the MIT License. See LICENSE for more information.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Wallace Daniel 💻

This project follows the all-contributors specification. Contributions of…

View on GitHub

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

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 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!