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..0d8b31be --- /dev/null +++ b/doc/apps/vizro.md @@ -0,0 +1,106 @@ +--- +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 + +```{note} +You can get started quickly using our [template repository](https://github.com/ploomber/doc/tree/main/examples/docker/vizro) +``` + +## 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) + +# Expose the Flask server to Gunicorn +server = app.dash.server + +# 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 +ENTRYPOINT ["gunicorn", "app:server", "run", "--bind", "0.0.0.0:80"] +``` + +## 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) +``` diff --git a/doc/static/opengraph/opengraph-images-vizro.png b/doc/static/opengraph/opengraph-images-vizro.png new file mode 100755 index 00000000..fb7624b9 Binary files /dev/null and b/doc/static/opengraph/opengraph-images-vizro.png differ diff --git a/examples/docker/vizro/Dockerfile b/examples/docker/vizro/Dockerfile new file mode 100644 index 00000000..6af91596 --- /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 +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 new file mode 100644 index 00000000..ba378f7f --- /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) +server = app.dash.server + +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