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 e70a340..80964f8 100644 --- a/README.md +++ b/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. diff --git a/backend/Dockerfile b/backend/Dockerfile new file mode 100644 index 0000000..c520517 --- /dev/null +++ b/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/ diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 0000000..3b3bcec --- /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=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" diff --git a/frontend/.env.example b/frontend/.env.example new file mode 100644 index 0000000..c29bfd3 --- /dev/null +++ b/frontend/.env.example @@ -0,0 +1 @@ +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 diff --git a/frontend/src/generateCode.ts b/frontend/src/generateCode.ts index c3e9218..3b0f3d6 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 issue";