How to display Plotly Dash on Python to a website?

Question:

I have created many interactive graphs on Plotly Dash (using Python) that are working perfectly on the local port. But I would like to integrate this into other products on a website.

Is this possible? What would be the best way to display exactly what I’m seeing on my local port?

I have read that we may use <iframe> for this, but I don’t have expertise to say if this is the best solution

Asked By: VINICIUS S

||
Source

Answers:

This is a somewhat open-ended question, but I would recommend following @Federico Tartarini’s excellent YouTube guide here that will allow you to deploy your plotly-dash app to Google Cloud. His video will provide more exact instructions than I’ll be able to type in this answer, but I’ll summarize the main points:

You’ll put your app.py file inside of a dash project with this structure:

Dash project/
├─ venv/
│  ├─ Dockerfile/
│  ├─ app.py/
│  ├─ requirements.txt/
├─ assets/
├─ data/

Then you’ll run commands to deploy your project (including the dash app) to Google Cloud – and Google Cloud will follow instructions inside the Dockerfile and requirements.txt to create a virtual environment that can run your app.py file. Once the app is deployed to the cloud, you’ll be able to access the app and embed it on your webpage.

This is how I deployed my trigonometric interpolation plotly-dash app to Google Cloud and embedded it on the projects section of my personal webpage.

Answered By: Derek O

A good source for almost any Dash topic is the Youtube channel of Charming Data. On how to upload an app to the web they have

Tutorial 1: Upload to render.com
Tutorial 2: Upload to heroku.com (no longer free)

Answered By: Adrian Fischer