feat: adds web-standalone for running restfox without needing electro…

…n or the browser extensions to bypass cors and non https requests - this works by proxying all requests through the server (closes #18)

README.md

@@ -43,6 +43,11 @@ npm run build
 npm run build-desktop
 ```
 
+### Web Standalone distribution and development
+```
+npm run build-web-standalone
+```
+
 ## electron
 
 ### To upgrade electron to latest version
@@ -104,3 +109,16 @@ npm run dev
 ```
 npm run build
 ```
+
+## Using web-standalone
+```
+git clone https://github.com/flawiddsouza/Restfox
+cd packages/ui
+npm i
+npm run build-web-standalone
+cd ../web-standalone
+npm i
+npm start
+```
+
+By default npm start will run Restfox at port 4004. You can override the port by passing port like so `PORT=5040 npm start`.

packages/ui/package.json

@@ -5,6 +5,7 @@
         "dev": "vite",
         "build": "vite build",
         "build-desktop": "vite build --mode desktop",
+        "build-web-standalone": "vite build --mode web-standalone",
         "serve": "vite preview"
     },
     "dependencies": {

packages/ui/src/App.vue

@@ -223,7 +223,7 @@ export default {
         this.$store.dispatch('loadPlugins')
         await this.$store.dispatch('loadWorkspaces')
 
-        if(import.meta.env.MODE === 'desktop') {
+        if(import.meta.env.MODE === 'desktop' || import.meta.env.MODE === 'web-standalone') {
             this.$store.state.flags.isBrowser = false
         }
     },

packages/ui/src/helpers.ts

@@ -127,6 +127,38 @@ export async function fetchWrapper(url, method, headers, body, abortControllerSi
         })
     }
 
+    if(import.meta.env.MODE === 'web-standalone') {
+        const proxyHeaders = {
+            'x-proxy-req-url': url,
+            'x-proxy-req-method': method
+        }
+
+        Object.keys(headers).forEach(header => {
+            proxyHeaders[`x-proxy-req-header-${header}`] = headers[header]
+        })
+
+        const response = await fetch('/proxy', {
+            method: 'POST',
+            headers: proxyHeaders,
+            body: method !== 'GET' ? body : undefined,
+            signal: abortControllerSignal
+        })
+
+        const responseBody = await response.json()
+
+        return new Promise((resolve, reject) => {
+            if(responseBody.event === 'response') {
+                responseBody.eventData.buffer = new Uint8Array(responseBody.eventData.buffer).buffer
+                resolve(responseBody.eventData)
+            }
+
+            if(responseBody.event === 'responseError') {
+                responseBody.eventData = new Error(responseBody.eventData)
+                reject(responseBody.eventData)
+            }
+        })
+    }
+
     const startTime = new Date()
 
     const response = await fetch(url, {

packages/ui/vite.config.js

@@ -70,5 +70,16 @@ export default defineConfig(({ mode }) => {
         )
     }
 
+    if(mode === 'web-standalone') {
+        config.plugins.push(
+            copy({
+                targets: [
+                    { src: 'dist/*', dest: '../web-standalone/public' },
+                ],
+                hook: 'buildEnd'
+            })
+        )
+    }
+
     return config
 })

packages/web-standalone/.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+public/

packages/web-standalone/app.js

@@ -0,0 +1,66 @@
+import express from 'express'
+import fetch from 'node-fetch'
+
+const app = express()
+
+const port = process.env.PORT || 4004
+
+app.use(express.static('public'))
+
+app.post('/proxy', async(req, res) => {
+    const url = req.headers['x-proxy-req-url']
+    const method = req.headers['x-proxy-req-method']
+    const headers = {}
+    const body = req.body
+
+    Object.keys(req.headers).forEach(header => {
+        if(header.startsWith('x-proxy-req-header-')) {
+            headers[header.replace('x-proxy-req-header-', '')] = req.headers[header]
+        }
+    })
+
+    try {
+        const startTime = new Date()
+
+        const response = await fetch(url, {
+            method,
+            headers,
+            body: method !== 'GET' ? body : undefined
+        })
+
+        const endTime = new Date()
+
+        const status = response.status
+        const statusText = response.statusText
+        const responseHeaders = [...response.headers.entries()]
+
+        const responseBlob = await response.blob()
+        const mimeType = responseBlob.type
+        const buffer = await responseBlob.arrayBuffer()
+
+        const timeTaken = endTime - startTime
+
+        const responseToSend = {
+            status,
+            statusText,
+            headers: responseHeaders,
+            mimeType,
+            buffer: Array.from(new Uint8Array(buffer)),
+            timeTaken
+        }
+
+        res.send({
+            event: 'response',
+            eventData: responseToSend
+        })
+    } catch(e) {
+        res.send({
+            event: 'responseError',
+            eventData: e.message
+        })
+    }
+})
+
+app.listen(port, () => {
+    console.log(`Restfox running on port http://localhost:${port}`)
+})