From 4d9ff7ae501b7619fce47226397892e73f97e1db Mon Sep 17 00:00:00 2001
From: Latent <guillaume.thibault.98@proton.me>
Date: Tue, 10 Dec 2024 13:21:30 -0500
Subject: [PATCH 1/5] [Doc] Deploy `Vizro` apps

---
 doc/_toc.yml      |   1 +
 doc/apps/vizro.md | 101 ++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 102 insertions(+)
 create mode 100644 doc/apps/vizro.md

diff --git a/doc/_toc.yml b/doc/_toc.yml
index 1c49e687..a7e23b62 100644
--- a/doc/_toc.yml
+++ b/doc/_toc.yml
@@ -45,6 +45,7 @@ parts:
       - file: apps/docker
       - file: apps/chainlit
       - file: apps/hyperdiv
+      - file: apps/vizro
 
   - caption: APIs
     chapters:
diff --git a/doc/apps/vizro.md b/doc/apps/vizro.md
new file mode 100644
index 00000000..8e8d5871
--- /dev/null
+++ b/doc/apps/vizro.md
@@ -0,0 +1,101 @@
+---
+myst:
+  html_meta:
+    description: Deploy a Vizro app on Ploomber in seconds with this guide.
+    keywords: vizro, deployment, hosting
+    property=og:title: Vizro | Ploomber Docs
+    property=og:description: Deploy Vizro app on Ploomber in seconds with this guide.
+    property=og:image: https://docs.cloud.ploomber.io/en/latest/_static/opengraph-images-vizro.png
+    property=og:url: https://docs.cloud.ploomber.io/en/latest/apps/vizro.html
+---
+
+# Vizro
+
+To deploy a [Vizro](https://vizro.readthedocs.io/en/stable/) application you need a [Ploomber Cloud](https://platform.ploomber.io/register?utm_source=dash&utm_medium=documentation) account. 
+
+## Project Structure
+
+Your deployment package must include these three essential files:
+
+1. `app.py` - Main application file
+2. `requirements.txt` - Python dependencies
+3. `Dockerfile` - Container configuration
+
+You can get started quickly using our template repository.
+
+## Application Setup
+
+1. Main Application File (`app.py`)
+
+Your `app.py` should initialize the Vizro application as follows:
+
+```python
+import vizro as vm
+from vizro import Vizro
+
+# Initialize your dashboard
+dashboard = vm.Dashboard(pages=[page])
+
+# Create the application instance
+app = Vizro().build(dashboard)
+
+# Development server (optional)
+if __name__ == "__main__":
+    app.run()
+```
+
+2. Dependencies File (`requirements.txt`)
+
+List all Python packages required by your application.
+
+3. `Dockerfile`
+
+Create a `Dockerfile` with this configuration:
+
+```Dockerfile
+FROM python:3.11-slim
+
+WORKDIR /app
+
+# Install dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt gunicorn vizro
+
+# Copy application files
+COPY . .
+
+# Configure the container
+EXPOSE 80
+CMD ["gunicorn", "--bind", "0.0.0.0:80", "--workers", "4", "--threads", "2", "app:app"]
+```
+
+## Testing locally
+
+Before deployment, test your application locally using Docker:
+
+```sh
+# build the docker image
+docker build . -t vizro-app
+
+# run it
+docker run -p 5000:80 vizro-app
+Now, open http://0.0.0.0:5000/ to see your app.
+```
+
+Once running, access your application at http://localhost:5000
+
+## Deploy
+
+Deployment Process
+
+1. Zip all project files (`app.py`, `requirements.txt`, `Dockerfile`, and any additional resources)
+2. Log in to Ploomber Cloud
+3. Navigate to the deployment menu
+4. Select the Docker deployment option
+5. Upload your zip file
+
+![](../static/docker.png)
+
+```{tip}
+To ensure your app doesn't break on re-deployments, pin your [dependencies.](pin-dependencies)
+```

From 0940b57fc45d4bcde166223c2c1a7d4e2c676ee3 Mon Sep 17 00:00:00 2001
From: Latent <guillaume.thibault.98@proton.me>
Date: Tue, 10 Dec 2024 13:32:30 -0500
Subject: [PATCH 2/5] [Doc] Vizro Template

---
 doc/apps/vizro.md                               |   4 +++-
 doc/static/opengraph/opengraph-images-vizro.png | Bin 0 -> 3933 bytes
 2 files changed, 3 insertions(+), 1 deletion(-)
 create mode 100755 doc/static/opengraph/opengraph-images-vizro.png

diff --git a/doc/apps/vizro.md b/doc/apps/vizro.md
index 8e8d5871..2234e59a 100644
--- a/doc/apps/vizro.md
+++ b/doc/apps/vizro.md
@@ -21,7 +21,9 @@ Your deployment package must include these three essential files:
 2. `requirements.txt` - Python dependencies
 3. `Dockerfile` - Container configuration
 
-You can get started quickly using our template repository.
+```{note}
+You can get started quickly using our [template repository](https://github.com/ploomber/doc/tree/main/examples/docker/vizro)
+```
 
 ## Application Setup
 
diff --git a/doc/static/opengraph/opengraph-images-vizro.png b/doc/static/opengraph/opengraph-images-vizro.png
new file mode 100755
index 0000000000000000000000000000000000000000..fb7624b922391d9e4b294d9068f47f8ab958b7b2
GIT binary patch
literal 3933
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

literal 0
HcmV?d00001


From 168137fab5d50db137194aa00c107ef9b9371d58 Mon Sep 17 00:00:00 2001
From: Latent <guillaume.thibault.98@proton.me>
Date: Tue, 10 Dec 2024 13:32:36 -0500
Subject: [PATCH 3/5] [Example] Virzo Template

chore: split installation process
---
 examples/docker/vizro/Dockerfile       | 24 ++++++++++++++++++++++++
 examples/docker/vizro/app.py           | 23 +++++++++++++++++++++++
 examples/docker/vizro/readme.md        |  3 +++
 examples/docker/vizro/requirements.txt |  1 +
 4 files changed, 51 insertions(+)
 create mode 100644 examples/docker/vizro/Dockerfile
 create mode 100644 examples/docker/vizro/app.py
 create mode 100644 examples/docker/vizro/readme.md
 create mode 100644 examples/docker/vizro/requirements.txt

diff --git a/examples/docker/vizro/Dockerfile b/examples/docker/vizro/Dockerfile
new file mode 100644
index 00000000..7399398e
--- /dev/null
+++ b/examples/docker/vizro/Dockerfile
@@ -0,0 +1,24 @@
+FROM python:3.11-slim
+
+# Set environment variables
+ENV PYTHONUNBUFFERED=1 \
+    PYTHONDONTWRITEBYTECODE=1 \
+    PIP_NO_CACHE_DIR=off \
+    PIP_DISABLE_PIP_VERSION_CHECK=on
+
+# Set work directory
+WORKDIR /app
+
+# Install Python dependencies
+RUN pip install gunicorn
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy project files
+COPY . .
+
+# Expose the port
+EXPOSE 8000
+
+# Run the application using Gunicorn
+CMD ["gunicorn", "--bind", "0.0.0.0:80", "--workers", "4", "--threads", "2", "app:app"]
diff --git a/examples/docker/vizro/app.py b/examples/docker/vizro/app.py
new file mode 100644
index 00000000..fa588e64
--- /dev/null
+++ b/examples/docker/vizro/app.py
@@ -0,0 +1,23 @@
+import vizro.plotly.express as px
+from vizro import Vizro
+import vizro.models as vm
+
+df = px.data.iris()
+
+page = vm.Page(
+    title="My first dashboard",
+    components=[
+        vm.Graph(figure=px.scatter(df, x="sepal_length", y="petal_width", color="species")),
+        vm.Graph(figure=px.histogram(df, x="sepal_width", color="species")),
+    ],
+    controls=[
+        vm.Filter(column="species", selector=vm.Dropdown(value=["ALL"])),
+    ],
+)
+
+dashboard = vm.Dashboard(pages=[page])
+app = Vizro().build(dashboard)
+
+
+if __name__ == "__main__":
+    app.run()
diff --git a/examples/docker/vizro/readme.md b/examples/docker/vizro/readme.md
new file mode 100644
index 00000000..aa04f955
--- /dev/null
+++ b/examples/docker/vizro/readme.md
@@ -0,0 +1,3 @@
+# Docker Deployment with Virzo App
+
+Template Dockerfile and Vizro app to deploy on Ploomber Cloud.
diff --git a/examples/docker/vizro/requirements.txt b/examples/docker/vizro/requirements.txt
new file mode 100644
index 00000000..6f996cb0
--- /dev/null
+++ b/examples/docker/vizro/requirements.txt
@@ -0,0 +1 @@
+vizro==0.1.29

From c035bdce7064fcf2dc56e573dd3838dea00da290 Mon Sep 17 00:00:00 2001
From: Latent <guillaume.thibault.98@proton.me>
Date: Tue, 10 Dec 2024 15:21:32 -0500
Subject: [PATCH 4/5] [Example] Start the Flask server directly | otherwise,
 warning in the logs

---
 examples/docker/vizro/Dockerfile | 2 +-
 examples/docker/vizro/app.py     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/docker/vizro/Dockerfile b/examples/docker/vizro/Dockerfile
index 7399398e..6af91596 100644
--- a/examples/docker/vizro/Dockerfile
+++ b/examples/docker/vizro/Dockerfile
@@ -21,4 +21,4 @@ COPY . .
 EXPOSE 8000
 
 # Run the application using Gunicorn
-CMD ["gunicorn", "--bind", "0.0.0.0:80", "--workers", "4", "--threads", "2", "app:app"]
+ENTRYPOINT ["gunicorn", "app:server", "run", "--bind", "0.0.0.0:80"]
diff --git a/examples/docker/vizro/app.py b/examples/docker/vizro/app.py
index fa588e64..ba378f7f 100644
--- a/examples/docker/vizro/app.py
+++ b/examples/docker/vizro/app.py
@@ -17,7 +17,7 @@
 
 dashboard = vm.Dashboard(pages=[page])
 app = Vizro().build(dashboard)
-
+server = app.dash.server
 
 if __name__ == "__main__":
     app.run()

From b5f98a850ab61e00dea156cffb58ec0e85a925e7 Mon Sep 17 00:00:00 2001
From: Latent <guillaume.thibault.98@proton.me>
Date: Tue, 10 Dec 2024 15:21:41 -0500
Subject: [PATCH 5/5] [Doc] Start the Flask server directly | otherwise,
 warning in the logs

---
 doc/apps/vizro.md | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/doc/apps/vizro.md b/doc/apps/vizro.md
index 2234e59a..0d8b31be 100644
--- a/doc/apps/vizro.md
+++ b/doc/apps/vizro.md
@@ -41,6 +41,9 @@ dashboard = vm.Dashboard(pages=[page])
 # Create the application instance
 app = Vizro().build(dashboard)
 
+# Expose the Flask server to Gunicorn
+server = app.dash.server
+
 # Development server (optional)
 if __name__ == "__main__":
     app.run()
@@ -68,7 +71,7 @@ COPY . .
 
 # Configure the container
 EXPOSE 80
-CMD ["gunicorn", "--bind", "0.0.0.0:80", "--workers", "4", "--threads", "2", "app:app"]
+ENTRYPOINT ["gunicorn", "app:server", "run", "--bind", "0.0.0.0:80"] 
 ```
 
 ## Testing locally