NX workspace: Opzetten met Angular

Als we kijken naar het belangrijkste voordeel van deze aanpak is dat het de ontwikkeling vereenvoudigt door alle code, configuraties en afhankelijkheden in één repository te centraliseren. Maar daarbuiten zijn er nog heel wat. 

• Gedeelde code  

  • Zorgt ervoor dat er minder herhalende code zich in het project bevindt 

• Atomic changes  

  • Aanpassingen in library en applicatie die component gebruikt kunnen direct samen aangepast worden. 

• Developer mobility 

  • Consistente manier van bouwen en testen schrijven  

• 1 set van dependencies  

  • Gebruik 1 versie van third-party dependencies, zorgt voor minder inconsistencies  

  • Applicaties waar minder aandacht krijgen blijven ook up to date  

Om een nieuwe workspace op te zetten kunnen we gebruiken maken van de NX CLI met het volgende commando 

npx create-nx-workspace --preset=angular 

Deze zal enkel configuratie vragen stellen als project naam, stylesheet format, linting tool en of er gebruik gemaakt zal worden van NX cloud. Default wordt Jest en Cypress toegevoegd als testframeworks aan het project. 

Workspace name (e.g., org name) APPEELIO 
What to create in the new workspace angular  
Application name todos  
Default stylesheet format CSS 

Na dit zal een nieuw project aangemaakt worden met deze structuur  

apps/
  {{appName}}
  {{appName}}-e2e
    de applicatie projecten
    libs
    de plaats waar alle libraries zullen geplaatst worden
    tools
    de plaats voor alle scripts voor het project  

Volgens de Nx workspace methode zal er veel gewerkt worden met kleine libraries. Dit zal er voor zorgen dat er tijdens het developement met NX veel gebruik zal worden gemaakt van creëren van libraries.  

De voordelen van het maken van libraries houdt in  

• Vluggere commandos  

  • Via het commando nx affected en de computation cache is het mogelijk om enkel testen te runnen die enkel aangeraakt zijn bij een code change 

• Visualizing architecture  

  • Met nx graph is het makkelijk om een grafiek te visualiseren die aantoont hoe de libs en applicaties relatereren tot elkaar  

• Beperkingen afdwingen  

  • Elke library heeft zijn eigen index.ts file die ervoor zorgt dat enkel de api die publiek gexprosed word kan gebruikt worden in ander libraries  

Om in NX een library aan te maken kunnen we ook weer gebruik maken van de NX CLI  

 nx g @nrwl/angular:lib mylib 

• --directory=”name subfolder” 

  • Hiermee kan je libraries nesten in een specifieke subfolder  

Dit commando zal een library genereren in de libs folder en zal de set up van deze voor zich nemen. Elke lib zal een index.ts file hebben die het access point zal zijn van de library en zal dus de publieke api van de library zijn. 

Het werken met een NX workspace zorgt ervoor dat we gemakkelijk kunnen gebruik maken van een monorepo en zorgt voor vele tools die ervoor zorgen dat development een stuk vlugger vooruit kan gaan. Het kan gebruikt worden voor elke size project en is makkelijk opzetbaar in een nieuw of bestaand project.