Customize the ReactJS Frontend with Seafile Docker Compose

[hieupvXmasEve]

Log in to Docker with Seafile account

docker login docker.seadrive.org

• username: seafile
• password: zjkmid6rQibdZ=uJMuWS

Run Docker Compose

docker compose up -d

Check if all containers are running

docker compose ps -a

• If the display looks like the one above, there is a container error. Check the logs:

docker logs seafile-ldap

• You need to grant write permission to the directory:

sudo chmod -R 777 ./data-volumn-docker/
docker compose restart
docker compose ps -a

• Then, access http://localhost:8090
  • user: admin@example.com
  • pass: admin

Copy frontend files from the container to the host machine

    docker cp seafile:/opt/seafile/seafile-pro-server-11.0.14/seahub/frontend ./frontend

• It will show the following result, and you should see the frontend folder:

test@test:~/Documents/seafile/setup-seafile-pe-docker$ docker cp seafile:/opt/seafile/seafile-pro-server-11.0.14/seahub/frontend ./frontend
Successfully copied 5.95MB to /home/test/Documents/seafile/setup-seafile-pe-docker/frontend

Modify configuration file

• Edit the file ./data-volumn-docker/seafile-data/seafile/conf/seahub_settings.py
• Add the following code at the beginning:

import os
PROJECT_ROOT = '/opt/seafile/seafile-pro-server-11.0.14/seahub'
WEBPACK_LOADER = {
    'DEFAULT': {
        'BUNDLE_DIR_NAME': 'frontend/',
        'STATS_FILE': os.path.join(PROJECT_ROOT,
                                   'frontend/webpack-stats.dev.json'),
    }
}
DEBUG = True
# -*- coding: utf-8 -*-

• Restart the container:

docker compose restart

• When you access localhost:8090, the following error will appear:
  

  

• Go to the frontend directory (note: use Node v16):

npm i
npm run dev

• Wait until the following is displayed:

Listening at http://0.0.0.0:3000/assets/bundles/
webpack compiled successfully

Next, uncomment line 72 in the docker-compose file ./frontend:/opt/seafile/seafile-pro-server-11.0.14/seahub/frontend

• Then, reset the container

docker compose down
docker compose up -d

• Access again, you will see the following result:

• Try changing the UI in the file ./frontend/src/components/side-panel.js and see the result:
  

  

• You will see the terminal in the frontend automatically compiled after each change.

Wish you a successful installation!