[ADF Tutorial] Chapter one: N00b here!
Hi everyone! In the latest Alfresco DevCon at Lisbon, we had the chance to attend to Denys Vuika talk “Using and Extending the Alfresco Content App” based on ADF. In plain words, he built an ADF basic application and made it public and free.
There is a nice conversation on twitter related with this app where John Knowles from Alfresco commented:
The Content App is an example of what can be done with the ADF. We chose a simple document management use case to tease out & drive the ADF component requirements, it also provides a valuable proving ground for components mimicking a real life app. We recognise the value of opening up the project for everyone to benefit from the work we’re putting into building an app. Whether it is a code reference for custom creations or a foundation for something great – we’d love to get contributions back and feedback :))
Venzia wants to help you: We want to introduce you in ADF world and we consider there is a nice opportunity starting with this app. During this post you’ll learn how to build & run it in your local machine, just for fun 🙂
Let’s start \m/
As a reference, what I have in my local:
- OS: MacOS Sierra 10.13.3
- Git version 2.9.3
- Apache Maven 3.5.2
- Alfresco Community release 072017 (5.2.x) installed in /Applications/alfresco – We can use also Enterprise version, but it should be at least 5.2
- Install node.js and npm with nvm
Cristina$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash Cristina$ export NVM_DIR="$HOME/.nvm" Cristina$ nvm install node Downloading and installing node v9.5.0... Downloading https://nodejs.org/dist/v9.5.0/node-v9.5.0-darwin-x64.tar.gz... ######################################################################## 100,0% Computing checksum with shasum -a 256 Checksums matched! Now using node v9.5.0 (npm v5.6.0) Creating default alias: default node (v9.5.0)
- Install Angular CLI
Cristina$ mkdir ~/npm-global Cristina$ npm config set prefix '~/npm-global' Cristina$ export PATH=~/npm-global/bin:$PATH Cristina$ sudo chown -R Cristina /Users/Cristina/npm-global/ Cristina$ npm install -g @angular/cli/ /Users/Cristina/npm-global/bin/ng > /Users/Cristina/npm-global/lib/node_modules/@angular/cli/bin/ng email@example.com install /Users/Cristina/npm-global/lib/node_modules/@angular/cli/node_modules/fsevents node install [fsevents] Success: "/Users/Cristina/npm-global/lib/node_modules/@angular/cli/node_modules/fsevents/lib/binding/Release/node-v59-darwin-x64/fse.node" is installed via remote firstname.lastname@example.org install /Users/Cristina/npm-global/lib/node_modules/@angular/cli/node_modules/node-sass node scripts/install.js Downloading binary from https://github.com/sass/node-sass/releases/download/v4.7.2/darwin-x64-59_binding.node Download complete ⸩ ⠋ : Binary saved to /Users/Cristina/npm-global/lib/node_modules/@angular/cli/node_modules/node-sass/vendor/darwin-x64-59/binding.node Caching binary to /Users/Cristina/.npm/node-sass/4.7.2/darwin-x64-59_binding.node email@example.com postinstall /Users/Cristina/npm-global/lib/node_modules/@angular/cli/node_modules/webpack/node_modules/uglifyjs-webpack-plugin node lib/post_install.js firstname.lastname@example.org postinstall /Users/Cristina/npm-global/lib/node_modules/@angular/cli/node_modules/node-sass node scripts/build.js Binary found at /Users/Cristina/npm-global/lib/node_modules/@angular/cli/node_modules/node-sass/vendor/darwin-x64-59/binding.node Testing binary Binary is fine npm WARN email@example.com requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself. + @firstname.lastname@example.org added 1016 packages in 47.789s
- Download git project
Cristina$ cd git/ git Cristina$ git clone https://github.com/Alfresco/alfresco-content-app.git Cloning into 'alfresco-content-app'... remote: Counting objects: 2907, done. remote: Compressing objects: 100% (35/35), done. remote: Total 2907 (delta 17), reused 19 (delta 11), pack-reused 2861 Receiving objects: 100% (2907/2907), 3.35 MiB | 1.98 MiB/s, done. Resolving deltas: 100% (2036/2036), done. Checking connectivity... done. Cristina$ cd alfresco-content-app/
- Compile the project
Cristina$ npm install email@example.com install /Users/Cristina/git/alfresco-content-app/node_modules/fsevents node install [fsevents] Success: "/Users/Cristina/git/alfresco-content-app/node_modules/fsevents/lib/binding/Release/node-v59-darwin-x64/fse.node" is installed via remote firstname.lastname@example.org install /Users/Cristina/git/alfresco-content-app/node_modules/uws node-gyp rebuild build_log.txt 2 1 || exit 0 email@example.com install /Users/Cristina/git/alfresco-content-app/node_modules/node-sass node scripts/install.js Cached binary found at /Users/Cristina/.npm/node-sass/4.7.2/darwin-x64-59_binding.node firstname.lastname@example.org postinstall /Users/Cristina/git/alfresco-content-app/node_modules/webpack/node_modules/uglifyjs-webpack-plugin node lib/post_install.js email@example.com postinstall /Users/Cristina/git/alfresco-content-app/node_modules/node-sass node scripts/build.js Binary found at /Users/Cristina/git/alfresco-content-app/node_modules/node-sass/vendor/darwin-x64-59/binding.node Testing binary Binary is fine added 1630 packages in 33.893s
- Run it!
Cristina$ npm start .... webpack: Compiled successfully.
Congrats! You have the application upper and running. New tab will be opened pointing to http://localhost:3000/
Introduce user and admin/admin and check the amazing result….
Oh no! It’s not working!
Don’t panic! Let’s check catalina.out:
.... [HPM] Error occurred while trying to proxy request /alfresco/api/-default-/public/authentication/versions/1/tickets from localhost:3000 to http://0.0.0.0:8080 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)
This error is caused by Alfresco, because we need to start and configure it in order to consume the API and functions for this app!
Start your Alfresco instance (remember to use 5.2.+!)
Cristina$ cd /Applications/alfresco Cristina$ ./alfresco.sh start && tail -n500 -f tomcat/logs/catalina.out ..... Server startup in 53107 ms
Advice: To verify your Alfresco is operative and running: Open a browser an check that you’re able to login in share as admin/admin.
Now, we need to configure and point from our ADF app to our local Alfresco instance, go into the app directory and execute the following:
- vim proxy.conf.js
- Press ESC , write “:x!” (without quotes) and press intro, the file will be saved.
- Launch the app:
Cristina$ npm start .... webpack: Compiled successfully.
- Login with admin/admin and check the result:
It is working! Congratulation you have you first ADF app upper running!
That’s all by the moment 😎 Next chapter we are going to review what are the possibilities for this new app and much more like how can we extend it!.