@open-xchange/vite-plugin-proxy

A OX App Suite specific proxy for developing against multiple vite-dev servers

Usage no npm install needed!

<script type="module">
  import openXchangeVitePluginProxy from 'https://cdn.skypack.dev/@open-xchange/vite-plugin-proxy';
</script>

README

@open-xchange/vite-plugin-proxy

An OX App Suite specific proxy for development purposes. Can connect multiple vite-dev-servers with @open-xchange/vite-plugin-ox-manifests plugins.

Install

npm install "@open-xchange/vite-plugin-proxy"
yarn add "@open-xchange/vite-plugin-proxy"

Options

You can provide the following options to the plugin:

  • proxy <object> An object with reverse proxy configurations, where the key need to match the beginning of the path. Usually used to forward /api requests to a backend.
  • proxy[key] <string|regexp> The key defines which paths should be proxied. Keys starting with ^ will be treated as regular expressions.
  • proxy[key].target <string> The target where to forward these requests to.
  • proxy[key].ws <boolean> If ws is true, this will only listen to upgrade events for a websocket. Default: false
  • proxy[key].rewrite <function> A function that receives the path as parameter and returns the new path to proxy.
  • proxy[key].prependPath <string> A string that is prepended for every request. If prependPath and rewrite are present, the key is first prepended and then rewrite is called.
  • proxy[key].changeOrigin <boolean> Changes the origin of the host header to the target URL. Default: false
  • proxy[key].secure <boolean> Set to false to allow self-signed certificates. Default: true
  • frontendURIs <string[]> An array of frontend URIs which can either point to other vite-dev-servers or production builds. The entries with lower index have higher priority and overwrite files and manifests from others. This array will automatically contain the current workspace with the highest priority. FrontendURIS will be deprecated for frontends in the future.
  • frontends <object[]> An array of objects with frontends to proxy to. A frontend is defined as a server with UI-files and a /manifest endpoint. Every vite-dev server with the @open-xchange/vite-plugin-manifest plugin fullfills this requirement. This plugin will always add the current vite-dev server as the first entry into this array such that serving files from the local machine has always the highest priority.
  • frontends[i].target <string> The target, where to forward requests to.
  • frontends[i].path <string|regexp> Optional parameter which will prioritize this frontend for the given path. Is like a reverse proxy configuration for frontends. To indicate a regexp, start the string with a ^.
  • frontends[i].secure <boolean> Set to false to allow self-signed certificates. Default: true
  • httpProxy <object> An object for a http proxy to be ususally used with tools like Switchy Omega
  • httpProxy.target <string> The domain which is handled by the vite proxy. You need to make sure, that the proxy configuration is set accordingly.
  • httpProxy.port <string> The port on which the httpProxy server will listen for requests. Default 8080
  • logLevel <string> One of fatal, error, warn, info, debug, trace, silent. Default: warn

Example configuration

vitePluginProxy({
  proxy: {
    '/api': {
      target: 'https://path.to.my.middleware/',
      prependPath: '/appsuite',
      rewrite: path => path.replace(/\/v1\//, '/v2/'),
      changeOrigin: true
    },
    '/socket.io/appsuite': {
      target: `wss://path.to.my.middleware/socket.io/appsuite`,
      ws: true,
      changeOrigin: true,
      secure: false
    }
  },
  frontends: [{
    target: 'https://localhost:3000',
    path: '/io.ox/guidedtours',
    secure: false
  }, {
    target: 'https://localhost:3001',
    path: '/io.ox/customplugin',
  }],
  logLevel: 'info'
}),