Fanis Prodromou
I am a Senior Software Engineer with a passion for Front End development with Angular. I have developed vast experience in code quality, application architecture, and application performance.
- Google Developer Expert for Angular
- Senior Angular Developer @ ASI
- Co-organizer of Angular Athens Meetup
- Angular Content Creator
Fanis Prodromou
@prodromouf
https://blog.profanis.me
/prodromouf
Library in a (mono|poly)-repo
Agenda
- What is a library
- Create and use a library
- mono-repo
- poly-repo
What is a Library?
Like librarians organize the books per context (author, topic),
similarly, we can organize our code per context (data, ui)
Home
Products
Users
Home
Products
Users
Angular Workspace
Library
Application
Library Container
npm init @angular profanis-app -- --no-create-applicationng generate library profanis-libng generate application profanis-appng generate application profanis-app-two
Mono-Repo
Mono-Repo
profanis-app
profanis-app-two
profanis-lib
Mono-Repo
Dependency Management
Dependency Management
Dependency Management
Dependency Management
.
└── projects
├── profanis-lib
├── profanis-lib-app
└── profanis-lib-app-twoCode Sharing
Discoverability
Poly-Repo
.
└── projects
├── profanis-lib
├── profanis-app
└── profanis-app-two.
└── projects
└── profanis-app-poly
How do things work?
How can we use a Proxy?
What is registry?
What is registry?
A repository for packages that implement the
CommonJS Package Registry
specification
What is registry?
https://registry.npmjs.org
.
├── projects
│ └── profanis-app-poly
└── .npmrc
.
├── projects
│ └── profanis-app-poly
└── .npmrc
Producer
Consumer
.
├── projects
│ └── profanis-app-poly
└── .npmrc
Producer
Consumer
#1
Install Verdaccio
> npm i verdaccio -g> verdaccio
info --- config file - /home/fanis/.config/verdaccio/config.yaml
info --- the "crypt" algorithm is deprecated consider switch to "bcrypt" in the configuration file. Read the documentation for additional details
info --- using htpasswd file: /home/fanis/.config/verdaccio/htpasswd
info --- plugin successfully loaded: verdaccio-htpasswd
info --- plugin successfully loaded: verdaccio-audit
warn --- http address - http://localhost:4873/ - verdaccio/5.27.0
#2
Publish Library
> ng build profanis-lib
...
------------------------------------------------------------------------------
Built Angular Package
- from: /profanis-app/projects/profanis-lib
- to: /profanis-app/dist/profanis-lib
------------------------------------------------------------------------------
...> cd dist/profanis-lib/
> npm publish --registry http://localhost:4873
#3
Use the Library
registry=http://localhost:4873
.
├── projects
│ └── profanis-app-poly
└── .npmrc
Consumer
registry=http://localhost:4873{
"name": "profanis-app-poly",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular/animations": "^16.0.0",
"@angular/common": "^16.0.0",
"@angular/compiler": "^16.0.0",
"@angular/core": "^16.0.0",
"@angular/forms": "^16.0.0",
"@angular/platform-browser": "^16.0.0",
"@angular/platform-browser-dynamic": "^16.0.0",
"@angular/router": "^16.0.0",
"profanis-lib": "^0.0.2",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.13.0"
},
"devDependencies": {
...
}
}
Auth protection
Theming
Conclusion & Next Steps
Deploy to a remote server
Thank you!!
:)
@prodromouf
https://blog.profanis.me
/prodromouf
Code Shots With Profanis
Libs in a Poly Repo
By Fanis Prodromou
