Customization of ACA/ADF

[marcogianini]

I appreciate the contribution of alfresco-docker-installer that helps me a lot in implementations.

Now I have a request that I'm having some difficulties with. I need to customize the ACA workspace. For example, changing logo, backgroud, texts, colors, etc.

But when following the recommendations of the Alfresco documentation it is incomplete due to the customizations that must be done. So I would like to change this image that you provide from Workspace. How can I do this and upload it in place of your image?

Thanks

[marcogianini]

Please, help me about this topic.

I need to change color, for example, inside of ACA Container. How do i do?

Thanks

Marco Gianini

[aborroy]

I was looking at this topic, but I don't have a clean way of doing it.

One alternative would be to create your own Docker Image from source code (including your customizations): https://github.com/Alfresco/alfresco-content-app/blob/develop/Dockerfile

Is that a valid alternative?

Alternatively, mounting an external volume could help to include your assets.

[marcogianini]

Hello Angel.

I still have a problem with customizing the ACA image that you provide.

I apologize for not being fully aware.

I mounted the content of the container as an external volume, but there is a text that is positioned after login in the upper left corner that says "Alfresco Content Application" and I do not find it internally in the container files.

Could you tell me where this "text" can be because it is the only missing point in my project.

If I find something similar, when I restart the container it doesn't display the changed content.

I perform the following steps: 1 - change the contents of the file and save 2 - docker-compose stop 3 - docker-compose start

If everything is ok, I create an image based on this container with another name to be loaded by my docker-compose.

Would you help me?

[aborroy]

I've tested the following process, let me know if that works for you.

NodeJS 12 is required.

1 - Apply your changes to "Alfresco Content Application"

$ git clone https://github.com/Alfresco/alfresco-content-app.git
$ cd alfresco-content-app

Include your changes in the application.

Install the application.

$ npm install

Once that has been built, create dist folder with:

$ npm ci && npm run build.release

Now you will have your modified application in dist/content-ce folder.

2 - Deploy your changes in Docker Compose template

Modify content-app service in docker-compose.yml to add your modified application as external volume.

    content-app:
        image: alfresco/alfresco-content-app:${ACA_TAG}
        mem_limit: 256m
        depends_on:
            - alfresco
            - share
        volumes:
          - alfresco-content-app/dist/content-ce:/usr/share/nginx/html

[marcogianini]

Thanks

[wolmos-mrbau]

...

$ npm ci && npm run build.release

Now you will have your modified application in dist/content-ce folder.

2 - Deploy your changes in Docker Compose template

Modify content-app service in docker-compose.yml to add your modified application as external volume.

    content-app:
        image: alfresco/alfresco-content-app:${ACA_TAG}
        mem_limit: 256m
        depends_on:
            - alfresco
            - share
        volumes:
          - alfresco-content-app/dist/content-ce:/usr/share/nginx/html

I created a modified ACA application which is running fine when started via npm start. However, when I deploy the application by following the steps above, some changes are not visible in the deployed application e.g. the logo and the name of the application. Other changes are visible e.g. different logo on the login screen. The app.config.json file in the content-ce folder contains the changed settings but they did not get displayed. Any help would be very much appreciated!

[aborroy]

You may try using "Private" mode in your browser or to clean the browser cache.

[wolmos-mrbau]

You may try using "Private" mode in your browser or to clean the browser cache.

This was also my first thought but it did not help. Also in a new browser window in private mode the changed settings did not get displayed.

[wolmos-mrbau]

I also tried to modify the json files from the original ACA application and got the same result.

1) Create empty volume directory /opt/alfresco/acs/volumes/content-ce 2) Mount the original ACA as an external volume in the directory. Modify docker-compose.yml with

...
content-app:
        image: alfresco/alfresco-content-app:${ACA_TAG}
        mem_limit: 256m
        depends_on:
            - alfresco
            - share
        volumes:
            - content-ce:/usr/share/nginx/html
...
volumes:
    content-ce:
        driver: local
        driver_opts:
           o: bind
           type: none
           device: /opt/alfresco/acs/volumes/content-ce

3) Start Up and then stop the docker images using docker-compose or the start.sh script to populate the volume directory

./start.sh
./start.sh -d

4) Modify the json files app.config.json and assets/app.extensions.json in the content-ce directory I changed the name of the application and added a navbar entry. 5) Start the application and open the app in a private browser window

./start.sh

Result: Changes did not take effect.

[wolmos-mrbau]

To answer my own question: The docker image has its own copies of app.config.json and app.extensions.json in the /etc/nginx/conf.d folder and therefore ignores these files in the content-ce folder. See ngnix default.conf file:

server {
    listen       8080;
    server_name  localhost;
    root /usr/share/nginx/html;

    rewrite           ^([^.]*[^/])$ $1/ permanent;
    absolute_redirect off;

    location / {
        set $EVAL_BASE_PATH "/";
        if ($EVAL_BASE_PATH = "/") {
            root   /usr/share/nginx/html;
        }
        index  index.html index.htm;
        alias  /usr/share/nginx/html;
    }

    location ~ /app.config.json {
        alias  /etc/nginx/conf.d/app.config.json;
    }

    location ~ /assets/app.extensions.json {
        alias  /etc/nginx/conf.d/app.extensions.json;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}