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.
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
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
Table Of Contents
- About the Project
- Built With
- Getting Started
- 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.
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):
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
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!
Top comments (0)