From fbedf1b200ce6b3c2d7d48b3aed93ddcae384401 Mon Sep 17 00:00:00 2001 From: russell-white <128521274+russell-white@users.noreply.github.com> Date: Sun, 25 Aug 2024 21:38:14 +0330 Subject: [PATCH 1/3] Create docker.md --- .../web/dynamic-website/hosting/docker.md | 90 +++++++++++++++++++ 1 file changed, 90 insertions(+) create mode 100644 docs/publish/web/dynamic-website/hosting/docker.md diff --git a/docs/publish/web/dynamic-website/hosting/docker.md b/docs/publish/web/dynamic-website/hosting/docker.md new file mode 100644 index 00000000..e838ef9a --- /dev/null +++ b/docs/publish/web/dynamic-website/hosting/docker.md @@ -0,0 +1,90 @@ +--- +title: Docker +sidebar_label: Docker +--- + +You can watch the tutorial video on Docker by following the link below or directly viewing it embedded: + + + +## Dockerizing Your Flet App + +Dockerizing your Flet app is an effective way to deploy it. To get started with Dockerizing Flet, you need to have [Docker](https://www.docker.com/) installed on your system. + +:::note +When linking to the "assets" directory, use `/` instead of `/assets`. +::: + +### Sample Flet Docker Example + +Here’s a simple example of a Flet app configured to run in Docker: + +```python title="main.py" +import flet as ft + +def main(page: ft.Page): + page.title = "Flet Docker example" + page.vertical_alignment = ft.MainAxisAlignment.CENTER + page.horizontal_alignment = ft.CrossAxisAlignment.CENTER + + text = ft.TextField(value="Flet dockerized", text_align=ft.TextAlign.CENTER, text_size=60) + + page.add( + text + ) + +ft.app( + target=main, + view=None, + port=8000, + host="0.0.0.0" +) +``` + +### Building and Running Your Docker Container + +**Log in to Docker CLI:** + +After installing Docker, create a Docker account and log in using Docker CLI: + +```bash +docker login -u +``` + +Enter your password when prompted + +```bash + +``` + +**Run and Test Your Docker Container:** + +Create a container from your image and test it: + +```bash +docker build -t . +``` + +**Run and Test Your Docker Container:** + +Create a container from your image and test it: + +```bash +docker run -p 80:8000 +``` + +You should see your website running at [http://127.0.0.1](http://127.0.0.1). + +### Pushing Your Docker Image to Docker Hub: + +If you want to deploy your image to a cloud service, you may need to push it to Docker Hub. First, tag your image: + +```bash +docker tag : /: +``` + +Then, push it to Docker Hub: + +```bash +docker push /: +``` From 87bf107b63e81034e7d9f63b049283773327a7e2 Mon Sep 17 00:00:00 2001 From: russell-white <128521274+russell-white@users.noreply.github.com> Date: Sun, 25 Aug 2024 21:38:37 +0330 Subject: [PATCH 2/3] Update sidebars.js --- sidebars.js | 1 + 1 file changed, 1 insertion(+) diff --git a/sidebars.js b/sidebars.js index 71643e54..0ddb7bab 100644 --- a/sidebars.js +++ b/sidebars.js @@ -81,6 +81,7 @@ module.exports = { "publish/web/dynamic-website/hosting/fly-io", "publish/web/dynamic-website/hosting/replit", "publish/web/dynamic-website/hosting/self-hosting", + "publish/web/dynamic-website/hosting/docker", ], } ], From 8d91e23e4d2235a385a7387a1d68a2f29e1b4551 Mon Sep 17 00:00:00 2001 From: russell-white <128521274+russell-white@users.noreply.github.com> Date: Thu, 29 Aug 2024 17:06:23 +0330 Subject: [PATCH 3/3] Update docker.md updated the missing requirements. --- .../web/dynamic-website/hosting/docker.md | 44 +++++++++++++++++-- 1 file changed, 40 insertions(+), 4 deletions(-) diff --git a/docs/publish/web/dynamic-website/hosting/docker.md b/docs/publish/web/dynamic-website/hosting/docker.md index e838ef9a..798ffc8b 100644 --- a/docs/publish/web/dynamic-website/hosting/docker.md +++ b/docs/publish/web/dynamic-website/hosting/docker.md @@ -3,7 +3,7 @@ title: Docker sidebar_label: Docker --- -You can watch the tutorial video on Docker by following the link below or directly viewing it embedded: +You can watch the tutorial video on Docker by following the link below: @@ -17,8 +17,20 @@ When linking to the "assets" directory, use `/` instead of `/assets`. ### Sample Flet Docker Example +This is the minimal docker structure that you need: + +``` +├── Dockerfile +├── main.py +├── requirements.txt +``` + +Optionally it's recommended that you add a ```.dockerignore``` file as well. This file is responsible for ignoring any unwanted files or directories when you're building your docker image. It's similar to ```.gitignore```. + Here’s a simple example of a Flet app configured to run in Docker: +First you need a main file to run your entire code as server. + ```python title="main.py" import flet as ft @@ -41,6 +53,30 @@ ft.app( ) ``` +Second you need a Dockerfile file to build your entire docker image from your main python file. + +```Docker title="Dockerfile" +FROM python:3-alpine + +WORKDIR /app + +COPY requirements.txt ./ +RUN pip install --no-cache-dir -r requirements.txt + +COPY . . + +EXPOSE 8000 + +CMD ["python", "main.py"] +``` + +Third you need a requirements.txt to include all the libraries that you're using in your python file. + + +```requirements title="requirements.txt" +flet +``` + ### Building and Running Your Docker Container **Log in to Docker CLI:** @@ -57,9 +93,9 @@ Enter your password when prompted ``` -**Run and Test Your Docker Container:** +**Build your docker image from your flet project:** -Create a container from your image and test it: +Create an image from your flet project. ```bash docker build -t . @@ -67,7 +103,7 @@ docker build -t . **Run and Test Your Docker Container:** -Create a container from your image and test it: +Create a container from your image and test it. ```bash docker run -p 80:8000