Hyland Community
Help
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Modernizing Your Alfresco Front-End Development with NX Generators

angelborroy
Community Manager Community Manager
Community Manager
Monday

The Alfresco developer ecosystem has long relied on Yeoman generators to bootstrap ADF applications. While this approach has served us well, it’s time for a more modern, scalable, and maintainable solution.

Enter the Alfresco Front-End Generators project: a new generation of scaffolding tools, built on top of Nx. These generators bring improved developer experience, better project structure, and easier extensibility when working with Alfresco ADF, ACA (Alfresco Content App), and ADW (Alfresco Digital Workspace).

In this post, we’ll walk you through how to use these generators in different scenarios:

  1. Creating a minimal empty app
  2. Creating a template app with ready-to-use features
  3. Extending Alfresco Content App (ACA)
  4. Extending Alfresco Digital Workspace (ADW), the UI available only for Enterprise customers
  5. Exploring recipes to tailor your apps further

Requirements

Before starting, ensure you’re running a recent version of Node.js (22.x recommended):

node -v
# 22.x

Install Nx globally:

npm install -g nx

1. Creating a minimal empty app

If you just want a bare-bones ADF app to start from scratch, you can generate an empty workspace and add Alfresco generators.

npx create-nx-workspace

Answer the prompts:

  • Workspace: empty
  • Stack: none
  • Prettier: No
  • CI provider: skip
  • Remote caching: skip

This creates a clean workspace. Now install dependencies:

cd empty
npm install
nx add /adf-generators

Generate the empty app:

nx generate /adf-generators:empty-app
✔ What name would you like to use? · empty

Install Angular build tools and run:

cd empty
npm i -D @angular-devkit/build-angular
npm install
npm start

You now have a running empty ADF app scaffolded with Nx available in http://localhost:4200

empty-app.png

2. Creating a template app

For most developers, it’s easier to start with a preconfigured app that includes built-in Alfresco features.

npx create-nx-workspace

Answer the prompts:

  • Workspace: template
  • Stack: none
  • Prettier: No
  • CI provider: skip
  • Remote caching: skip

This creates a clean workspace. Now install dependencies:

cd template
npm install
nx add /adf-generators

Generate a template app:

nx generate /adf-generators:template-app
✔ What name would you like to use? · template
? Which template would you like to use?
> Basic ACS functionalities integrated
Basic APS functionalities integrated
ACS and APS functionalities integrated

? Which authentication type would you like to use?
> Basic auth
OAuth

? Which providers would you like to use?
> ECM
BPM
ALL

Install build tools and run the app:

cd template
npm i -D @angular-devkit/build-angular
npm install
npm start

This will give you a working app connected to ACS with Basic authentication for ECM provider. The app will expect ACS running in http://localhost:8080 and it will be available in http://localhost:4200 

template-app.png

3. Extending ACA

If you want to build on top of the Alfresco Content App, you can extend it using the ACA generators.

Clone the ACA repo:

git clone git@github.com:Alfresco/alfresco-content-app.git
cd alfresco-content-app

Create the environment file ".env" to use ACS running locally in port 8080 with Basic Authentication:

BASE_URL="http://localhost:8080"

Install dependencies:

npm install
nx add /aca-generators

Generate your extension:

nx generate /aca-generators:aca-extension
✔ What name would you like to use? · ext
✔ What should be the directory name for the new library? · ext

CREATE projects/ext/.eslintrc.js
CREATE projects/ext/README.md
CREATE projects/ext/assets/ext.json
CREATE projects/ext/assets/i18n/en.json
CREATE projects/ext/karma.conf.js
CREATE projects/ext/ng-package.json
CREATE projects/ext/package.json
CREATE projects/ext/project.json
CREATE projects/ext/src/index.ts
CREATE projects/ext/src/lib/ext/ext.component.html
CREATE projects/ext/src/lib/ext/ext.component.scss
CREATE projects/ext/src/lib/ext/ext.component.ts
CREATE projects/ext/src/lib/ext.module.ts
CREATE projects/ext/test.ts
CREATE projects/ext/tsconfig.lib.json
CREATE projects/ext/tsconfig.lib.prod.json
CREATE projects/ext/tsconfig.spec.json
UPDATE app/src/app/extensions.module.ts
UPDATE app/project.json
UPDATE tsconfig.json

Then install and run:

npm install
npm start

Your ACA is now extended with a new custom library and available in http://localhost:4200 . Remember that is expecting to have ACS live at http://localhost:8080 

aca-extension.png

4. Extending ADW

To extend ADW, start from the official ADW source code (Enterprise credentials are required):

Download ADW 7.1.0 source code

Extract and configure ".env" file:

BASE_URL="http://localhost:8080"
APP_CONFIG_PROVIDER="ECM"
APP_CONFIG_AUTH_TYPE="BASIC"
BASE_PATH="./"
APP_CONFIG_PLUGIN_PROCESS_SERVICE=false
APP_CONFIG_PLUGIN_MICROSOFT_ONLINE=false

Modify also directly app.config.json if the above configuration is not applied.

Install dependencies:

npm install
nx add /adw-generators

Generate an ADW extension:

nx generate /adw-generators:adw-extension
✔ What name would you like to use? · ext
✔ What should be the directory name for the new library? · ext

CREATE libs/content-ee/ext/.eslintrc.js
CREATE libs/content-ee/ext/README.md
CREATE libs/content-ee/ext/assets/ext.json
CREATE libs/content-ee/ext/assets/i18n/en.json
CREATE libs/content-ee/ext/karma.conf.js
CREATE libs/content-ee/ext/ng-package.json
CREATE libs/content-ee/ext/package.json
CREATE libs/content-ee/ext/project.json
CREATE libs/content-ee/ext/src/index.ts
CREATE libs/content-ee/ext/src/lib/ext/ext.component.html
CREATE libs/content-ee/ext/src/lib/ext/ext.component.scss
CREATE libs/content-ee/ext/src/lib/ext/ext.component.ts
CREATE libs/content-ee/ext/src/lib/ext.module.ts
CREATE libs/content-ee/ext/test.ts
CREATE libs/content-ee/ext/tsconfig.lib.json
CREATE libs/content-ee/ext/tsconfig.lib.prod.json
CREATE libs/content-ee/ext/tsconfig.spec.json
UPDATE apps/content-ee/src/app/extensions.module.ts
UPDATE apps/content-ee/project.json
UPDATE tsconfig.base.json

Run your extended ADW:

npm install
npm start content-ee

Your ADW is now extended with a new custom library and available in http://localhost:4200 . Remember that is expecting to have ACS live at http://localhost:8080 

adw-extension.png

5. Exploring recipes

The recipes section of the project contains practical guides for customizing your generated apps. These include:

  • Adding new routes
  • Extending layouts
  • Configuring authentication
  • Adding custom components

These recipes are a great way to go beyond scaffolding and tailor the app to your specific business needs.

Want to see more recipes?

If you’d like us to cover additional scenarios or topics, you can raise a feature request directly in the GitHub repository. Community feedback drives which recipes and generators we prioritize, so don’t hesitate to share your ideas!

Conclusion

The Alfresco Front-End Generators are the new standard for bootstrapping and extending ADF, ACA, and ADW applications. Built on Nx, they provide a modern, flexible, and developer-friendly way to get your projects up and running. And with recipes, you can keep iterating without reinventing the wheel.

Try it out today and help us shape the future of Alfresco front-end development!

Copyright © 2025 Khoros, LLC