[ADF Tutorial] Chapter two: Angular is the new black

by Cristina Martin · Published March 27, 2018 · Updated March 26, 2018

Previously on Venzia Community, we have introduced how to build a nice application that Alfresco provide for free to see the power of ADF. In this post we will learn how to make a simple app based in Angular 2 using Yeoman & Alfresco Application Generator.

Be prepare and let’s do some magic!

What we want to achieve

From one side: Build a custom application based in Angular 2 (ADF). We will deploy it on same Alfresco server.
With this webapp you can login with your Alfresco credentials and get access in all your documents.

Let’s start \m/

Install Yeoman from a terminal

Cristina$ sudo npm install -g yo
/Users/Cristina/.nvm/versions/node/v9.5.0/bin/yo-complete -> /Users/Cristina/.nvm/versions/node/v9.5.0/lib/node_modules/yo/lib/completion/index.js
/Users/Cristina/.nvm/versions/node/v9.5.0/bin/yo -> /Users/Cristina/.nvm/versions/node/v9.5.0/lib/node_modules/yo/lib/cli.js

yo@2.0.1 postinstall /Users/Cristina/.nvm/versions/node/v9.5.0/lib/node_modules/yo
yodoctor

Yeoman Doctor
Running sanity checks on your system

✔ Global configuration file is valid
✔ NODE_PATH matches the npm root
✔ Node.js version
✔ No .bowerrc file in home directory
✔ No .yo-rc.json file in home directory
✔ npm version

Everything looks all right!
+ yo@2.0.1
added 3 packages from 1 contributor and updated 16 packages in 15.67s

Note: In my case I had already installed, please be aware this output might be different comparing yours.

Create our app using Alfresco Application Generator
```
Cristina$ cd git
sudo npm install -g generator-alfresco-adf-app
+ generator-alfresco-adf-app@2.2.0
removed 1 package and updated 10 packages in 9.452s
```
Note: In my case I had already installed, please be aware this output might be different comparing yours
Time to generate our new project in ADF. Check the following video to see ADF Angular app generator in action

Next, we will build our document-viewer app

Cristina$ cd document-viewer/
Cristina$ ls
Dockerfile e2e package-lock.json proxy.conf.json
LICENSE karma.conf.js package.json src
README.md nginx.conf protractor-ci.conf.js tsconfig.json
docker.md node_modules protractor.conf.js tslint.json
Cristina$ npm install
....
up to date in 9.094s

Let’s check alfreco configuration
```
Cristina$ cat proxy.conf.json
{
"/alfresco": {
"target": "http://localhost:8080",
"secure": false,
"changeOrigin": true
}
}
```
In my case, everything looks alright. If you have Alfresco content in another server you’ll need to change the target field and adapt it.

Let’s start our Alfresco

Cristina$ cd /Application/Alfresco/Community/alfresco-5.2.0/
Cristina$ ./alfresco.start && tail -n500 -f tomcat/logs/catalina.out
....
INFORMATION: Deployment of web application directory /Applications/Alfresco/community/clean/alfresco-5.2-072017/tomcat/webapps/host-manager has finished in 99 ms
mar 23, 2018 5:16:43 PM org.apache.coyote.AbstractProtocol start
INFORMATION: Starting ProtocolHandler ["http-bio-8080"]
mar 23, 2018 5:16:43 PM org.apache.coyote.AbstractProtocol start
INFORMATION: Starting ProtocolHandler ["ajp-bio-8009"]
mar 23, 2018 5:16:43 PM org.apache.coyote.AbstractProtocol start
INFORMATION: Starting ProtocolHandler ["http-bio-8443"]
mar 23, 2018 5:16:43 PM org.apache.catalina.startup.Catalina start

Note: Check you’re able to access into Share to verify it’s working

Let’s start our app

Cristina$ npm start

> adf-cli-acs-template@2.2.0 start /Users/Cristina/git/document-viewer
> npm run validate-config &amp;&amp; ng serve --open

> adf-cli-acs-template@2.2.0 validate-config /Users/Cristina/git/document-viewer
> ajv validate -s node_modules/@alfresco/adf-core/app.config.schema.json -d ./src/app.config.json --errors=text --verbose

./src/app.config.json valid
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
....
webpack: Compiled successfully.