feat: add nginx so we can bypass the cors error

.github/dependabot.yaml

@@ -0,0 +1,13 @@
+version: 2
+updates:
+
+  # Maintain dependencies for GitHub Actions
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "weekly"

.github/workflows/image.yml

@@ -56,6 +56,7 @@ jobs:
           registry: quay.io
           username: ${{ secrets.QUAY_USERNAME }}
           password: ${{ secrets.QUAY_PASSWORD }}
+
       - name: Build
         if: github.event_name != 'pull_request'
         uses: docker/build-push-action@v4
@@ -66,6 +67,7 @@ jobs:
           platforms: linux/amd64,linux/arm64
           push: true
           tags: ${{ steps.prep.outputs.tags }}
+
       - name: Build PRs
         if: github.event_name == 'pull_request'
         uses: docker/build-push-action@v4

Dockerfile

@@ -1,21 +1,8 @@
 # First stage
-FROM node:18-alpine AS build
-ENV NODE_ENV=production
-RUN mkdir -p /srv/app
-WORKDIR /srv/app
-COPY package*.json ./
-RUN npm ci --omit=dev
-COPY src ./src
-COPY public ./public
-COPY entrypoint.sh ./
-
-# Second stage
-FROM node:18-alpine as final
-RUN mkdir -p /srv/app
-WORKDIR /srv/app
-COPY --from=build /srv/app/ ./
-RUN chown -R node /srv/app
+FROM node:lts-alpine
+WORKDIR /app
+COPY . .
+RUN npm install
 RUN npm install -g serve
 EXPOSE 3000
-USER node
 CMD ["/bin/sh", "./entrypoint.sh"]

README.md

@@ -9,8 +9,16 @@ To use the frontend WebUI, follow the steps below:
 ### Docker method (Preferred)
 Move the sample-docker-compose.yaml to docker-compose.yaml in the LocalAI directory ( Assuming you have already set it up) , and run:
 ```bash
-docker-compose up -d --build
+# build locally
+docker compose -f ./docker-compose.build.yaml up --build
+
+# run from quay
+docker compose -f ./docker-compose.run.yaml up
 ```
+
+*IMPORTANT:* It creates a nginx container. Edit the nginx.conf file to point to the LocalAI backend API, and you should be good to go! It allows to bypass the cors errors.
+
+
 That should take care of it, you can use a reverse proxy like Apache to access it from wherever you want!
 Currently, both arm64 and x86 systems are supported
 

docker-compose.build.yaml

@@ -0,0 +1,19 @@
+version: '3.6'
+
+services:
+
+  frontend:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    environment:
+      - REACT_APP_API_HOST=http://localhost:3001
+    ports:
+      - 3000:3000
+
+  nginx: # redirects elsewhere
+    image: nginx:latest
+    ports:
+      - 3001:80
+    volumes:
+      - ./nginx.conf:/etc/nginx/nginx.conf:ro

docker-compose.run.yaml

@@ -0,0 +1,17 @@
+version: '3.6'
+
+services:
+
+  frontend:
+    image: quay.io/go-skynet/localai-frontend:master
+    environment:
+      - REACT_APP_API_HOST=http://192.168.1.11:8080 # localhost or any other ip in the network
+    ports:
+      - 3000:3000
+
+  nginx: # redirects elsewhere
+    image: nginx:latest
+    ports:
+      - 3001:80
+    volumes:
+      - ./nginx.conf:/etc/nginx/nginx.conf:ro

entrypoint.sh

@@ -1,10 +1,4 @@
 #!/bin/sh
 
-if [ -z "$API_HOST" ]
-then
-    API_HOST='http://localhost:8080'
-fi
-
-echo "REACT_APP_API_HOST=$API_HOST" >> ./.env
 npm run build
 exec serve -s ./build

nginx.conf

@@ -0,0 +1,51 @@
+# nginx.conf
+
+user  nginx;
+worker_processes  auto;
+
+events {
+    worker_connections  1024;
+}
+
+http {
+    include       /etc/nginx/mime.types;
+    default_type  application/octet-stream;
+
+    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
+                      '$status $body_bytes_sent "$http_referer" '
+                      '"$http_user_agent" "$http_x_forwarded_for"';
+
+    access_log  /var/log/nginx/access.log  main;
+    error_log   /var/log/nginx/error.log  error;
+
+    sendfile        on;
+    keepalive_timeout  65;
+
+    server {
+        # Listen on port 80 in nginx
+        listen 80;
+
+        location / {
+            # Proxy pass the requests to your backend server
+            proxy_pass http://192.168.1.11:8080;
+
+            # Add CORS headers
+            add_header 'Access-Control-Allow-Origin' '*';
+            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
+            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
+            add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
+
+            # Handle preflight requests
+            if ($request_method = 'OPTIONS') {
+                add_header 'Access-Control-Allow-Origin' '*';
+                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
+                add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
+                add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
+                add_header 'Access-Control-Max-Age' 1728000;
+                add_header 'Content-Type' 'text/plain; charset=utf-8';
+                add_header 'Content-Length' 0;
+                return 204;
+            }
+        }
+    }
+}