How to modify the style of your own Docker web

[chairc]

You'll need a basic understanding of Docker, and you'll need a computer running a Linux environment!

Steps are as follows:

• Clone the code from the repository

git clone [email protected]:langgenius/dify.git

• Navigate to the dify/web frontend folder

cd dify/web

• Open the web folder using any IDE software or text editor, and you can freely modify the frontend file styles, replace images, etc.

• After editing, if you're a Chinese user, you'll need to change the source in the Dockerfile file; others can ignore this step.

# Commands needed to change the source
RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.aliyun.com/g' /etc/apk/repositories

RUN pnpm install --frozen-lockfile --registry https://mirrors.huaweicloud.com/repository/npm/

RUN pnpm add -g pm2 --registry https://mirrors.huaweicloud.com/repository/npm/ \
    && mkdir /.pm2 \
    && chown -R 1001:0 /.pm2 /app/web \
    && chmod -R g=u /.pm2 /app/web

• Enter the following command in the terminal

# The filename after -t can be anything
docker build . -t dify-web-20250409

• Wait for Docker to compile the files

[+] Building 255.0s (23/23) FINISHED                                                                                                                                                                  docker:desktop-linux
 => [internal] load build definition from Dockerfile                                                                                                                                                                  0.0s
 => => transferring dockerfile: 1.92kB                                                                                                                                                                                0.0s
 => [internal] load metadata for docker.io/library/node:20-alpine3.20                                                                                                                                                 0.0s
 => [internal] load .dockerignore                                                                                                                                                                                     0.0s
 => => transferring context: 181B                                                                                                                                                                                     0.0s
 => [internal] load build context                                                                                                                                                                                     0.2s
 => => transferring context: 2.77MB                                                                                                                                                                                   0.2s
 => CACHED [base 1/4] FROM docker.io/library/node:20-alpine3.20                                                                                                                                                       0.0s
 => [base 2/4] RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.aliyun.com/g' /etc/apk/repositories                                                                                                                       0.1s
 => [base 3/4] RUN apk add --no-cache tzdata                                                                                                                                                                          1.0s
 => [base 4/4] RUN npm install -g [email protected]                                                                                                                                                                         2.6s 
 => [production 1/7] RUN ln -s /usr/share/zoneinfo/UTC /etc/localtime     && echo UTC > /etc/timezone                                                                                                                 0.2s
 => [packages 1/4] WORKDIR /app/web                                                                                                                                                                                   0.1s
 => [packages 2/4] COPY package.json .                                                                                                                                                                                0.0s
 => [packages 3/4] COPY pnpm-lock.yaml .                                                                                                                                                                              0.0s
 => [packages 4/4] RUN pnpm install --frozen-lockfile --registry https://mirrors.huaweicloud.com/repository/npm/                                                                                                     53.5s
 => [production 2/7] WORKDIR /app/web                                                                                                                                                                                 0.1s
 => [builder 2/4] COPY --from=packages /app/web/ .                                                                                                                                                                    4.3s
 => [builder 3/4] COPY . .                                                                                                                                                                                            0.5s
 => [builder 4/4] RUN pnpm build                                                                                                                                                                                    156.0s
 => [production 3/7] COPY --from=builder /app/web/public ./public                                                                                                                                                     0.1s
 => [production 4/7] COPY --from=builder /app/web/.next/standalone ./                                                                                                                                                 0.3s
 => [production 5/7] COPY --from=builder /app/web/.next/static ./.next/static                                                                                                                                         0.1s
 => [production 6/7] COPY docker/entrypoint.sh ./entrypoint.sh                                                                                                                                                        0.0s
 => [production 7/7] RUN pnpm add -g pm2 --registry https://mirrors.huaweicloud.com/repository/npm/     && mkdir /.pm2     && chown -R 1001:0 /.pm2 /app/web     && chmod -R g=u /.pm2 /app/web                      29.8s
 => exporting to image                                                                                                                                                                                                1.1s
 => => exporting layers                                                                                                                                                                                               1.0s
 => => writing image sha256:8ad0c143bf6e6d7ba0a9afda5430842638b7612e867af79bbc12ca358ffa600b                                                                                                                          0.0s
 => => naming to docker.io/library/dify-web-20250409                                                                                                                                                                   0.0s

View build details: docker-desktop://dashboard/build/desktop-linux/desktop-linux/fvadzm91m0wsns9c00qkomeyw

• Now, our own web files have been compiled into an image. Do not run this image yet.

• Navigate to the dify/docker folder

cd dify/docker

• Copy the environment configuration file

cp .env.example .env

• Open the docker-compose.yaml file and find the following information (around line 500)

  # Frontend web application.
  web:
    image: langgenius/dify-web:version
    restart: always
    environment:
      CONSOLE_API_URL: ${CONSOLE_API_URL:-}
      APP_API_URL: ${APP_API_URL:-}
      SENTRY_DSN: ${WEB_SENTRY_DSN:-}
      NEXT_TELEMETRY_DISABLED: ${NEXT_TELEMETRY_DISABLED:-0}
      TEXT_GENERATION_TIMEOUT_MS: ${TEXT_GENERATION_TIMEOUT_MS:-60000}
      CSP_WHITELIST: ${CSP_WHITELIST:-}
      MARKETPLACE_API_URL: ${MARKETPLACE_API_URL:-https://marketplace.dify.ai}
      MARKETPLACE_URL: ${MARKETPLACE_URL:-https://marketplace.dify.ai}
      TOP_K_MAX_VALUE: ${TOP_K_MAX_VALUE:-}
      INDEXING_MAX_SEGMENTATION_TOKENS_LENGTH: ${INDEXING_MAX_SEGMENTATION_TOKENS_LENGTH:-}
      PM2_INSTANCES: ${PM2_INSTANCES:-2}
      LOOP_NODE_MAX_COUNT: ${LOOP_NODE_MAX_COUNT:-100}
      MAX_TOOLS_NUM: ${MAX_TOOLS_NUM:-10}
      MAX_PARALLEL_LIMIT: ${MAX_PARALLEL_LIMIT:-10}
      MAX_ITERATIONS_NUM: ${MAX_ITERATIONS_NUM:-5}

• Modify the image to our own dify-web-20250409

• Start the Docker containers

# If using Docker Compose V2
docker compose up -d
# If using Docker Compose V1
docker-compose up -d

• The following prompt will appear, indicating that our service has started successfully

[+] Running 10/10
 ✔ Container docker-ssrf_proxy-1     Running                                                                                                                                                                          0.0s 
 ✔ Container docker-sandbox-1        Running                                                                                                                                                                          0.0s 
 ✔ Container docker-db-1             Running                                                                                                                                                                          0.0s 
 ✔ Container docker-weaviate-1       Running                                                                                                                                                                          0.0s 
 ✔ Container docker-redis-1          Running                                                                                                                                                                          0.0s 
 ✔ Container docker-plugin_daemon-1  Running                                                                                                                                                                          0.0s 
 ✔ Container docker-worker-1         Running                                                                                                                                                                          0.0s 
 ✔ Container docker-api-1            Running                                                                                                                                                                          0.0s 
 ✔ Container docker-nginx-1          Started                                                                                                                                                                         20.9s 
 ✔ Container docker-web-1            Started 

• Access localhost or 127.0.0.1 to view the service.