npm install -g yo npm install -g generator-alfresco-adf-app
You will probably need to launch the commands as an admin, using the sudo prefix.
After the generator is correctly installed, run the command below.
The generator will now ask a few questions, mainly the name of your app (in our case we will use myApp) and which blueprint you want to use.
You can select one of three blueprints. To describe them from the bottom up:
Process Services powered by Activiti
This will generate an application for Alfresco Process Services powered by Activiti. It contains the following components: Login, App List, Task List, Form and Start Process.
This will generate an application for Alfresco Content Services (or Alfresco Community Edition). It contains the following components: Login, Document List, Viewer.
Process and Content Services
This will generate an application for both Alfresco Process and Content Services and will be a combination of the two blueprints above.
Select the one you want to use, and the generator will now ask if you want to install dependencies right away. Enter "Y" and hit enter.
This can take a minute or two depending on your internet connection. You might see a few warnings at the end like this:
npm notice created a lockfile as package-lock.json. You should commit this file. npm WARN @firstname.lastname@example.org requires a peer of @email@example.com-NG but none is installed. You must install peer dependencies yourself. npm WARN @firstname.lastname@example.org requires a peer of @email@example.com-NG but none is installed. You must install peer dependencies yourself. npm WARN @firstname.lastname@example.org requires a peer of moment@^2.18.1 but none is installed. You must install peer dependencies yourself. npm WARN email@example.com requires a peer of @angular/compiler@^2.3.1 || >=4.0.0-beta <5.0.0 but none is installed. You must install peer dependencies yourself. npm WARN firstname.lastname@example.org requires a peer of @angular/core@^2.3.1 || >=4.0.0-beta <5.0.0 but none is installed. You must install peer dependencies yourself.
These warnings are normal. Unfortunately they happen within the Angular Flex Layout package that ADF depends on. You can safely ignore them.
Once done, you will find a folder namedmyApp where you can find all the ADF application already created and completed. What is missing now, is the configuration step described in the following paragraph.
To setup the correct back-end services, change into the directory of your app (myApp in our case) and inspect the proxy.conf.json file. This file will tell Angular Webpack to create a proxy for your backend (Content or Process services). Change the URLs and ports to reflect where they are currently running. Below an example of how theproxy.conf.jsonfile should look like.
Now that you ADF application is correctly configured, start it running the npm start command from a terminal, double checking you are located into the project folder (in our case myApp). The execution of the command takes a couple of seconds and a browser will automatically open at http://localhost:4200/.
As you can see from the user interface, the Alfresco ADF application is really straightforward and basic. This is a precise requirement for this example, because it focuses the attention on the comprehension of the basis, instead of containing complex features that will be part of an intermediate/expert learning path. Below a screenshot of how the home page looks like.
In the following paragraphs we are going to (briefly) describe each component to enable you to their understanding and usage.
The DocumentList component requires Alfresco Content Services up and running and configured as described above in the document. If you don’t have it, this component doesn’t seems useful and you can ignore it.
The DocumentList component develops a navigator for the Alfresco Content Repository. The DocumentList component lives in the source code hosted into the <myApp>/src/app/documentlist folder and can show the content only if the login on Alfresco Content Services has been executed with success. Below a screenshot showing how the DocumentList component look like.