Add support for docker

Dockerfile

@@ -0,0 +1,32 @@
+FROM node:20.9.0-alpine
+
+RUN apk add --update supervisor
+COPY supervisord.conf /etc/supervisor/conf.d/supervisord.conf
+
+WORKDIR /app/server
+
+COPY ./server/package*.json ./
+
+RUN npm install
+
+COPY ./server .
+
+# Unzip the icons
+RUN unzip library/icons/lucide/vectordb/index.zip
+
+COPY ./webapps-starters /app/webapp
+WORKDIR /app/webapp/react/shadcn
+RUN npm i
+
+WORKDIR /app/webapp/react/nextui
+RUN npm i
+
+WORKDIR /app/webapp/react/flowbite
+RUN npm i
+
+WORKDIR /app/server
+# Expose port 3000 for the server
+EXPOSE 3000
+ENV HOSTNAME 0.0.0.0
+
+CMD ["/usr/bin/supervisord", "-n", "-c", "/etc/supervisor/conf.d/supervisord.conf"]

README.md

@@ -87,6 +87,18 @@ To do so :
 
 ---
 
+**Via Docker** - you can also clone this repo and run via docker (using react as a framework). This will run both server and UI in the same container.
+
+To do so:
+* clone and navigate to this repo
+* Build the docker image `docker build -f Dockerfile . -t openv0:latest`
+* Update the `OPENAI_API_KEY` variable in `docker-compose.yaml` with your OAI key
+* Choose which webapp starter by updating the `WEBAPP_ROOT` variable in `docker-compose.yaml`
+* Run docker compose: `docker-compose up openv0`
+* UI should now be accesible at http://localhost:5173
+
+
+
 # Try openv0
 
 You can try openv0 (using React as a framework) with minimal configuration below

docker-compose.yaml

@@ -0,0 +1,14 @@
+version: '3'
+services:
+  openv0:
+    image: openv0:latest
+    ports:            
+      - "5173:5173"
+    environment:
+      - OPENAI_API_KEY=
+      - OPENAI_MODEL=gpt-4
+      - PASS__CONTEXT__COMPONENTS_LIBRARY_EXAMPLES__TOKEN_LIMIT=600
+      - OPENV0__COLLECT_UIRAY=0
+      - OPENV0__API=https://api.openv0.com
+      - API__GENERATE_ATTEMPTS = 1
+      - WEBAPP_ROOT=/app/webapp/react/shadcn

server/api.js

@@ -10,6 +10,7 @@ const port = 3000;
 
 app.use(cors());
 app.use(express.json());
+console.log(`WEBAPP_ROOT=${process.env.WEBAPP_ROOT}`);
 
 const sqlite3 = require("sqlite3");
 const db = new sqlite3.Database("openv0.sqlite", (err) => {

supervisord.conf

@@ -0,0 +1,16 @@
+[supervisord]
+nodaemon=true
+
+[program:server]
+command=node api.js
+directory=/app/server
+autostart=true
+autorestart=true
+stdout_logfile=/app/server/server.log
+
+[program:webapp]
+command=npm run dev -- --host
+directory=%(ENV_WEBAPP_ROOT)s
+autostart=true
+autorestart=true
+stdout_logfile=/app/webapp/webapp.log

webapps-starters/react/flowbite/src/views/browse.tsx

@@ -15,10 +15,11 @@ export default function Browse() {
 	const [openv0ComponentsList, setOpenv0ComponentsList] = useState([]);
 
 	const svgStyle = { fill: '#777' };
-
+	const SERVER_URL = import.meta.env.VITE_SERVER_URL || "/api";
+
 	async function fetchComponents(){
 		const response = await fetch(
-			`http://localhost:3000/components/list?framework=react&components=flowbite&icons=lucide`
+			`${SERVER_URL}/components/list?framework=react&components=flowbite&icons=lucide`
 		);
 		const data = await response.json();
 		console.log(data)
@@ -69,7 +70,7 @@ export default function Browse() {
 			description: generateMode === `description` ? userInputDescription : userInputJson,
 		})
 		const response = await fetch(
-			`http://localhost:3000/components/new/${generateMode}` ,
+			`${SERVER_URL}/components/new/${generateMode}` ,
 			{
 				method: "POST",
 				headers: {

webapps-starters/react/flowbite/src/views/view.tsx

@@ -19,14 +19,15 @@ function App() {
 	const [loadedComponents, setLoadedComponents] = useState([]);
 
 	const svgStyle = { fill: '#777' };
+	const SERVER_URL = import.meta.env.VITE_SERVER_URL || "/api";
 
 	async function shareComponent() {
     if (processing) return;
     if (!userApiKey) return;
     setProcessing(true)
 
     const response = await fetch(
-      `http://localhost:3000/components/share` ,
+      `${SERVER_URL}/components/share` ,
       {
         method: "POST",
         headers: {
@@ -59,7 +60,7 @@ function App() {
 		setComponentVersions([...[]])
 		setLoadedComponents([...[]])
 		const response = await fetch(
-			`http://localhost:3000/components/get?framework=react&components=flowbite&icons=lucide&name=${name}`
+			`${SERVER_URL}/components/get?framework=react&components=flowbite&icons=lucide&name=${name}`
 		);
 		const data = await response.json();
 		console.log(data)
@@ -104,7 +105,7 @@ function App() {
 		setComponentStream('')
 		let received_stream = ''
 		const response = await fetch(
-      `http://localhost:3000/components/iterate/description` ,
+      `${SERVER_URL}/components/iterate/description` ,
       {
         method: "POST",
         headers: {

webapps-starters/react/flowbite/vite.config.ts

@@ -1,7 +1,19 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+const SERVER_HOST = process.env.SERVER_HOST || 'http://localhost:3000'
+console.log('SERVER_HOST', SERVER_HOST)
+
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  server: {
+    proxy: {
+      '/api': {
+        target: `${SERVER_HOST}`,
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, '')
+      }
+    }
+  },
 })

webapps-starters/react/nextui/src/views/browse.tsx

@@ -15,10 +15,11 @@ export default function Browse() {
 	const [openv0ComponentsList, setOpenv0ComponentsList] = useState([]);
 
 	const svgStyle = { fill: '#777' };
+	const SERVER_URL = import.meta.env.VITE_SERVER_URL || "/api";
 
 	async function fetchComponents(){
 		const response = await fetch(
-			`http://localhost:3000/components/list?framework=react&components=nextui&icons=lucide`
+			`${SERVER_URL}/components/list?framework=react&components=nextui&icons=lucide`
 		);
 		const data = await response.json();
 		console.log(data)
@@ -69,7 +70,7 @@ export default function Browse() {
 			description: generateMode === `description` ? userInputDescription : userInputJson,
 		})
 		const response = await fetch(
-			`http://localhost:3000/components/new/${generateMode}` ,
+			`${SERVER_URL}/components/new/${generateMode}` ,
 			{
 				method: "POST",
 				headers: {

webapps-starters/react/nextui/src/views/view.tsx

@@ -19,14 +19,15 @@ function App() {
 	const [loadedComponents, setLoadedComponents] = useState([]);
 
 	const svgStyle = { fill: '#777' };
+	const SERVER_URL = import.meta.env.VITE_SERVER_URL || "/api";
 
 	async function shareComponent() {
     if (processing) return;
     if (!userApiKey) return;
     setProcessing(true)
 
     const response = await fetch(
-      `http://localhost:3000/components/share` ,
+      `${SERVER_URL}/components/share` ,
       {
         method: "POST",
         headers: {
@@ -59,7 +60,7 @@ function App() {
 		setComponentVersions([...[]])
 		setLoadedComponents([...[]])
 		const response = await fetch(
-			`http://localhost:3000/components/get?framework=react&components=nextui&icons=lucide&name=${name}`
+			`${SERVER_URL}/components/get?framework=react&components=nextui&icons=lucide&name=${name}`
 		);
 		const data = await response.json();
 		console.log(data)
@@ -104,7 +105,7 @@ function App() {
 		setComponentStream('')
 		let received_stream = ''
 		const response = await fetch(
-      `http://localhost:3000/components/iterate/description` ,
+      `${SERVER_URL}/components/iterate/description` ,
       {
         method: "POST",
         headers: {

webapps-starters/react/nextui/vite.config.ts

@@ -1,7 +1,18 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+const SERVER_HOST = process.env.SERVER_HOST || 'http://localhost:3000'
+console.log('SERVER_HOST', SERVER_HOST)
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  server: {
+    proxy: {
+      '/api': {
+        target: `${SERVER_HOST}`,
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, '')
+      }
+    }
+  },
 })

webapps-starters/react/shadcn/src/components/views/component-view.tsx

@@ -22,9 +22,8 @@ export default function ComponentView() {
   const location = useLocation();
   const searchParams = new URLSearchParams(location.search);
   const componentId = searchParams.get('componentId')
-
-
-
+  const SERVER_URL = import.meta.env.VITE_SERVER_URL || "/api";
+
   const handleInputChange = (e) => {
     setUserInput(e.target.value);
   };
@@ -39,7 +38,7 @@ export default function ComponentView() {
 
     try {
       // Make the API POST request with the user input
-      const response = await fetch('http://localhost:3000/component/iterate', {
+      const response = await fetch(`${SERVER_URL}/component/iterate`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
@@ -97,7 +96,7 @@ export default function ComponentView() {
           setSelectedComponentIndex( components.length-1 )
           console.log(selectedComponentIndex)
         }
-        fetch(`http://localhost:3000/component/ping/?from=View Component&component=${componentId}`);
+        fetch(`${SERVER_URL}/component/ping/?from=View Component&component=${componentId}`);
       });
 
 

webapps-starters/react/shadcn/src/views/browse.tsx

@@ -15,10 +15,11 @@ export default function Browse() {
 	const [openv0ComponentsList, setOpenv0ComponentsList] = useState([]);
 
 	const svgStyle = { fill: '#777' };
-
+	const SERVER_URL = import.meta.env.VITE_SERVER_URL || "/api";
+
 	async function fetchComponents(){
 		const response = await fetch(
-			`http://localhost:3000/components/list?framework=react&components=shadcn&icons=lucide`
+			`${SERVER_URL}/components/list?framework=react&components=shadcn&icons=lucide`
 		);
 		const data = await response.json();
 		console.log(data)
@@ -69,7 +70,7 @@ export default function Browse() {
 			description: generateMode === `description` ? userInputDescription : userInputJson,
 		})
 		const response = await fetch(
-			`http://localhost:3000/components/new/${generateMode}` ,
+			`${SERVER_URL}/components/new/${generateMode}` ,
 			{
 				method: "POST",
 				headers: {

webapps-starters/react/shadcn/src/views/view.tsx

@@ -19,14 +19,14 @@ function App() {
 	const [loadedComponents, setLoadedComponents] = useState([]);
 
 	const svgStyle = { fill: '#777' };
-
+	const SERVER_URL = import.meta.env.VITE_SERVER_URL || "/api";
 	async function shareComponent() {
     if (processing) return;
     if (!userApiKey) return;
     setProcessing(true)
 
     const response = await fetch(
-      `http://localhost:3000/components/share` ,
+      `${SERVER_URL}/components/share` ,
       {
         method: "POST",
         headers: {
@@ -59,7 +59,7 @@ function App() {
 		setComponentVersions([...[]])
 		setLoadedComponents([...[]])
 		const response = await fetch(
-			`http://localhost:3000/components/get?framework=react&components=shadcn&icons=lucide&name=${name}`
+			`${SERVER_URL}/components/get?framework=react&components=shadcn&icons=lucide&name=${name}`
 		);
 		const data = await response.json();
 		console.log(data)
@@ -104,7 +104,7 @@ function App() {
 		setComponentStream('')
 		let received_stream = ''
 		const response = await fetch(
-      `http://localhost:3000/components/iterate/description` ,
+      `${SERVER_URL}/components/iterate/description` ,
       {
         method: "POST",
         headers: {

webapps-starters/react/shadcn/vite.config.ts

@@ -1,6 +1,8 @@
 import path from "path"
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+const SERVER_HOST = process.env.SERVER_HOST || 'http://localhost:3000'
+console.log('SERVER_HOST', SERVER_HOST)
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -10,4 +12,13 @@ export default defineConfig({
       '@': path.resolve(__dirname, './src'),
     },
   },
+  server: {
+    proxy: {
+      '/api': {
+        target: `${SERVER_HOST}`,
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, '')
+      }
+    }
+  },
 });