From fdd3880162e5dd46ba0a1546b3da1ef3ccfaf125 Mon Sep 17 00:00:00 2001 From: Jonathan Adly Date: Thu, 16 Nov 2023 13:08:18 -0500 Subject: [PATCH 1/6] Add dockerfiler & docker compose --- .gitignore | 2 ++ README.md | 16 ++++++++++++++++ backend/Dockerfile | 35 +++++++++++++++++++++++++++++++++++ docker-compose.yml | 27 +++++++++++++++++++++++++++ frontend/.env.example | 2 ++ frontend/Dockerfile | 19 +++++++++++++++++++ 6 files changed, 101 insertions(+) create mode 100644 backend/Dockerfile create mode 100644 docker-compose.yml create mode 100644 frontend/.env.example create mode 100644 frontend/Dockerfile diff --git a/.gitignore b/.gitignore index 12e1ca9..39aee32 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,5 @@ # Run logs backend/run_logs/* + +.env \ No newline at end of file diff --git a/README.md b/README.md index 538cef6..98ef12f 100644 --- a/README.md +++ b/README.md @@ -38,6 +38,22 @@ Open http://localhost:5173 to use the app. If you prefer to run the backend on a different port, update VITE_WS_BACKEND_URL in `frontend/.env.local` +## Docker + +```bash +echo "OPENAI_API_KEY=sk-your-key" > .env +docker-compose up -d --build +``` + +If you want to change the backend port to something other than 7000 (default) - for example, 7001. Then: + +1. `echo "BACKEND_PORT=7001"` +2. `echo VITE_WS_BACKEND_URL=ws://127.0.0.1:7001 > frontend/.env.local` + +Port 7000 sometimes is used by Airplay if you are on a mac. This will solve the docker error "Ports are not available... address already in use" + +Application will be up and running at http://localhost:5173 + ## Feedback If you have feature requests, bug reports or other feedback, open an issue or ping me on [Twitter](https://twitter.com/_abi_). diff --git a/backend/Dockerfile b/backend/Dockerfile new file mode 100644 index 0000000..f3c61cd --- /dev/null +++ b/backend/Dockerfile @@ -0,0 +1,35 @@ +FROM python:3.12-slim-bullseye + +#ARG YOUR_ENV # Set your environment variable (prod vs. dev) + +# Set environment variables +ENV PYTHONFAULTHANDLER 1 +ENV PYTHONDONTWRITEBYTECODE 1 +ENV PYTHONUNBUFFERED 1 +ENV PYTHONHASHSEED random +ENV PIP_NO_CACHE_DIR off +ENV PIP_DISABLE_PIP_VERSION_CHECK on +ENV PIP_DEFAULT_TIMEOUT 100 +ENV POETRY_VERSION 1.4.1 +#ENV ENVIRONMENT $YOUR_ENV + +# Install system dependencies +RUN pip install "poetry==$POETRY_VERSION" + +# Set work directory +WORKDIR /app + +# Copy only requirements to cache them in docker layer +COPY poetry.lock pyproject.toml /app/ + +# Disable the creation of virtual environments +RUN poetry config virtualenvs.create false + +# Install dependencies +RUN poetry install + +# if you have dev dependencies and runnning in production +#poetry install $(test "$YOUR_ENV" == production && echo "--no-dev") --no-interaction --no-ansi + +# Copy the current directory contents into the container at /app +COPY ./ /app/ \ No newline at end of file diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 0000000..9a76467 --- /dev/null +++ b/docker-compose.yml @@ -0,0 +1,27 @@ +version: '3.9' + +services: + backend: + build: + context: ./backend + dockerfile: Dockerfile + + env_file: + - .env + + # or + # environment: + #- BACKEND_PORT=7000 # if you change the port, make sure to also change the VITE_WS_BACKEND_URL at frontend/.env.local + # - OPENAI_API_KEY=your_openai_api_key + + ports: + - "${BACKEND_PORT:-7000}:${BACKEND_PORT:-7000}" + + command: poetry run uvicorn main:app --host 0.0.0.0 --port ${BACKEND_PORT:-7000} + + frontend: + build: + context: ./frontend + dockerfile: Dockerfile + ports: + - "5173:5173" diff --git a/frontend/.env.example b/frontend/.env.example new file mode 100644 index 0000000..43a8814 --- /dev/null +++ b/frontend/.env.example @@ -0,0 +1,2 @@ +# example for change the backend port to 7001 to deal with issue: https://developer.apple.com/forums/thread/682332 +VITE_WS_BACKEND_URL=ws://127.0.0.1:7001 diff --git a/frontend/Dockerfile b/frontend/Dockerfile new file mode 100644 index 0000000..938e2bf --- /dev/null +++ b/frontend/Dockerfile @@ -0,0 +1,19 @@ +FROM node:20.9-bullseye-slim + +# Set the working directory in the container +WORKDIR /app + +# Copy package.json and yarn.lock +COPY package.json yarn.lock /app/ + +# Install dependencies +RUN yarn install + +# Copy the current directory contents into the container at /app +COPY ./ /app/ + +# Expose port 5173 to access the server +EXPOSE 5173 + +# Command to run the application +CMD ["yarn", "dev", "--host", "0.0.0.0"] \ No newline at end of file From 4ae04553df41212a2eb0ebe2b99a6095e754601c Mon Sep 17 00:00:00 2001 From: Abi Raja Date: Sun, 19 Nov 2023 21:39:10 -0500 Subject: [PATCH 2/6] simplify dockerfile and update docker-compose to use 7001 --- backend/Dockerfile | 16 +--------------- docker-compose.yml | 4 ++-- 2 files changed, 3 insertions(+), 17 deletions(-) diff --git a/backend/Dockerfile b/backend/Dockerfile index f3c61cd..c520517 100644 --- a/backend/Dockerfile +++ b/backend/Dockerfile @@ -1,17 +1,6 @@ FROM python:3.12-slim-bullseye -#ARG YOUR_ENV # Set your environment variable (prod vs. dev) - -# Set environment variables -ENV PYTHONFAULTHANDLER 1 -ENV PYTHONDONTWRITEBYTECODE 1 -ENV PYTHONUNBUFFERED 1 -ENV PYTHONHASHSEED random -ENV PIP_NO_CACHE_DIR off -ENV PIP_DISABLE_PIP_VERSION_CHECK on -ENV PIP_DEFAULT_TIMEOUT 100 ENV POETRY_VERSION 1.4.1 -#ENV ENVIRONMENT $YOUR_ENV # Install system dependencies RUN pip install "poetry==$POETRY_VERSION" @@ -28,8 +17,5 @@ RUN poetry config virtualenvs.create false # Install dependencies RUN poetry install -# if you have dev dependencies and runnning in production -#poetry install $(test "$YOUR_ENV" == production && echo "--no-dev") --no-interaction --no-ansi - # Copy the current directory contents into the container at /app -COPY ./ /app/ \ No newline at end of file +COPY ./ /app/ diff --git a/docker-compose.yml b/docker-compose.yml index 9a76467..87f0a66 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -15,9 +15,9 @@ services: # - OPENAI_API_KEY=your_openai_api_key ports: - - "${BACKEND_PORT:-7000}:${BACKEND_PORT:-7000}" + - "${BACKEND_PORT:-7001}:${BACKEND_PORT:-7001}" - command: poetry run uvicorn main:app --host 0.0.0.0 --port ${BACKEND_PORT:-7000} + command: poetry run uvicorn main:app --host 0.0.0.0 --port ${BACKEND_PORT:-7001} frontend: build: From 63add375053268bd821f89a975b4f38340d817b8 Mon Sep 17 00:00:00 2001 From: Abi Raja Date: Sun, 19 Nov 2023 21:41:38 -0500 Subject: [PATCH 3/6] update more values to 7001 --- docker-compose.yml | 2 +- frontend/.env.example | 1 - frontend/src/generateCode.ts | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/docker-compose.yml b/docker-compose.yml index 87f0a66..3b3bcec 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -11,7 +11,7 @@ services: # or # environment: - #- BACKEND_PORT=7000 # if you change the port, make sure to also change the VITE_WS_BACKEND_URL at frontend/.env.local + #- BACKEND_PORT=7001 # if you change the port, make sure to also change the VITE_WS_BACKEND_URL at frontend/.env.local # - OPENAI_API_KEY=your_openai_api_key ports: diff --git a/frontend/.env.example b/frontend/.env.example index 43a8814..c29bfd3 100644 --- a/frontend/.env.example +++ b/frontend/.env.example @@ -1,2 +1 @@ -# example for change the backend port to 7001 to deal with issue: https://developer.apple.com/forums/thread/682332 VITE_WS_BACKEND_URL=ws://127.0.0.1:7001 diff --git a/frontend/src/generateCode.ts b/frontend/src/generateCode.ts index 997bd45..77edf07 100644 --- a/frontend/src/generateCode.ts +++ b/frontend/src/generateCode.ts @@ -1,7 +1,7 @@ import toast from "react-hot-toast"; const WS_BACKEND_URL = - import.meta.env.VITE_WS_BACKEND_URL || "ws://127.0.0.1:7000"; + import.meta.env.VITE_WS_BACKEND_URL || "ws://127.0.0.1:7001"; const ERROR_MESSAGE = "Error generating code. Check the Developer Console for details. Feel free to open a Github ticket"; From 18330954e73e1efbb7d87297e29a529fe7622b23 Mon Sep 17 00:00:00 2001 From: Abi Raja Date: Sun, 19 Nov 2023 21:43:41 -0500 Subject: [PATCH 4/6] simplify README --- README.md | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 98ef12f..1365a69 100644 --- a/README.md +++ b/README.md @@ -8,9 +8,8 @@ See Examples section below for more demos. ## Updates -* Nov 16 - View code directly within the app -* Nov 15 - 🔥 You can now instruct the AI to update the code as you wish. Useful if the AI messed up some styles or missed a section. - +- Nov 16 - View code directly within the app +- Nov 15 - 🔥 You can now instruct the AI to update the code as you wish. Useful if the AI messed up some styles or missed a section. ## Getting Started @@ -40,23 +39,20 @@ If you prefer to run the backend on a different port, update VITE_WS_BACKEND_URL ## Docker +If you have Docker installed on your system, you can get started quickly with: + ```bash echo "OPENAI_API_KEY=sk-your-key" > .env docker-compose up -d --build ``` -If you want to change the backend port to something other than 7000 (default) - for example, 7001. Then: - -1. `echo "BACKEND_PORT=7001"` -2. `echo VITE_WS_BACKEND_URL=ws://127.0.0.1:7001 > frontend/.env.local` - -Port 7000 sometimes is used by Airplay if you are on a mac. This will solve the docker error "Ports are not available... address already in use" - Application will be up and running at http://localhost:5173 +Note that you can't develop the application with this setup as the file changes won't trigger a rebuild. + ## Feedback -If you have feature requests, bug reports or other feedback, open an issue or ping me on [Twitter](https://twitter.com/_abi_). +If you have feature requests, bug reports or other feedback, open an issue or ping me on [Twitter](https://twitter.com/_abi_). ## Examples @@ -64,7 +60,6 @@ Hacker News but it gets the colors wrong at first so we nudge it https://github.com/abi/screenshot-to-code/assets/23818/3fec0f77-44e8-4fb3-a769-ac7410315e5d - ## Hosted Version Hosted version coming soon on [Pico](https://picoapps.xyz?ref=github). From 9670a98fdb7b592881e89e7e5c538096be4d6f68 Mon Sep 17 00:00:00 2001 From: Abi Raja Date: Sun, 19 Nov 2023 21:47:27 -0500 Subject: [PATCH 5/6] minor edits --- README.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 343ad6d..8e1a2ae 100644 --- a/README.md +++ b/README.md @@ -45,16 +45,14 @@ If you prefer to run the backend on a different port, update VITE_WS_BACKEND_URL ## Docker -If you have Docker installed on your system, you can get started quickly with: +If you have Docker installed on your system, in the root directory, run: ```bash echo "OPENAI_API_KEY=sk-your-key" > .env docker-compose up -d --build ``` -Application will be up and running at http://localhost:5173 - -Note that you can't develop the application with this setup as the file changes won't trigger a rebuild. +The app will be up and running at http://localhost:5173. Note that you can't develop the application with this setup as the file changes won't trigger a rebuild. ## 🙋‍♂️ FAQs From fb9f4dad1ac60bb8fa8af61d737c5c6fa32285f8 Mon Sep 17 00:00:00 2001 From: Abi Raja Date: Sun, 19 Nov 2023 21:52:12 -0500 Subject: [PATCH 6/6] update README to use the right port --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 8e1a2ae..80964f8 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,7 @@ cd backend echo "OPENAI_API_KEY=sk-your-key" > .env poetry install poetry shell -poetry run uvicorn main:app --reload --port 7000 +poetry run uvicorn main:app --reload --port 7001 ``` Run the frontend: