Superset Frontend hot reloading not working when running docker compose up --build

[LUUUAN]

Bug description

Frontend hot reloading stop working after I pull master latest commit (890186a), changes to frontend code will trigger rebuild but changes won't reflect on web page. Also, access to image assets will raise 404 error unless manually execute npm install && npm run dev, not sure if they are related.

Reset branch to commit fc8710f solve the issue.

Screenshots/recordings

No response

Superset version

master / latest-dev

Python version

3.9

Node version

16

Browser

Chrome

Additional context

No response

Checklist

• I have searched Superset docs and Slack and didn't find a solution to my problem.
• I have searched the GitHub issue tracker and didn't find a similar bug report.
• I have checked Superset's logs for errors and if I found a relevant Python stacktrace, I included it here as text in the "additional context" section.

[dosubot]

Hey @LUUUAN! I'm here to help you with any bugs, questions, or contributions you have. Let's tackle this together while we wait for a human maintainer.

I found some similar discussions and issues that might be relevant to your problem:

1. superset-frontend can not run - This discussion is still open and might provide some insights into frontend issues ^[1].

2. superset 2.1.0 frontend start to use the "npm run dev-server", will appear many warnings - Another open discussion that could be related to your issue with frontend warnings ^[2].

3. Error when booting the superset frontend - This issue was closed with a fix related to bootstrapping the frontend, which might be relevant to your situation ^[3].

Regarding the 404 errors for image assets, this can occur if the asset building process is not fully completed. It's recommended to monitor the container logs to confirm when the asset building process is actually finished. Once the complete build process is done, the static assets should be available, and the 404 errors should resolve themselves ^[4].

For the hot reloading issue, ensure that the devServer configuration in webpack.config.js is set correctly, with hot: true and other necessary settings for hot module replacement. Also, check the Docker environment variables to ensure they are configured for development mode, as these can impact hot reloading functionality ^[5][6].

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}

[jkryanchou]

+1

[mistercrunch]

Port is now 9000 as we now use the auto-reload webpack feature with npm run dev-server, can you confirm it works when you hit http://localhost:9000 ?

[mistercrunch]

Wondering how to make it more obvious to avoid confusion. Maybe a note in UPDATING.md, though something more automated could be good.

[rusackas]

I haven't looked, but I wonder if it'd be difficult to do a server/browser redirect from 8088 to 9000, or if that would just cause other issues/confusion.

[mistercrunch]

Reading through the config, I'm realizing that the intent in the setup is [probably] to use 80 since that's where nginx is configured. Apparently it manages reverse-proxying /ws to the websocket server. Personally been using 8088 and 9000 now, but seems there's an opportunity to clean all this up with a single entry port that would provide consistency across various setups.

I'm not sure how I feel about taking over 80 (like nginx does currently) for dev, clearly you don't want for different pieces of software fighting for 80

Now realizing that nginx.conf is only used for docker-compose.yml, so it's easy to proxy to 9000 and shouldn't break other things, but will require people to point to the nginx port not superset_app (flask). Anyhow lots of options/tradeoffs here.

Maybe the best idea is to always use 8088 across all docker-compose.*, would require:

• running the flask app on another port
• configuring nginx to run on 8088
• routing nginx to 9000 on main docker-compose.yml file
• breaking things for anyone running on 80 now
• can configure nginx so that both 8088 and 9000 to point to the same place