Changes made to frontend not showing up when app run locally using Docker

[aymanzbaig]

Self Checks

• This is only for bug report, if you would like to ask a quesion, please head to Discussions.
• I have searched for existing issues search for existing issues, including closed ones.
• I confirm that I am using English to submit this report (我已阅读并同意 Language Policy).
• Pleas do not modify this template :) and fill in all the required fields.

Dify version

0.6.5

Cloud or Self Hosted

Self Hosted (Docker)

Steps to reproduce

Git clone cd docker docker compose up -d
changes to the frontend doesn’t reflect
so we tried running the frontend seperately
cd web && docker build . -t dify-web
docker run -it -p 3000:3000 -e CONSOLE_URL=http://127.0.0.1:5001/ -e APP_URL=http://127.0.0.1:5001/ dify-web
not foundt.sh: line 2:
: not foundt.sh: line 3:
: not foundt.sh: line 4:
: not foundt.sh: line 8:
: not foundt.sh: line 11:
: not foundt.sh: line 12:
./entrypoint.sh: set: line 13: illegal option

✔️ Expected Behavior

Changes in css , icons showing up when the app is run.

❌ Actual Behavior

Changes made to the front end not reflected when app is composed and run. Started the app using docker compose up -d. Any changes to source code not reflected . Ran the frontend container seperately. This error follows after following the dify doc instructions(https://docs.dify.ai/getting-started/install-self-hosted/start-the-frontend-docker-container) for running the frontend seperately.
: not foundt.sh: line 2:
: not foundt.sh: line 3:
: not foundt.sh: line 4:
: not foundt.sh: line 8:
: not foundt.sh: line 11:
: not foundt.sh: line 12:
./entrypoint.sh: set: line 13: illegal option -

[dosubot]

To address the issue of frontend changes not reflecting when running your app locally with Docker, follow these steps:

1. Script Format Compatibility: Convert entrypoint.sh to UNIX format to avoid line-ending issues that can cause script failures in Docker containers. Use dos2unix utility if necessary.

2. Environment Variables: Ensure CONSOLE_URL and APP_URL are correctly set in your Docker environment. These are crucial for running the Docker container as per Dify documentation.

3. File Permissions: Verify entrypoint.sh has execution permissions. Use chmod +x entrypoint.sh to ensure it's executable.

4. Dockerfile Configuration: Your Dockerfile should properly copy entrypoint.sh into the image and set it as the entrypoint. Example:

   COPY entrypoint.sh /usr/src/app/
   RUN chmod +x /usr/src/app/entrypoint.sh
   ENTRYPOINT ["/usr/src/app/entrypoint.sh"]

5. Running the Frontend Separately: Follow the Dify documentation for pulling the Docker image from DockerHub or building it from source. Example command to run the Docker image:

   docker run -it -p 3000:3000 -e CONSOLE_URL=http://127.0.0.1:5001 -e APP_URL=http://127.0.0.1:5001 langgenius/dify-web:latest

By following these steps, you should be able to resolve the encountered errors and ensure that frontend changes are correctly reflected. If issues persist, ensure all steps are correctly followed and consider enabling script debugging in entrypoint.sh with set -x for more detailed error output.

Details

Sources

• Changes in Frontend Code Not Reflecting in Local Deployment
• 使用docker compose启动容器后访问前端页面显示not found
• web/docker/entrypoint.sh
• en/getting-started/install-self-hosted/start-the-frontend-docker-container.md
• docker/docker-compose.yaml
• en/getting-started/install-self-hosted/environments.md

About Dosu
This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.

[TinsFox]

Hey @aymanzbaig,

Do you want to develop the front end locally? The following method may help you

If you need to start the front end separately, you can make some modifications to the docker-compose.yml file, uncomment these two lines.

dify/docker/docker-compose.yaml

Lines 165 to 166 in 2fdd64c

	# ports:
	# - "5001:5001"

If you do not want to expose this port, you need to configure the environment variables of the front-end development environment so that the front-end can access it through the port exposed by Nginx.

dify/docker/docker-compose.yaml

Lines 379 to 391 in 2fdd64c

	nginx:
	image: nginx:latest
	restart: always
	volumes:
	- ./nginx/nginx.conf:/etc/nginx/nginx.conf
	- ./nginx/proxy.conf:/etc/nginx/proxy.conf
	- ./nginx/conf.d:/etc/nginx/conf.d
	#- ./nginx/ssl:/etc/ssl
	depends_on:
	- api
	- web
	ports:
	- "80:80"

And then run docker-compose down && docker-compose up -d which will change the backend port Expose the host machine so that the host machine can be used as a query, and then cd web && yarn && yarn dev so that you can see the front-end in the development environment when you visit http://localhost:3000/

To save resources, you can delete this. This will not start the front-end production environment.

dify/docker/docker-compose.yaml

Lines 267 to 283 in 2fdd64c

	web:
	image: langgenius/dify-web:0.6.6
	restart: always
	environment:
	# The base URL of console application api server, refers to the Console base URL of WEB service if console domain is
	# different from api or web app domain.
	# example: http://cloud.dify.ai
	CONSOLE_API_URL: ''
	# The URL for Web APP api server, refers to the Web App base URL of WEB service if web app domain is different from
	# console or api domain.
	# example: http://udify.app
	APP_API_URL: ''
	# The DSN for Sentry error reporting. If not set, Sentry error reporting will be disabled.
	SENTRY_DSN: ''
	# uncomment to expose dify-web port to host
	# ports:
	# - "3000:3000"