It was the end of june when the new Alfresco NG2 Components were announced as a new Alfresco Development Framework for developers. Today the framework is on its version 0.3, not mature for production enviroments yet, but very interesting for developers because it introduces an Angular 2 solution, for the development of your Alfresco customized front end.
In this post I would like to share some personal experiences using ADF in practice. I was wondering how the A.D.F. works and how to debug the source code… waiting to understand how to add a custom Angular 2 component. The approach is the same of several posts in the past: a step by step approach to make it work.
Prerequisites and tasks
Starting from a vanilla installation of Ubuntu 16.04.01 LTS, let’s install Java 8 following the tutorial at this link. Once Java 8 is successfully installed, we are going to cover the tasks described below.
- Alfresco setup
- Editor setup (using Sublime text 3)
- Angular 2 and Alfresco NG2 Components setup
- Creating your first A.D.F. application
- Debugging setup (using Augury)
- Running (and debugging) the application
To setup the Alfresco repository simply install it, using the provided wizard. You can download the installation executable called
alfresco-community-installer-201606-EA-linux-x64.bin here, but please remember not to start Alfresco when the last window will ask you. To install Alfresco open a terminal and execute the commands below.
cd ~ wget https://sourceforge.net/projects/alfresco/files/Alfresco%20201606-EA%20Community/alfresco-community-installer-201606-EA-linux-x64.bin chmod 777 alfresco-community-installer-201606-EA-linux-x64.bin ./alfresco-community-installer-201606-EA-linux-x64.bin
At the last task of the installation, please uncheck the flags as described below.
Once Alfresco is installed (but not running), it’s time to install the Enabling CORS module.
cd ~/alfresco-community/modules/platform wget https://artifacts.alfresco.com/nexus/service/local/repositories/releases/content/org/alfresco/enablecors/1.0/enablecors-1.0.jar
As an optional task you can install the REST API explorer. I personally find it useful but feel free to jump this task.
cd ../../tomcat/webapps wget https://artifacts.alfresco.com/nexus/service/local/repositories/releases/content/org/alfresco/api-explorer/1.1/api-explorer-1.1.war
Now that Alfresco is correctly setup, you can start it with the commands described below.
cd ~/alfresco-community ./alfresco.sh start tailf tomcat/logs/catalina.out
To check is working properly, open a browser and access to the URLs below.
http://localhost:8080/alfrescoto see Alfresco repository available.
http://localhost:8080/api-explorer-1.1to discover the Alfresco REST API (if installed).
Editor setup (using Sublime text 3)
Now that Alfresco is up and running, it’s time to setup an editor to customize the source code. I personally like Sublime Text 3, so below the installation tasks with everything is requested to work with Angular 2. To install the Editor, open a terminal and execute the commands below.
sudo add-apt-repository ppa:webupd8team/sublime-text-3 sudo apt-get update sudo apt-get install sublime-text-installer subl &
The last command will open the editor and finally setup all the requested folders and settings in a default installation. Now that Sublime Text 3 is successfully installed, let’s install everything is useful to develop with Angular 2 executing the commands listed below.
cd ~/.config/sublime-text-3/Packages/ sudo apt-get install git git clone --depth 1 https://github.com/Microsoft/TypeScript-Sublime-Plugin.git TypeScript git clone https://github.com/pjlamb12/st3-ng2-snippets git clone https://github.com/sindresorhus/editorconfig-sublime
Angular 2 and Alfresco NG2 Components setup
sudo apt-get install nodejs npm sudo ln -s /usr/bin/nodejs /usr/bin/node // Will require some minutes... please be patient. sudo npm install -g yo // Will require some minutes... please be patient. sudo npm install -g generator-ng2-alfresco-app
Creating your first A.D.F. application
Ready to create your first custom application over Alfresco? If yes, open a terminal and execute the command below.
cd ~ // Will require some minutes... please be patient. yo ng2-alfresco-app
Below a screenshot showing the parameters requested from the creation wizard in Yeoman. Please note the name of the application as
my-first-alfresco-app (but you could choose your preferred name).
Congrats! Your Alfresco application is available into the
Now let’s setup the project into the Sublime Text 3 editor. First of all, execute the
subl command into a terminal and then the tasks described below.
- Click on the menu item ‘Project’, then on ‘Add Folder to Project’ and finally select the
my-first-alfresco-appfolder. A file selector will appear on the left.
- Click on the menu item ‘Project’, then on ‘Save Project as…’ and write
Debugging setup (using Augury)
The task below is optional (for example if your goal is to see the A.D.F. in action) but it could be relevant if you want to customize (and debug) your Alfresco application. I personally use Chromium browser + Augury extension. To setup the environment, open a terminal and execute the commands below.
sudo apt-get install chromium-browser chromium-browser &
Running (and debugging) the application
Now that everything is properly installed and configured, it’s time to run your custom Alfresco application.
cd ~/my-first-alfresco-app npm start
Your chromium browser will be opened with your custom Alfresco application running at the URL
Interested in debugging your Alfresco application? Right click on the web page and select
inspect. On the top right menu of the browser you will find
augury item. Select it and something similar the screenshot below will be shown for your discovery.
I hope you will enjoy your brand new Angular 2 application over Alfresco.
In this post I share some personal experiences using the new Alfresco Development Framework for developers. Today the framework is on its version 0.3, not mature for production enviroments yet, but very interesting for developers because it introduces an Angular 2 solution, for the development of your Alfresco customized front end.