DEV Community

Wallace Daniel
Wallace Daniel

Posted on • Originally published at thefullstack.engineer on

πŸš€ Introducing @nx-fullstack: Plugins and Tools for Nx Monorepos

πŸš€ 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

favicon 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:

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 logo nxfullstack / style-lib

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


Logo
Create a custom, shared style library for your monorepo!

Explore the docs πŸ“˜ View Demo πŸ–₯ Report Bug πŸ› Request Feature 🧰

Downloads Contributors Issues License Build Status Commitizen friendly semantic-release styled with prettier

Table Of Contents

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.

Installation

NPM

npm install @nx-fullstack/style-lib
Enter fullscreen mode Exit fullscreen mode

Yarn

yarn add @nx-fullstack/style-lib
Enter fullscreen mode Exit fullscreen mode

Usage

Add a new style library to your repo

nx g @nx-fullstack/style-lib:init
Enter fullscreen mode Exit fullscreen mode

Integrating your style library with an existing Angular application

nx g @nx-fullstack/style-lib:ng-add
Enter fullscreen mode Exit fullscreen mode

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):

This project follows the all-contributors specification. Contributions 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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (0)