zensoftware / zen Goto Github PK

Cloned Repo and followed the steps in the Readme - Angular portal runs but nothing in the page loads and console receives the message "Uncaught SyntaxError: Unexpected token e in JSON at position 0".

@nest-modules/mailer is unmaintained.

• Evaluate @squareboat/nest-mailman as a substitute
  • @squareboat/nest-mailman uses Nest v7. View the npm install error:
  • npm ERR! peer @nestjs/common@"^6.7.0 || ^7.0.0" from @squareboat/[email protected]
  • @nest-modules/mailer is on Nest v9. It is better to keep this dependency
• Upgrade to @nestjs-modules/mailer. They changed their npm package name. Re-integrate with the latest version.
  • Finished with: b91dedc
• Restructure dev ops to utilize /assets/mail as the directory to house .hbs mail templates.

• Create deployable packages for Android
• Create deployable packages for iPhone

In progress...
Apollo Client connects and everything works, but this needs a publicly available example

• WebSocketLink connects and Nest @GqlGuard and @Roles decorators work with Subscriptions.
• Create an example

nx serve api

NX Failed to process the project graph with "nx-js-graph-plugin".

The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received undefined

Because of the error the Nx daemon process has exited. The next Nx command is going to restart the daemon process.
If the error persists, please run "nx reset".

node -v:
v20.5.0

npm -v
9.8.0

Currently there are some problems connecting to the Colyseus server after migrating a bunch of networking working code from another project into this project to get Colyseus integrated with all the code generation pre-configured for the users of this starter kit.

This is not breaking the project, but it would be nice to have the full stack of networking solutions complete and working. It works in my other project...

This line should connect the player to the game server.

The response from the server I am getting is:

"{\"code\":4213,\"error\":\"Cannot read properties of undefined (reading \'processId\')\"}"

I'll update this issue when the problem has been resolved.

• Integrate an Angular material dark theme
• Integrate an Angular Material light theme
• Ensure @zen/auth components render well bff02ce
• Ensure @zen/components render well

There is a need to be able to associate/dissociate OAuth2 OIDC providers. Some user settings needs to be exposed for the user to be able to manage associating their 3rd party auth systems linked to their account.

• Display list of OIDC providers available to associate their account with.
• Enable the ability to dissociate the user from an OIDC provider.
• Ensure user has a unique username and password before dissociation. The number of OIDC providers linked to their account should not fall below 0. Create a guard against this.

In process...

• Create 2 way binding for ngModel of <zen-error> to bind to string[] of errors.
• Create a parseGqlErrors RxJS pipe operator to parse GraphQL error responses.

Role-based authentication control is limited in many respects. A much better authorization scheme would be to utilize attribute-based authentication control. Actions can be performed on Prisma models that have attributes to be evaluated against a given user. This is the problem that libraries like Casl aim to solve. The change has proven very fruitful and I have concluded it is necessary to make it the default authorization scheme.

• Implement subject-attribute authorization utilizing @casl/prisma
• Refactor RBAC code. Evaluate if it is a good idea to keep both RBARole-based authentication control is limited in many respects. A much better authorization scheme would be to utilize attribute-based authentication control. Actions can be performed on Prisma models that have attributes to be evaluated against a given user. This is the problem that libraries like Casl aim to solve. The change has proven very fruitful and I have concluded it is necessary to make it the default authorization scheme.
• Implement subject-attribute authorization utilizing @casl/prisma
• Refactor RBAC code. Evaluate if it is a good idea to keep both RBAC & ABAC systems.
• Refactor code generation to utilize the Casl guards
• Code generate an importable Casl Subject[] that contains the Prisma types
• Integrate @casl/angular and pass rules from the server as a JSON object in the field ability on the AuthSession object.

Both RBAC & ABAC authorization schemes are now fully supported from v7.0.0 and on.C & ABAC systems.

• Refactor code generation to utilize the Casl guards
• Code generate an importable Casl Subject[] that contains the Prisma types
• Integrate @casl/angular and pass rules from the server as a JSON object in the field ability on the AuthSession object.

Both RBAC & ABAC authorization schemes are now fully supported from v7.0.0 and on. This is a major upgrade of the system and alleviates the limitations that RBAC has. ABAC is a much more congruent authorization scheme when leveraging a library like @casl/prisma.

Customizing Casl authorization can be done in the following file:

• Update api to integrate @nestjs/graphql & @nestjs/apollo 0889b0d

I've noticed that if the "token" value pre-exists in the default host localhost:4200 before running the project, it can lead to a syntax error during JSON parsing by a dependency library. I contacted the team behind the localstorege-slim library regarding this, and they were quick to address it. They've released a new version, 2.5.0, just yesterday. For more details, refer to the related issue.

If it's alright with you, I'd happily submit a PR to address this.

BTW, I am blown away by the incredible work you've done! Thanks a million for creating and sharing this code!

🌀 Extract out portal settings with a database seed, via Prisma migrate. Ideas include:

• Nest module options
• common Angular environment variables

When starting the Angular app with nx run portal:serve:development the project compiles successfully, though there is some noisy logging. This is a known issue with Nx with the newest version of Angular. It is said to be harmless.

nrwl/nx#11138

Project extension with invalid name found.
Project extension with invalid name found.
Project extension with invalid name found.
... repeated many times

Hello, I'm back here because I really like this project and I think it has some potentials. I would like to know more but I could not find any other way to reach you. So here are some questions :

• What are the licence on this work ?
• Is it a professional or a personal work ?
• What do you plan to do with this ?
• Are you using it in prod ?
• Are you close to Lennon Reid ?

okay I'M NOT FROM THE POLICE. Just digging a bit because, maybe I could offer some time and eventually use it in some projects of mine.

Cheers

Hello,

Thank you a lot for your good work this repository is really awesome. However it is grouping a lot of third parties and I think it could be very valuable to have a section somewhere about the convention you have followed (what about these sharp prefixed variables ?) and maybe a small tutorial to how to add basic features the right way (ng components, basic model). I mean, I doubt everybody knows about each of the technologies inside this project from start. For example during my first digging, my questions was, how do I add an angular component in "components", do I have to use nx? or ng? ah ok, but then do I have something to do about storybook ? But now I have to pull some todos.. How Should add the model ? is it pal.js doing its stuff or do I have to run additional command ? Well, you see what I mean. It was pretty discouraging. Of course the documentation of each product is helping, but a small introduction of how to do the basic things could be very helpful I think and a tutorial is playful. The project is great and imo is very able to help a lot of small teams, freelancers, etc. to build new products with limited knowledge of full stack architecture.

Thanks again for the good work !

• Refactor the current combination of <mat-toolbar> and mat-sidenav-container and abstract it as a <zen-layout> component instead.
• Fully responsive via mobile first design. Reference: Academind - Angular Material Responsive Navigation Tutorial
• Multiple ng-content projections entry points that can be selected via <div slot="..."> as named sections.

<!-- app.component.html -->
<zen-layout>
  <div slot="menu-content">
    ...Menu items...
  </div>

  <div slot="main-content">
    <router-outlet></router-outlet>
  </div>
</zen-layout>

I've tried a lot of combinations for Angular with Node but this is the most awesome starter :)), nice job.

ISSUE

When I update schema.prisma by adding simple one-to-many relation

model User {
  id        Int       @id @default(autoincrement())
  createdAt DateTime  @default(now())
  username  String    @unique
  password  String
  email     String    @unique
  roles     Role[]
  
  products  Product[]
}

model Product {
  id      Int  @id @default(autoincrement())
  owner   User @relation(fields: [ownerId], references: [id])
  ownerId Int
}

And after npm run prisma:migrate it is possible to insert data with Prisma Studio but it is not possible to start Node.js backend with npm run start:api.

Interface ProductUpdateManyMutationInput is not generated (file: resolversTypes.ts).

$ npm run start:api

> [email protected] start:api
> concurrently "ng serve api" "gulp handlebars:copy" "gulp handlebars:watch"

[0]
[0] > nx run api:serve
[0]
[2] [13:00:01] Using gulpfile ~/git/stepanic/angular-nest-prisma-graphql-demo/gulpfile.js
[1] [13:00:01] Using gulpfile ~/git/stepanic/angular-nest-prisma-graphql-demo/gulpfile.js
[2] [13:00:01] Starting 'handlebars:watch'...
[1] [13:00:01] Starting 'handlebars:copy'...
[1] [13:00:01] Finished 'handlebars:copy' after 36 ms
[1] gulp handlebars:copy exited with code 0
[0] chunk (runtime: main) main.js (main) 59.6 KiB (javascript) 937 bytes (runtime) [entry] [rendered]
[0]
[0] WARNING in ./apps/api/src/app/auth/index.ts 2:0-45
[0] export 'RequestUser' (reexported as 'RequestUser') was not found in './request-user' (module has no exports)
[0]
[0] WARNING in ./apps/api/src/app/graphql/models/index.ts 1:0-37
[0] export 'IContext' (reexported as 'IContext') was not found in './context' (module has no exports)
[0]
[0] webpack compiled with 2 warnings (c1b573c333bb0c74)
[0] Debugger listening on ws://localhost:9229/8cfbe261-8f68-4f5d-b827-f2de74de6fd5
[0] Debugger listening on ws://localhost:9229/8cfbe261-8f68-4f5d-b827-f2de74de6fd5
[0] For help, see: https://nodejs.org/en/docs/inspector
[0] Issues checking in progress...
[0]
[0] /Users/stepanic/git/stepanic/angular-nest-prisma-graphql-demo/node_modules/graphql/validation/validate.js:107
[0]     throw new Error(errors.map(function (error) {
[0]           ^
[0] Error: Unknown type "ProductUpdateManyMutationInput". Did you mean "UserUpdateManyMutationInput", "ProductUpdateManyWithoutOwnerInput", "ProductCreateManyInput", "ProductCreateManyOwnerInput", or "ProductUpdateInput"?
[0]     at assertValidSDL (/Users/stepanic/git/stepanic/angular-nest-prisma-graphql-demo/node_modules/graphql/validation/validate.js:107:11)
[0]     at Object.buildASTSchema (/Users/stepanic/git/stepanic/angular-nest-prisma-graphql-demo/node_modules/graphql/utilities/buildASTSchema.js:45:34)
[0]     at makeExecutableSchema (/Users/stepanic/git/stepanic/angular-nest-prisma-graphql-demo/node_modules/@graphql-tools/schema/index.js:497:26)
[0]     at Object../apps/api/src/app/graphql/resolvers/index.ts (/Users/stepanic/git/stepanic/angular-nest-prisma-graphql-demo/dist/apps/api/webpack:/zen/apps/api/src/app/graphql/resolvers/index.ts:17:51)
[0]     at __webpack_require__ (/Users/stepanic/git/stepanic/angular-nest-prisma-graphql-demo/dist/apps/api/webpack:/zen/webpack/bootstrap:19:1)
[0]     at Object../apps/api/src/app/graphql/gql-config.service.ts (/Users/stepanic/git/stepanic/angular-nest-prisma-graphql-demo/dist/apps/api/main.js:934:68)
[0]     at __webpack_require__ (/Users/stepanic/git/stepanic/angular-nest-prisma-graphql-demo/dist/apps/api/webpack:/zen/webpack/bootstrap:19:1)
[0]     at Object../apps/api/src/app/graphql/zen-graphql.module.ts (/Users/stepanic/git/stepanic/angular-nest-prisma-graphql-demo/dist/apps/api/main.js:2050:77)
[0]     at __webpack_require__ (/Users/stepanic/git/stepanic/angular-nest-prisma-graphql-demo/dist/apps/api/webpack:/zen/webpack/bootstrap:19:1)
[0]     at Object../apps/api/src/app/graphql/index.ts (/Users/stepanic/git/stepanic/angular-nest-prisma-graphql-demo/dist/apps/api/main.js:999:77)
[0] ERROR in apps/api/src/app/graphql/resolversTypes.ts:443:9
[0] TS2304: Cannot find name 'ProductUpdateManyMutationInput'.
[0]     441 |
[0]     442 | export interface UpdateManyProductArgs {
[0]   > 443 |   data: ProductUpdateManyMutationInput;
[0]         |         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
[0]     444 |   where?: ProductWhereInput;
[0]     445 | }
[0]     446 |
[0]
^C[2] gulp handlebars:watch exited with code SIGINT
[0] ng serve api exited with code 0

Getting an error starting Storybook after upgrading from Storybook from 7.2.1 to 7.3.2 for the "auth" library. Though, the "components" library has storybook working just fine. I think it has something to do with Jest & Storybook.

ReferenceError: beforeEach is not defined
    at ./node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@angular/core/fesm2022/testing.mjs (http://localhost:4400/vendors-node_modules_pnpm_angular_material_16_2_1__angular_animations_16_2_1__angular_cdk_16_-35a127.iframe.bundle.js:107726:1)
    at __webpack_require__ (http://localhost:4400/runtime~main.iframe.bundle.js:28:33)
    at fn (http://localhost:4400/runtime~main.iframe.bundle.js:338:21)
    at ./node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@[email protected][email protected]/node_modules/@angular/router/fesm2022/testing.mjs (http://localhost:4400/vendors-node_modules_pnpm_angular_material_16_2_1__angular_animations_16_2_1__angular_cdk_16_-35a127.iframe.bundle.js:122215:79)
    at __webpack_require__ (http://localhost:4400/runtime~main.iframe.bundle.js:28:33)
    at fn (http://localhost:4400/runtime~main.iframe.bundle.js:338:21)
    at ./libs/auth/.storybook/preview.ts (http://localhost:4400/main.iframe.bundle.js:382:81)
    at __webpack_require__ (http://localhost:4400/runtime~main.iframe.bundle.js:28:33)
    at fn (http://localhost:4400/runtime~main.iframe.bundle.js:338:21)
    at Object.getProjectAnnotations [as nextFn] (http://localhost:4400/main.iframe.bundle.js:2040:2969)

• Nest + casl integration
  • Code generate default security permissions for Prisma models
  • Directives to customize policies over GraphQL resolvers
• @casl/angular integration

I think in templates/type-defs.ts the code :

export function TypeDefsTemplate(names: string[]) {
  let accum = `import { mergeTypeDefs } from '@graphql-tools/merge';

import SDLInputs from './sdl-inputs';
import User from './User/typeDefs';

export default mergeTypeDefs([
  SDLInputs,`;

  for (const name of names) {
    accum += `  ${name},\n`;
  }

  accum += `]);
`;

  return accum;
}

should be

export function TypeDefsTemplate(names: string[]) {
  let accum = `import { mergeTypeDefs } from '@graphql-tools/merge';

import SDLInputs from './sdl-inputs';\n`

  for(const name of names) {
    accum+= `import ${name} from './${name}/typeDefs';\n`
  }

accum +=`export default mergeTypeDefs([
  SDLInputs,`;
  console.log(names);
  for (const name of names) {
    accum += `  ${name},\n`;
  }

  accum += `]);
`;
  return accum;
}

as there are compile errors from not importing generated models other than the hard-coded User when starting the api after generating multiple schema models.

• Integrate an empty seed.ts file to seed data with Prisma

• Setup a branch that compiles the Angular app then serves it via Electron
• GitHub Actions to build and deploy the app
  • Continuous integration and workflow for automatic updates for the Electron app
  • Windows
  • Linux
  • Mac

In progress...

• [ x] UploadLink works, and ZenGraphQLOptions.UploadLinkOptions.mutationNames: string[] lists the mutations to be sent as multi-part form requests.
• Create an upload example

Blocked by issue: apollographql/apollo-server#3508
[x] Solution: Need to integrate graphql-upload directly 22ab0d0

• Nx 11 to Nx 12
• Angular 11 to Angular 12
• Nest 7 to Nest 8
• Prisma & PalJS

• Upgrade to Bootstrap 5

• Reject nested writes with a guard for security purposes

This is more of a question than an issue. I couldn't find a discussion board or slack, sorry if this is the wrong place to ask.

This repo is exactly the starter-kit I was looking for as it minimizes writing repetitive code that is defined in the SDL anyways, and makes full use of all generated Prisma Inputs in the resolvers.

However I am wondering how scalable is the current architecture of this project? Right now all the generated schemas are input into one application so it looks like it's a monolith. Would it be possible to separate services into different app folders, and federate them with Apollo Federation using Apollo Router? Looking over the gulpfile and the relevant code-gen I definitely think it's possible, but I was wondering if it is worth the effort, as I might be missing something (the current architecture might not be a monolith at all).

• WebSocket implementation for ZenGateway
• Configure CORS and ensure exposure of CORS options within environment.ts
• ngx-socket-io
• Implement role-based authorization control during connection of Socket.IO. NestJS & Angular: Establish JWT secured Socket.io Realtime Connection | Realtime Chat App.
• Evaluate authorization schemes:
  • "Nest middle-ware approach" vs "Nest guard decorators".
• Test Websocket protocol with the Nest app launched into a Kubernetes cluster.

In progress...