Merge pull request abi#7 from Jonathan-Adly/dockerfile

Add dockerfiler & docker compose

Author: abi

.gitignore

@@ -2,3 +2,5 @@
 
 # Run logs
 backend/run_logs/*
+
+.env

README.md

@@ -15,7 +15,7 @@ See the [Examples](#examples) section below for more demos.
 - Nov 19 - Support for dark/light code editor theme - thanks https://github.com/kachbit
 - Nov 16 - Added a setting to disable DALL-E image generation if you don't need that
 - Nov 16 - View code directly within the app
-- Nov 15 - 🔥 You can now instruct the AI to update the code as you wish.  It is helpful if the AI messed up some styles or missed a section.
+- Nov 15 - 🔥 You can now instruct the AI to update the code as you wish. It is helpful if the AI messed up some styles or missed a section.
 
 ## 🛠 Getting Started
 
@@ -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:
@@ -43,6 +43,17 @@ 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
+
+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
+```
+
+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
 
 - **I'm running into an error when setting up the backend. How can I fix it?** [Try this](https://github.com/abi/screenshot-to-code/issues/3#issuecomment-1814777959). If that still doesn't work, open an issue.

backend/Dockerfile

@@ -0,0 +1,21 @@
+FROM python:3.12-slim-bullseye
+
+ENV POETRY_VERSION 1.4.1
+
+# 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
+
+# Copy the current directory contents into the container at /app
+COPY ./ /app/

docker-compose.yml

@@ -0,0 +1,27 @@
+version: '3.9'
+
+services:
+  backend:
+    build: 
+      context: ./backend
+      dockerfile: Dockerfile
+    
+    env_file:
+      - .env
+    
+    # or 
+    # environment:
+      #- 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:
+      - "${BACKEND_PORT:-7001}:${BACKEND_PORT:-7001}"
+
+    command: poetry run uvicorn main:app --host 0.0.0.0 --port ${BACKEND_PORT:-7001}
+  
+  frontend:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile
+    ports:
+      - "5173:5173"

frontend/.env.example

@@ -0,0 +1 @@
+VITE_WS_BACKEND_URL=ws://127.0.0.1:7001

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"]

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 issue";