Better docker deployment strategy

.dockerignore

@@ -0,0 +1,5 @@
+node_modules
+dist
+build
+.git
+frontend/node_modules

.gitignore

@@ -1,6 +1,7 @@
 .aider*
 
 # Project-related files
+webui
 
 # Run logs
 backend/run_logs/*
@@ -14,3 +15,6 @@ frontend/.env.local
 
 # Mac files
 .DS_Store
+
+# Editor files
+.vscode

Dockerfile

@@ -0,0 +1,33 @@
+FROM node:20-alpine as build-frontend
+WORKDIR /app
+RUN corepack enable
+
+COPY ./frontend /app/
+ENV VITE_IS_WEB_UI_MODE=true
+COPY ./frontend/yarn.lock ./frontend/package.json /app/
+RUN --mount=type=cache,id=yarn-cache,target=/root/.cache/yarn \
+  yarn install --frozen-lockfile
+COPY ./frontend /app/
+RUN yarn build
+
+
+FROM acidrain/python-poetry:3.12-alpine as build-backend
+RUN apk add binutils
+WORKDIR /app
+COPY ./backend/poetry.lock ./backend/pyproject.toml /app/
+RUN --mount=type=cache,id=poetry-cache,target=/root/.cache/pypoetry/cache \
+  --mount=type=cache,id=poetry-artifacts,target=/root/.cache/pypoetry/artifacts \
+  poetry install --no-interaction --no-ansi
+COPY ./backend /app/
+RUN poetry run pyinstaller --clean --onefile --name backend main.py
+
+
+FROM alpine:latest
+ENV FASTAPI_ENV=production
+ENV OPENAI_API_KEY=
+WORKDIR /app
+COPY --from=build-frontend /app/dist /app/webui
+COPY --from=build-backend /app/dist/backend /app/backend
+
+EXPOSE 8000
+CMD ["/app/backend"]

README.md

@@ -1,3 +1,7 @@
+This is a fork of [abi/screenshot-to-code](https://github.com/abi/screenshot-to-code)
+
+The goal of this fork is to improve the strategy for Docker build and run, and now you can run this project with less memory and image downloads, without the need for docker-compose.
+
 # screenshot-to-code
 
 This simple app converts a screenshot to code (HTML/Tailwind CSS, or React or Bootstrap or Vue). It uses GPT-4 Vision to generate the code and DALL-E 3 to generate similar-looking images. You can now also enter a URL to clone a live website!
@@ -68,14 +72,13 @@ MOCK=true poetry run uvicorn main:app --reload --port 7001
 
 ## Docker
 
-If you have Docker installed on your system, in the root directory, run:
+If you have Docker installed on your system, run:
 
 ```bash
-echo "OPENAI_API_KEY=sk-your-key" > .env
-docker-compose up -d --build
+docker run -d -p 8000:8000 -e OPENAI_API_KEY=sk-your-key --name screenshot-to-code wearzdk/screenshot-to-code:latest
 ```
 
-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.
+The app will be up and running at http://0.0.0.0:8000.
 
 ## 🙋‍♂️ FAQs
 

backend/main.py

@@ -1,13 +1,13 @@
 # Load environment variables first
+from fastapi.staticfiles import StaticFiles
+from routes import screenshot, generate_code, home, evals
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi import FastAPI
 from dotenv import load_dotenv
 
 load_dotenv()
 
 
-from fastapi import FastAPI
-from fastapi.middleware.cors import CORSMiddleware
-from routes import screenshot, generate_code, home, evals
-
 app = FastAPI(openapi_url=None, docs_url=None, redoc_url=None)
 
 # Configure CORS settings
@@ -24,3 +24,11 @@
 app.include_router(screenshot.router)
 app.include_router(home.router)
 app.include_router(evals.router)
+
+if home.IS_BUILD:
+    # if in build mode, serve webui folder as static files
+    app.mount("/", StaticFiles(directory="webui", html=True), name="static")
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=8000)