[ADF Tutorial] Chapter two: Angular is the new black
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 && 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.
- Our browser will open a new tab with our basic app
That’s all by the moment. Next chapter we’re going to learn how to extend it 8)
By the way, some useful links below:
