Documentation

The complete knowledge base about ARender - How to install it and how to configure it as needed

Installation in ACA

Quick start with Docker

If needed, learn how to run ARender in docker here.

  1. Change ARender UI context path to /arender.

    Note
    With ARender UI container, change the context with CONTEXT_PATH=/arender in the container environment variable.

  2. Pull the ACA image from our artifactory with:

    $> docker pull artifactory.arondor.cloud:5001/adf-content-app-arender:<arender-version>-aca<aca-version>
    
  3. Then run the container with the following configuration:

    docker-compose.yml
      version: "3"
    
      services:
        aca:
          image: alfresco-content-app:AR-11007
          environment:
          # ACA host
          - ADF_PUBLIC_HOST=http://localhost
          # ARender host with /arender as context path
          - ARENDER_HOST=http://localhost:8080
          # alfresco content repository host
          - ALFRESCO_HOST=http://localhost:8080
          # alfresco host for oauth
          - ALFRESCO_OAUTH_HOST=http://localhost:8080
          # list of extensions that opens with arender as preview (separator ',')
          - ARENDER_EXTENSIONS=pdf,docx,docm,dotx,dotm,doc,dot,rtf,odt,ott,xlsx,xlsm,xls,xlt,xml,csv,ods,ots,pptx,pptm,ppt,pps,odp,otp,vsdx,msg,eml,html,htm,txt,dwg,dxf,tif,tiff,dcm,mda,ica,mmr,mca,jpg,jpeg,jpe,jfif,jp2,jpf,jpx,j2k,j2c,jpc,png,gif,webp,bmp,mp4,zip
          ports:
          - 80:8080
    
    

Add ARender to your Alfresco Content App

Requirements

  • Alfresco 5.2.4, 6.x
  • Tomcat 7.0
  • NodeJS v10.16.0,
  • npm 6.14.2

Install

As the module is preview and not publicly available you need to add it manually.

  1. Clone the ACA repository.

    $> git clone https://github.com/Alfresco/alfresco-content-app.git
    $> git checkout v1.10.1
    
  2. Download ARender ACA extension sources here and unzip the archive content.

  3. Create a library project.

    $> ng g library arondor-arender-viewer
    
  4. Replace the content of the created folder by ARender ACA extension sources.

  5. Add ARender lib to the compiler config.

    tsconfig.json
    {
      "compilerOptions": {
        // [...]
        "paths": {
        // [...]
          "@arondor/arender-viewer": ["dist/@arondor/arender-viewer"],
          "@arondor/arender-viewer/*": ["dist/@arondor/arender-viewer/*"]
        }
      }
    }
    

  6. Add ARender assets to the app and replace project infos.

    angular.json
    {
      "projects": {
        "app": {
          "architect": {
            //[...]
            "build": {
              //[...]
              "options": {
                //[...]
                "assets": [
                  //[...]
                  {
                    "glob": "arender.plugin.json",
                    "input": "node_modules/@arondor/arender-viewer/assets",
                    "output": "./assets/plugins"
                  },
                  {
                    "glob": "arender.plugin.json",
                    "input": "projects/arondor-arender-viewer/assets",
                    "output": "./assets/plugins"
                  },
                  {
                    "glob": "**/*",
                    "input": "node_modules/@arondor/arender-viewer/assets",
                    "output": "./assets/arender-viewer"
                  },
                  {
                    "glob": "**/*",
                    "input": "projects/arondor-arender-viewer/assets",
                    "output": "./assets/arender-viewer"
                  }
                ]
              }
            }
          }
        },
        //[...]
        "arondor-arender-viewer": {
          "root": "projects/arondor-arender-viewer",
          "sourceRoot": "projects/arondor-arender-viewer/src",
          "projectType": "library",
          "prefix": "arender",
          "architect": {
            "build": {
              "builder": "@angular-devkit/build-ng-packagr:build",
              "options": {
                "tsConfig": "projects/arondor-arender-viewer/tsconfig.lib.json",
                "project": "projects/arondor-arender-viewer/ng-package.json"
              }
            },
            "test": {
              "builder": "@angular-devkit/build-angular:karma",
              "options": {
                "main": "projects/arondor-arender-viewer/src/test.ts",
                "tsConfig": "projects/arondor-arender-viewer/tsconfig.spec.json",
                "karmaConfig": "projects/arondor-arender-viewer/karma.conf.js"
              }
            },
            "lint": {
              "builder": "@angular-devkit/build-angular:tslint",
              "options": {
                "tsConfig": [
                  "projects/arondor-arender-viewer/tsconfig.lib.json",
                  "projects/arondor-arender-viewer/tsconfig.spec.json"
                ],
                "exclude": [
                  "**/node_modules/**"
                ]
              }
            }
          }
        }
      }
    }
    

  7. Add ARender extension description.

    src/assets/app.extension.json
    {
      "$references": [
        "arender.plugin.json",
        ...
      ],
    }
    

  8. Import ARender extension.

    src/app/extension.module.ts
    import { ArenderExtensionModule } from '@arondor/arender-viewer';
    
    @NgModule({
      imports: [ArenderExtensionModule, ... ]
    })
    

  9. Add ARender ACA extension to the package build scripts.

    package.json
    {
      "scripts": {
        //[...]
        "build:arender-extension": "npx rimraf dist/@arondor/arender-viewer && ng build arondor-arender-viewer && cpr projects/arondor-arender-viewer/ngi.json dist/@arondor/arender-viewer/ngi.json && cpr projects/arondor-arender-viewer/assets dist/@arondor/arender-viewer/assets",
        "build.arender": "npm run build:arender-extension",
        "build.extensions": "npm run build.shared && npm run build.aos && npm run build.arender",
        //[...]
      }
    }
    

Configuration

ARender server config

src/app.config.json
{
  "arender": {
    "host": "{protocol}//{hostname}:{port}/arender/",
    "onPromise": true,
    "documentbuilder": true
  },
  //[...]
}

Description:

  • arender.host: arender host with "/arender” as context path. Use the default configuration to avoid Cross Origin issues.
  • arender.onPromise: enable multiple documents and/or folders opening.
  • arender.documentbuilder: enable document composition feature by default.

File extension openned

Modify features.viewer.content.fileExtension list.

asset/arender-viewer/arender.plugin.json
{
  //[...]
  "features": {
    "viewer": {
      "content": [{
        "id": "app.arender.viewer",
        "fileExtension": [
          "docx", "docm", "dotx", "dotm", "doc", "dot",
          "rtf", "odt", "ott",
          "xlsx", "xlsm", "xls", "xlt", "xml", "csv",
          "ods", "ots",
          "pptx", "pptm", "ppt", "pps",
          "odp", "otp", "vsdx",
          "msg", "eml",
          "html", "htm",
          "txt",
          "dwg", "dxf", "tif", "tiff", "dcm",
          "mda", "ica", "mmr", "mca",
          "jpg", "jpeg", "jpe", "jfif", "jp2", "jpf", "jpx", "j2k", "j2c", "jpc",
          "png", "gif", "webp", "bmp"
          // <- Add your extensions here or/and remove element from the list above ^
        ],
      }]
    },
    // [...]
  }
}

Build and run

  1. Install the angular-devkit.

    $> npm install --save-dev @angular-devkit/build-angular
    
  2. Execute the bash script to build the app.

    $> ./build-tomcat-e2e.sh
    
  3. Copy the generated folder (alfresco-content-app-1.10.1\dist\app for ACA v1.10.1) to your tomcat “/webapps” folder and rename it if needed.

  4. Start Tomcat.