nxpm / stack

🥭 nxpm-stack lets you generate a complete and opinionated full-stack application in a Nx Workspace, ready to extend and deploy!

@nxpm/stack

Introduction

@nxpm/stack is a set of schematics that generates an opinionated full-stack application in a Nx Workspace based on the PANNG Stack (Prisma, Angular, Nest, Nx, GraphQL).

Creating a new project

Using @nxpm/cli

You can create a new workspace by installing the @nxpm/cli package globally.

Run the following command:

yarn global add @nxpm/cli

After the installation, you should have the nxpm-stack command available.

Run the following command to create a project called 'sandbox':

nxpm-stack init --name sandbox
cd sandbox

Manual installation

Alternatively, you can create a project manually:

Create a new Nx Workspace and make sure to use the empty preset.

yarn create nx-workspace sandbox --preset=empty --nx-cloud true --cli=angular
cd sandbox

Install the dependencies:

yarn add -D @nxpm/stack @nrwl/angular @nrwl/nest

Initialize a new project (where web is the name of the Angular frontend):

nx g @nxpm/stack:init web

Running the project

Before you can run the stack, there are some things you need to do.

Starting the Docker server

The stack is configured to connect to a Postgres server on localhost:5432 with a database called prisma, username prisma and password prisma.

There is a docker-compose.yml in the project root which provides this.

To start the server, run the following command:

docker-compose up

Seed the database

When starting with an empty database, you need to make sure the table structure gets created.

To do this, run the following command:

yarn setup

Start the API app

You can now start the API by running the following command:

yarn dev:api

You should be able to navigate to http://localhost:3000/graphql and see the GraphQL Playground.

Generate the SDK

Once the API is up and running, we want to make sure we can generate the SDK that is being used by the frontend.

Run the following command to generate the SDK:

yarn sdk:web

Start the Web app

With this all done, you can now start the Web by running the following command:

yarn dev:web

You should be able to navigate to http://localhost:4200 and see the Angular app.

stack's Issues

Rebuild @nxpm/stack using nx11

Expected Behavior

@nxpm/stack should be built using Nx 11.

Current Behavior

@nxpm/stack is built using Nx 10.

Context

Currently this project is an @nrwl/nx-plugin created with v10. In v11, Nx changed a few things in the structure, mainly around naming schematics -> generators, builders -> executors, architects => targets, and possibly some more.

The generators, besides to having a new name, also have a new way to write them. The commands that run in the generator can now be simply await-ed which makes it (especially with a project like this) easier to write, debug and share them. Those that have worked with schematics probably feel why. In some ways schematics might be easier, but we can wrap around those.

• blocker: nrwl/nx#4538

The new version also allows for some structural changes, and will be split up into several packages.

• @nxpm/api
• @nxpm/cli
• @nxpm/stack
• @nxpm/web

User admin can't create new user due to changes in email setup

Expected Behavior

Admin should be able to create a new user.

Current Behavior

This does not work due to recent changes

Unknown arg `email` in data.email for type UserUncheckedCreateInput. Did you mean `emails`? Available args:

The generated web application should have a dialog service

Expected Behavior

The web application has a dialog service

Current Behavior

The web application does not have a dialog service

Possible Solution

The service should be created in a library web/ui/dialog and expose a UiDialogService that has at least a openComponent(), openForm(), confirm() and alert() method.

• Consider https://github.com/ngneat/dialog

Support different package managers (npm/pnpm/cnpm)

Dear @beeman ,

thank you very much for this awesome (!) boiler plate code for webbased applications. I really like it - been following you for some time and just stumbled upon these generators.

Expected Behavior

I noticed, that the commands within the executors require yarn. Same with the inserted scripts in the package.json file.
Can we make yarn optional? i.e., if i would like to use npm, scripts need to be rewritten (i.e., npm run x instead of yarn x)

Thank you very much for your time & help

Tailwind shoud be the default style

Expected Behavior

Tailwind is the default style.

Current Behavior

Bootstrap is the default style.

Possible Solution

Search for bootstrap and tailwind and make sure to switch any place where bootstrap takes precedence.

Requirements

• dark mode should be configured using 'class'
• <body class="dark"> should be set in index.html
• the @tailwindcss/forms plugin should be installed.
• use 'css' instead of 'scss'

Feature: Migration to Eslint

As tslint is deprecated we need to migrate to Eslint

All generated apps and libs should pass `nx lint`

Expected Behavior

Running yarn nx run-many --target lint --all currently fails.

Current Behavior

Running yarn nx run-many --target lint --all should work.

Possible Solution

1. Run linter
2. Fix issues in schematic templates
3. Create one commit per schematic

Steps to Reproduce (for bugs)

1. Generate new project
2. Run yarn nx run-many --target lint --all currently fails.

schema definitions require `$id` instead of `id` property

init generator fails because the id property of the schema isn't recognised and therefore validation of given schema fails.

Expected Behavior

Generator generates valid app

Current Behavior

Command errors with output:

✔ Which type of library would you like to use? · tailwind
Error: NOT SUPPORTED: keyword "id", use "$id" for schema ID
    at Object.code (/Users/XXX/Code/spikes/nx/nxpm/node_modules/@angular-devkit/core/node_modules/ajv/dist/vocabularies/core/id.js:6:15)
    at keywordCode (/Users/XXX/Code/spikes/nx/nxpm/node_modules/@angular-devkit/core/node_modules/ajv/dist/compile/validate/index.js:454:13)
    at /Users/XXX/Code/spikes/nx/nxpm/node_modules/@angular-devkit/core/node_modules/ajv/dist/compile/validate/index.js:222:17
    at CodeGen.code (/Users/XXX/Code/spikes/nx/nxpm/node_modules/@angular-devkit/core/node_modules/ajv/dist/compile/codegen/index.js:439:13)
    at CodeGen.block (/Users/XXX/Code/spikes/nx/nxpm/node_modules/@angular-devkit/core/node_modules/ajv/dist/compile/codegen/index.js:568:18)
    at iterateKeywords (/Users/XXX/Code/spikes/nx/nxpm/node_modules/@angular-devkit/core/node_modules/ajv/dist/compile/validate/index.js:219:9)
    at groupKeywords (/Users/XXX/Code/spikes/nx/nxpm/node_modules/@angular-devkit/core/node_modules/ajv/dist/compile/validate/index.js:208:13)
    at /Users/XXX/Code/spikes/nx/nxpm/node_modules/@angular-devkit/core/node_modules/ajv/dist/compile/validate/index.js:192:13
    at CodeGen.code (/Users/XXX/Code/spikes/nx/nxpm/node_modules/@angular-devkit/core/node_modules/ajv/dist/compile/codegen/index.js:439:13)
    at CodeGen.block (/Users/XXX/Code/spikes/nx/nxpm/node_modules/@angular-devkit/core/node_modules/ajv/dist/compile/codegen/index.js:568:18)
NOT SUPPORTED: keyword "id", use "$id" for schema ID
error Command failed with exit code 1.

Possible Solution

Steps to Reproduce (for bugs)

1. yarn create nx-workspace sandbox --preset=empty --cli=angular
2. cd sandbox
3. yarn add -D @nxpm/stack @nrwl/angular @nrwl/nest
4. yarn nx g @nxpm/stack:init web
5. Choose Tailwind

Context

Wanted to setup a fresh sandbox environment without installing @nxpm/cli or nx globally.

Your Environment

• Version used:

Angular CLI: 13.0.4
Node: 14.18.1
Package Manager: yarn 1.22.17
OS: darwin x64
Angular: undefined
...
Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1300.4
@angular-devkit/core         13.0.4
@angular-devkit/schematics   11.2.15
@angular/cli                 13.0.4
@schematics/angular          13.0.4
typescript                   4.4.4

  yarn: '1.22.17',
  nxpm: '0.0.0',
  node: '14.18.1',
  v8: '8.4.371.23-node.84',
  uv: '1.42.0',
  zlib: '1.2.11',
  brotli: '1.0.9',
  ares: '1.17.2',
  modules: '83',
  nghttp2: '1.42.0',
  napi: '8',
  llhttp: '2.1.4',
  openssl: '1.1.1l',
  cldr: '39.0',
  icu: '69.1',
  tz: '2021a',
  unicode: '13.0'

• Browser Name and version:
• Operating System and version (desktop or mobile): OS: darwin x64
• Link to your project:

Replace NX's README.md by the NXPM one

Expected Behavior

It would be better to have NXPM README.md instead of the NX one since there are some instructions that are necessary.

Current Behavior

Currently the README.md is the one provided by the NX workspace.

Possible Solution

Replace README.md

The generated web application should have a toast service

Expected Behavior

The web application has a toast service

Current Behavior

The web application does not have a toast service

Possible Solution

The service should be created in a library web/ui/toast and expose a UiToastService that has at least a success() and error() method.

It would be nice if there is a solution that works well with both Tailwind and Bootstrap, but not essential.

• Consider https://ngneat.github.io/hot-toast/
• Consider https://www.npmjs.com/package/ngx-toastr

`@nxpm/stack:init` should have to option to use a default branch different than `main`

Expected Behavior

If you generate a new project and your global default branch is different than main , scripts like affected and format will throw errors.

Current Behavior

Possible Solution

Solution has been commented in the PR #68 -> #68 (comment)

Steps to Reproduce (for bugs)

1. Having a different default branch name than main globally
2. generate new project
3. by running affected or format will throw error
4. husky will also throw error on new commits

Context

Your Environment

• Version used: 4.4.6
• Browser Name and version: n/a
• Operating System and version (desktop or mobile): Tested on Windows and Linux
• Link to your project: n/a

User admin should have pagination and search

Expected Behavior

And admin should be able to search for a user by username,email,firstName, lastName and page through the results.

Current Behavior

User admin will only show a limited amount of items and can't search.

Restructure the generate libraries

Expected Behavior

We should generate: libs/api/core/{data-access,feature}.

Current Behavior

Possible Solution

Steps to Reproduce (for bugs)

Context

Your Environment

• Version used:
• Browser Name and version:
• Operating System and version (desktop or mobile):
• Link to your project:

Cannot set property 'proxyConfig' of undefined

Error Cannot set property 'proxyConfig' of undefined when initialize new nxpm workspace

Expected Behavior

The inittialize new nxpm workspace should be success when run the init command

nxpm-stack init --name sandbox

Current Behavior

Cannot create the new workspace because below error:

Your Environment

• Version used: 4.21.0
• Operating System and version (desktop or mobile): Windows 10

Generated AuthStore needs to verify authenticated connection after login/register

Expected Behavior

After login or register, the authenticated connection should verified by retrieving the me Query.

Current Behavior

The session is not verified. When a login success but somehow the cookie does not get set, the session is invalid and will not work. This should be prevented by checking the session.

Steps to Reproduce (for bugs)

1. Deploy a generated app on Heroku
2. By default, cookie will not be set because of missing API_COOKIE_DOMAIN env var.
3. Register: the UI will let you in, you won't have a session

Only able to run nxpm-stack lint through NPX

I want add a pre-commit hook to run @nxpm/stack lint on my Nx project. I have installed it as a development dependency.

When I run it through NPX, as in npx nxpm-stack lint, it works just fine.

However, if I try to run it with nxpm-stack lint, it throws "nxpm-stack is not recognized...". I even installed the library globally, but I still get same error.

Do you know how can I fix this, so I don't have to run the script from NPX on every commit, but instead have it installed in my machine?

Error: spawnSync C:\Windows\system32\cmd.exe ENOENT

Expected Behavior

Initialize my first PANNG stack test app.

Current Behavior

When I run nxpm-stack init --name sandbox I get this error:

>  NXPM  Creating Nx Workspace
>  NXPM   RUN  yarn create nx-workspace PANNGstackTestApp --cli=nx --nx-cloud=false --preset=empty --skip-install --package-manager=yarn
>  NXPM  Install dependencies
>  NXPM   RUN  yarn add -D @nxpm/stack @nrwl/angular @nrwl/nest @nxtend/ionic-angular @nxtend/capacitor @ngneat/[email protected]
nxpm-stack.js init

Initialize new nxpm workspace

Options:
      --help             Show help                                     [boolean]
      --version          Show version number                           [boolean]
      --allowExisting                                                  [boolean]
  -n, --name                                                 [string] [required]
      --cli                                             [string] [default: "nx"]
      --webStyleLibrary                           [string] [default: "tailwind"]

<ref *1> Error: spawnSync C:\Windows\system32\cmd.exe ENOENT
    at Object.spawnSync (internal/child_process.js:1066:20)
    at spawnSync (child_process.js:602:24)
    at Object.execSync (child_process.js:647:15)
    at runCommand (C:\Development\Tools\nvm\v14.11.0\node_modules\@nxpm\cli\src\lib\commands\workspace-init.js:15:21)
    at Object.<anonymous> (C:\Development\Tools\nvm\v14.11.0\node_modules\@nxpm\cli\src\lib\commands\workspace-init.js:60:9)
    at Generator.next (<anonymous>)
    at C:\Development\Tools\nvm\v14.11.0\node_modules\@nxpm\cli\node_modules\tslib\tslib.js:117:75
    at new Promise (<anonymous>)
    at Object.__awaiter (C:\Development\Tools\nvm\v14.11.0\node_modules\@nxpm\cli\node_modules\tslib\tslib.js:113:16)
    at Object.workspaceInit (C:\Development\Tools\nvm\v14.11.0\node_modules\@nxpm\cli\src\lib\commands\workspace-init.js:38:20) {
  errno: -4058,
  code: 'ENOENT',
  syscall: 'spawnSync C:\\Windows\\system32\\cmd.exe',
  path: 'C:\\Windows\\system32\\cmd.exe',
  spawnargs: [
    '/d',
    '/s',
    '/c',
    '"yarn add -D @nxpm/stack @nrwl/angular @nrwl/nest @nxtend/ionic-angular @nxtend/capacitor @ngneat/[email protected]"'
  ],
  error: [Circular *1],
  status: null,
  signal: null,
  output: null,
  pid: 0,
  stdout: null,
  stderr: null
}

Steps to Reproduce (for bugs)

1. npm i -g #nxpm/cli
2. nxpm-stack init --name sandbox

Your Environment

• OS: Windows 10 64-bit
• NPM version 14.11

I tried it using CMD and Cmder.
and also tried it on NPM latest 16.0.0

Creating a new project should leave the user with a clean git repo.

Expected Behavior

After creating a new project with nxpm-stack init, the git repo should be clean.

Current Behavior

The git repo has (a lot of) unstaged changes. Everything that gets added after a new yarn create nx-workspace.

Possible Solution

An attempt was made.... but this is not it.

Probably something like execSync('git add -a && git commit') will work.

Steps to Reproduce (for bugs)

1. Create a new project
2. Run git status in the new project

Context

Ideally, we'd not use yarn create nx-workspace and append to that, but basically replace @nrwl/workspace with a custom workspace layout.

That's a lot of work and potential maintenance so for now adding an extra commit is the quick win.

Add npm script to start postgress container

Add a script in package.json to start the postgress container by running docker-compose up.

Expected Behavior

A script in package.json to start the database before starting the other scripts.

Current Behavior

If you run the dev:api or dev:sdk scripts in the package.json you get an error

Possible Solution

Add "dev:db": "docker-compose up", to the package.json

Steps to Reproduce (for bugs)

1. nxpm-stack init --name sandbox
2. cd sandbox
3. code .
4. Run the dev:sdk or dev:api npm scripts.

Context

Prevented me getting started while following the introduction here: https://www.youtube.com/watch?v=NvcRukwY_kM

Your Environment

MacOS Big Sur

• NPM version: 6.14.8
• Node version: v12.18.2
• nxpm/cli version: 4.18.0
• yarn version: 1.22.5
• Operating System and version (desktop or mobile): MacOS Big Sur

Output from yarn list @nxpm/cli:

yarn list v1.22.5
warning Filtering by arguments is deprecated. Please use the pattern option instead.
└─ @nxpm/[email protected]
✨ Done in 0.96s.

Duplicated code that can be removed

Expected Behavior

There is some unused code in the ApiCore libraries as well few files that are unnecesary.

Current Behavior

Possible Solution

In my working example I have committed the changes with all the unnecessary code I saw. If you are interested I can submit a PR with the code removed:

ruslanguns/nxpm-app-sample@36ce047

Steps to Reproduce (for bugs)

By generating a new workspace.

Your Environment

• Version used: nxpm-stack --version 4.4.4
• Browser Name and version: N/A
• Operating System and version (desktop or mobile): N/A
• Link to your project: N/A

Add support for Tailwind

Expected Behavior

Current Behavior

Possible Solution

Steps to Reproduce (for bugs)

Context

Your Environment

• Version used:
• Browser Name and version:
• Operating System and version (desktop or mobile):
• Link to your project:

NX 13+ removes `projects` from nx.json. Workspace-lint introduces it and causes errors

With the later NX versions, the workspace-lint command causes issues due to it adding projects back to nx.json.

The problematic code is linked below.

stack/packages/cli/src/lib/commands/workspace-lint.ts

Line 33 in 7a131f7

projects: sortItems(file?.projects),

my suggestion is to wrap the projects property in an iif statement.

....(file?.projects ? { projects: sortItems(file?.projects) } : {})

As well as the same for packageJson and compiler options

...(file?.compilerOptions
      ? {
          compilerOptions: {
            ...file?.compilerOptions,
            paths: sortItems(file?.compilerOptions?.paths)
          }
        }
      : {})

...(file?.scripts ? { scripts: sortItems(file?.scripts) } : {})

That way, if the property doesn't exist, it won't add it back in.

[Prisma]: Move Schema File to API

Dear @beeman ,

with respect to my issue #66 , which deals with multiple APIs within the monorepository, i stumbled upon the following issue:
Currently, the schema.prisma file is located within a library folder. However, with respect to multiple APIs, this schema file should be moved to the dedicated application (i.e., the apps/api1 folder), i guess.

What do you think?

All the best

Error creating a new project using @nxpm/cli: Required property 'name' is missing

Expected Behavior

Creating a new workspace using nxpm-stack init --name sandbox should work.

Current Behavior

It fails with the error message Required property 'name' is missing:

jannie-desktop:nxpm-stack$ nxpm-stack init --name sandbox
>  NXPM  Creating Nx Workspace
>  NXPM   RUN  yarn create nx-workspace sandbox --cli=nx --nx-cloud=false --preset=empty --skip-install --package-manager=yarn --default-base=main   
>  NXPM  Install dependencies
>  NXPM   RUN  yarn add -D @nxpm/stack@latest @nrwl/angular @nrwl/nest @nxtend/ionic-angular@beta @nxtend/capacitor@beta
>  NXPM  Initialize @nxpm/stack
>  NXPM   RUN  yarn nx g @nxpm/stack:init 
nxpm-stack.js init

Initialize new nxpm workspace

Options:
      --help             Show help                                     [boolean]
      --version          Show version number                           [boolean]
      --allowExisting                                                  [boolean]
      --tag                                         [string] [default: "latest"]
  -n, --name                                                 [string] [required]
      --cli                                             [string] [default: "nx"]
      --skipApi                                                        [boolean]
      --skipMobile                                                     [boolean]
      --skipWeb                                                        [boolean]
      --webStyleLibrary                           [string] [default: "tailwind"]

Error: Command failed: yarn nx g @nxpm/stack:init 
Required property 'name' is missing
error Command failed with exit code 1.

    at checkExecSyncError (node:child_process:826:11)
    at execSync (node:child_process:900:15)
    at runCommand (/home/jannie/.npm-global/pnpm-global/5/node_modules/.pnpm/@[email protected]/node_modules/@nxpm/cli/src/lib/commands/workspace-init.js:14:34)
    at /home/jannie/.npm-global/pnpm-global/5/node_modules/.pnpm/@[email protected]/node_modules/@nxpm/cli/src/lib/commands/workspace-init.js:48:9
    at Generator.next (<anonymous>)
    at /home/jannie/.npm-global/pnpm-global/5/node_modules/.pnpm/[email protected]/node_modules/tslib/tslib.js:117:75
    at new Promise (<anonymous>)
    at __awaiter (/home/jannie/.npm-global/pnpm-global/5/node_modules/.pnpm/[email protected]/node_modules/tslib/tslib.js:113:16)
    at workspaceInit (/home/jannie/.npm-global/pnpm-global/5/node_modules/.pnpm/@[email protected]/node_modules/@nxpm/cli/src/lib/commands/workspace-init.js:20:34)
    at /home/jannie/.npm-global/pnpm-global/5/node_modules/.pnpm/@[email protected]/node_modules/@nxpm/cli/src/lib/cli.js:47:46 {
  status: 1,
  signal: null,
  output: [
    null,
    <Buffer 79 61 72 6e 20 72 75 6e 20 76 31 2e 32 32 2e 31 37 0a 24 20 2f 68 6f 6d 65 2f 6a 61 6e 6e 69 65 2f 70 72 6f 6a 65 63 74 73 2f 6e 78 70 6d 2d 73 74 61 ... 136 more bytes>,
    <Buffer 52 65 71 75 69 72 65 64 20 70 72 6f 70 65 72 74 79 20 27 6e 61 6d 65 27 20 69 73 20 6d 69 73 73 69 6e 67 0a 65 72 72 6f 72 20 43 6f 6d 6d 61 6e 64 20 ... 25 more bytes>
  ],
  pid: 7934,
  stdout: <Buffer 79 61 72 6e 20 72 75 6e 20 76 31 2e 32 32 2e 31 37 0a 24 20 2f 68 6f 6d 65 2f 6a 61 6e 6e 69 65 2f 70 72 6f 6a 65 63 74 73 2f 6e 78 70 6d 2d 73 74 61 ... 136 more bytes>,
  stderr: <Buffer 52 65 71 75 69 72 65 64 20 70 72 6f 70 65 72 74 79 20 27 6e 61 6d 65 27 20 69 73 20 6d 69 73 73 69 6e 67 0a 65 72 72 6f 72 20 43 6f 6d 6d 61 6e 64 20 ... 25 more bytes>
}

Your Environment

• Version used: @nxpm/cli 5.0.0-beta.17
• Angular Version: Angular CLI: 13.1.4
• Node Version: 16.13.2
• NPM Version: 8.3.2
• PNPM Version: 6.27.2
• Yarn Version: 1.22.17
• NX Version: nx 13.4.6
• Operating System and version (desktop or mobile): Linux Mint 20.3 Cinnamon v.5.2.7 Kernel v.5.4.0-96-generic

[@nxpm/cli] running nxpm-stack init fails when no global git identity is configured

Expected Behavior

Running nxpm-stack init should work if there are no global git identity.

Current Behavior

It fails because there is no global git identity

Error: Command failed: git checkout -B main && git add . && git commit -am "Initial commit of @nxpm/stack"
Switched to a new branch 'main'

*** Please tell me who you are.

Run

  git config --global user.email "[email protected]"
  git config --global user.name "Your Name"

to set your account's default identity.
Omit --global to set the identity only in this repository.

Possible Solution

The CLI should check if these values exist. If not, it should set them with anonymous defaults.

Steps to Reproduce (for bugs)

1. nxpm sandbox base run
2. npm install -g @nxpm/cli
3. nxpm-stack init --name sandbox

Rename DATA-ACCESS Library Type

Dear @beeman ,

i noticed, that the data-access library type results in folder names like this: libs/api/foobar/data-access/... and respective module is named like this: api-foobar-data-access.module.ts,

Modules for other types (i.e, ui or feature), however, are called api-foobar-feature.module.ts.

The feature Module has 3 parts, whereas the Data-Access Module has 4 parts.
Maybe we can align those library types by just using data instead of data-access?
What do you think?

All the best

Error creating a new project with nxpm-stack init: undefined 'api'

Expected Behavior

Creating a new workspace using nxpm-stack init --name sandbox should work.

Current Behavior

Possible Solution

I've been looking for same error and found this issue looking similar or related in nx repo.

Your Environment

• Version used: nxpm/cli 4.21.0 & nxpm/cli@next
• Operating System and version (desktop or mobile): Windows 10 PRO 19044.1586

The api generator should create a structure with a different name

Dear @beeman ,

i would like to have multiple nestjs apis within my monorepository. However, this is currently not possible with @nxpm/stack, because the API is automatically generated and named api.

Can we have, similar to the angular generator an additional name field to provide respective api name?

WebLayoutStore should have a theme switcher

Expected Behavior

The WebLayoutStore should implement a theme switcher and make it accessible from the user Profile menu.

Current Behavior

Theme can only be set by adding/removing the class from <body> manually.

Solution

Implement theme switcher from https://github.com/beeman/component-store-playground

Implement cookie based authentication

Expected Behavior

Current Behavior

Possible Solution

Steps to Reproduce (for bugs)

Context

Your Environment

• Version used:
• Browser Name and version:
• Operating System and version (desktop or mobile):
• Link to your project: