I cannot see drawable canvas on localhost

[ahmedshingaly]

Great app, I was trying to run the streamlit-drawable-canvas locally. However, the drawable canvas is not loading. I wonder if you could look at my issue.

my steps: -I cloned streamlit-drawable-canvas repository -run -opened "Local URL: http://localhost:8501" -uploaded an image

cannot draw anything

thank you in advance ahmed

[andfanilo]

Hi @ahmedshingaly !

To run the drawable canvas locally, you'll need to closely follow the Development setup of the README. Since the canvas is HTML/JS code in the streamlit_drawable_canvas/frontend folder, you need to run a node server from there, which your Streamlit app will request the drawable canvas frontend code from .

so the actual steps are, assuming you have nodejs installed already:

• I cloned streamlit-drawable-canvas repository
• go in streamlit_drawable_canvas/frontend
• run npm install the first time to install packages
• run npm run start to start the node server
  • should start on http:/localhost:3001. You can try to open the URL in the browser but you'll see a blank page because it's waiting for a Streamlit JS event to do something. But you shouldn't get a "URL not found"!
• in another terminal, run streamlit run app.py
• open "Local URL: http://localhost:8501"
  • now Streamlit will fetch drawable canvas from the nodeserver in the other terminal on http://localhost:3001.
• uploaded an image

Good luck! Fanilo

[ahmedshingaly]

Thank you very much for the quick reply. I did these steps successfully as mentioned in the GitHub repository readme file. however, the canvas is not showing the drawing plot. I will rerun everything and see where is it crashing.

thank you I will close the issue now