# @nxpm/stack
automation + opinion = scale
---
## beeman
- From The Netherlands :flag-nl: :wave:
- Living in Colombia :flag-co:
- Freelance full-stack developer
- Worked as system/network administrator before
- Founder of **[BeeSoft Labs](https://beesoftlabs.dev)**
- Co-founder of the official Angular Discord
---
## Agenda
```typescript
- Create new Project
- Why
- About @nxpm/stack
- Demo
```
---
## Create new Project
### Install `@nxpm/cli`
```
yarn global add @nxpm/cli@latest
```
### Run `npm-stack init`
```
nxpm-stack init --name sandbox
```
---
## Why
- Building scalable apps is hard
- I was doing the same thing too often
- I had this idea for years
- I love automating things
- I **really** love Nx.
---
## Nx Workspace
- Multiple apps in a single workspace (monorepo)
- Modern tooling to manage the workspace
- Split your app up into Applications and Libraries
- Nx understands the dependencies
- Works well with large projects (100s of libs)
- Awesome plugin system + community
---
## Nxpm Stack
- Adds opinionated structure to Nx Workspace
- Generates a working full stack app
- Fully type safe, from db to ui
- Includes authentication + user mgmt
- Tools for rapid development
- Best practices are encouraged/automated
---
## Nx Structure 1
```graphviz
digraph {
graph [ fontname="Source Sans Pro", fontsize=24 ];
node [ fontname="Source Sans Pro", fontsize=20];
edge [ fontname="Source Sans Pro", fontsize=12 ];
subgraph cluster3 {
web [color="blue" label="Web", shape=circle]
api [color="red", label="Api", shape=circle]
label="Apps"
}
subgraph cluster2 {
apiProduct [color="red", label="@api/product"]
apiAuth [color="red" label="@api/auth"]
webAuth [color="blue" label="@web/auth"]
webProduct [color="blue" label="@web/product"]
shared [color="orange" label="@shared"]
api -> apiProduct
api -> apiAuth
web -> webProduct
web -> webAuth
apiProduct -> shared
webProduct -> shared
apiAuth -> shared
webAuth -> shared
label="Libs"
}
}
```
---
## Nx Structure 2
```graphviz
digraph {
graph [ fontname="Source Sans Pro", fontsize=24 ];
node [ fontname="Source Sans Pro", fontsize=20];
edge [ fontname="Source Sans Pro", fontsize=12 ];
subgraph cluster3 {
api [color="red", label="Api"]
web [color="blue" label="Web"]
}
subgraph clusterWebAuth {
webAuthFeat [color="blue", label="feature"]
webAuthUi [color="blue", label="ui"]
web -> webAuthFeat
webAuthFeat -> webAuthUi
label="@web/auth"
}
subgraph clusterWebProduct {
webProductFeat [color="blue", label="feature"]
webProductUi [color="blue", label="ui"]
web -> webProductFeat
webProductFeat -> webProductUi
label="@web/product"
}
subgraph clusterApiProduct {
apiProductFeat [color="red", label="feature"]
apiProductData [color="red", label="data"]
api -> apiProductFeat
apiProductFeat -> apiProductData
label="@api/product"
}
subgraph clusterApiAuth {
apiAuthFeat [color="red", label="feature"]
apiAuthData [color="red", label="data"]
api -> apiAuthFeat
apiAuthFeat -> apiAuthData
label="@api/auth"
}
subgraph clusterShared {
shared [color="orange" label="@shared"]
apiProductData -> shared
webProductUi -> shared
apiAuthData -> shared
webAuthUi -> shared
}
}
```
---
## Nx Structure 3
```graphviz
digraph {
graph [ fontname="Source Sans Pro", fontsize=24 ];
node [ fontname="Source Sans Pro", fontsize=20];
edge [ fontname="Source Sans Pro", fontsize=12 ];
subgraph cluster3 {
api [color="red", label="Api"]
web [color="blue" label="Web"]
}
subgraph cluster4 {
apiCore [color="red", label="@api/core"]
webCore [color="blue" label="@web/shell"]
api -> apiCore
web -> webCore
}
subgraph clusterWebAuth {
webAuthFeat [color="blue", label="feature"]
webAuthUi [color="blue", label="ui"]
webCore -> webAuthFeat
webAuthFeat -> webAuthUi
label="@web/auth"
}
subgraph clusterWebProduct {
webProductFeat [color="blue", label="feature"]
webProductUi [color="blue", label="ui"]
webCore -> webProductFeat
webProductFeat -> webProductUi
label="@web/product"
}
subgraph clusterApiProduct {
apiProductFeat [color="red", label="feature"]
apiProductData [color="red", label="data"]
apiCore -> apiProductFeat
apiProductFeat -> apiProductData
label="@api/product"
}
subgraph clusterApiAuth {
apiAuthFeat [color="red", label="feature"]
apiAuthData [color="red", label="data"]
apiCore -> apiAuthFeat
apiAuthFeat -> apiAuthData
label="@api/auth"
}
subgraph clusterShared {
shared [color="orange" label="@shared"]
apiProductData -> shared
webProductUi -> shared
apiAuthData -> shared
webAuthUi -> shared
}
}
```
---
## Questions so far?
---
## Nx Workspace
Seperates the packages by **technology**
- `@nrwl/angular`
- `@nrwl/nest`
- `@nrwl/react`
- `@nrwl/react-native`
- + community plugins
---
## Nxpm Stack
Seperates the packages by **functionality**
- `@nxpm/stack:api`
- **`@nrwl/nest`**
- `@nx-go/nx-go`
- `@nxpm/stack:web`
- **`@nrwl/angular`**
- `@nrwl/react`
---
## The PANGG Stack
```graphviz
digraph {
compound=true
rankdir=LR
graph [ fontname="Source Sans Pro", fontsize=20 ];
node [ fontname="Source Sans Pro", fontsize=18];
edge [ fontname="Source Sans Pro", fontsize=12 ];
graphql -> web [dir="both"]
graphql -> mobile [dir="both"]
postgres -> database [dir="both", ltail=session lhead=session]
api -> graphql [dir="both"]
database -> api [dir="both"]
postgres [color="#386cb0", label=Postgres, shape=cylinder]
subgraph clusterA {
database [label="Prisma"]
label="Data"
}
subgraph clusterB {
api [color="red", label="NestJS"]
graphql [color="green" label="GraphQL"]
label="API"
}
subgraph clusterC {
concentrate=true
web [color="blue" label="Angular"]
mobile [color="gray" label="Ionic"]
label="Frontend"
}
}
```
---
## Beyond the PANGG Stack
```graphviz
digraph {
compound=true
rankdir=LR
graph [ fontname="Source Sans Pro", fontsize=20 ];
node [ fontname="Source Sans Pro", fontsize=18];
edge [ fontname="Source Sans Pro", fontsize=12 ];
graphql -> web [dir="both"]
graphql -> mobile [dir="both"]
postgres -> database [dir="both", ltail=session lhead=session]
api -> graphql [dir="both"]
database -> api [dir="both"]
postgres [color="#386cb0", label=Postgres, shape=cylinder]
subgraph clusterA {
database [label="Prisma"]
label="Data"
}
subgraph clusterB {
api [color="red", label="@nx-go"]
graphql [color="green" label="GraphQL"]
label="API"
}
subgraph clusterC {
concentrate=true
web [color="blue" label="React"]
mobile [color="blue" label="Flutter"]
label="Frontend"
}
}
```
---
### Demo
- make sure Docker is running
- run the setup
- start the api, web and graphql sdk
- show admin + account management
- show crud
- show nxpm/stack project structure
---
## Automation
- Schematics are amazing!
- Lot of small building blocks...
- ...chained together
---
## Opinion
- Opinionated structure is essential
- Consistency is key
- Automate anything that you can do wrong/forget.
---
## Why not a Starter Template?
- Template is harder to maintain
- Generation is more flexible (tech matrix)
- Generators are useful after initial creation
- Generators are building blocks for bigger apps
---
## Roadmap (Mar 2021)
- Release first 'stable' version
- Documentation/Tutorials
- `yarn create nxpm-stack` (Interactive)
---
## Roadmap (Later)
- Add support for `React`, `Ionic`, `Go`
- Add UI libs: `bootstrap/tailwind/material/none`
- Low level opt-ins (`mailer`, `job queue`)
- Feature level opt-ins (`courses`, `cms`, `blockchain`, `ai`)
---
## Thank you!
### Questions?
:bee:
github.com/beeman
twitter.com/beeman_nl
youtube.com/beeman-dev
disord.gg/angular
{"metaMigratedAt":"2023-06-15T19:42:42.173Z","metaMigratedFrom":"YAML","title":"@nxpm/stack","breaks":true,"description":"View the slide with \"Slide Mode\"","contributors":"[{\"id\":\"f4262803-5bd8-4502-8401-b95b099ef7c1\",\"add\":24503,\"del\":15812}]"}