8000 Expressjs proxy feature partly broken when used from slidev · Issue #493 · slidevjs/slidev · GitHub
[go: up one dir, main page]
Skip to content

Expressjs proxy feature partly broken when used from slidev #493

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
twitwi opened this issue Feb 21, 2022 · 3 comments
Closed

Expressjs proxy feature partly broken when used from slidev #493

twitwi opened this issue Feb 21, 2022 · 3 comments
Labels
stale

Comments

@twitwi
Copy link
Contributor
twitwi commented Feb 21, 2022 •
edited
Loading

When used from slidev, the http-proxy used by express-js drops POST requests that contain a body.

Context:
I'm doing live integration with a jupyter notebook. Slides initially use content that is pre-rendered in the notebook (and that could be exported from it) but are also dynamic and allow to rerun some code etc using a running jupyter notebook.
To limit the development effort, I embed the notebook in an iframe.
This iframe needs to be loaded from the same origin to be fully hackable, so I explored the proxy feature of slidev (that uses vite that uses node-http-proxy in expressjs).

Current state of understanding
I've been exploring using slidev vite.config.ts for some time this afternoon but with only partial success.
I finally realized that serving directly with vite works.
More precisely, through slidev, I can get most requests to be proxied but the POST requests with a body are dropped (never sent to the backend/jupyter server, checked using wireshark).
Using directly vite, with the same config, works for all requests.
My understanding is that it comes from the use of middlewares incompatible with node-http-proxy, the best resources I could find are
http-party/node-http-proxy#530 (which points to)
http-party/node-http-proxy#180

To Reproduce
Steps to reproduce the behavior (details below):

  1. Start a jupyter notebook
  2. In a slidev project embed it using an iframe
  3. View the slides
  4. The notebook is displayed (proxy working) but not interactive (initial POST request is dumped)
  5. Build the slides
  6. Serve them with vite
  7. View the slides
  8. The notebook is fully operational

Command to start the notebook:

jupyter notebook --NotebookApp.base_url=/nb4slidev

Iframe embedding

<iframe class="iframenb" src="/nb4slidev/notebooks/simple1d.ipynb"></iframe>

Vite config:

import { defineConfig } from 'vite'

export default defineConfig({
    publicDir: 'dist', // to serve the "slidev build" result
    server: { // exact same content for the slidev config
      proxy: {
        '/nb4slidev': {
          target: 'http://localhost:8888',
          ws: true,
        },
      },
    },
})

Desktop (please complete the following information):

  • OS: Linux Manjaro
  • Browser: tested in both Firefox 96 and Chromium 97
  • Slidev version: 0.27.16
  • Vite version: vite/2.5.3 linux-x64 node-v16.6.2
@twitwi
Copy link
Contributor Author
twitwi commented Feb 21, 2022

NB: I had tried use a "bypass" https://github.com/vitejs/vite/blob/5a111cedf31f579e3b8c8af5c4442d2e0cd5aa12/packages/vite/src/node/server/middlewares/proxy.ts#L91
but it is not called for the failing requests which fail before logging connect:dispatcher viteTimeMiddleware : /nb4slidev/...

@twitwi
Copy link
Contributor Author
twitwi commented Feb 22, 2022

As a workaround, it works with 3 servers:

  • the backend/notebook server (on port 8888)
  • the slidev pnpm run dev server (on port 3030)
  • a vite proxy that (only) proxies to both, with the following config
// file: vite-forkproxy-config.ts

// run with: vite --config vite-forkproxy-config.ts
import { defineConfig } from 'vite'

export default defineConfig({
    publicDir: 'dist', // to serve the "slidev build" result
    server: {
      port: 3333,
      proxy: {
        '/nb4slidev': {
          target: 'http://localhost:8888',
          ws: true,
        },
        '^.*': {
          target: 'http://localhost:3030',
          ws: true,
        },
      },
    },
})

@stale
Copy link
stale bot commented Sep 14, 2022

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

@stale stale bot added the stale label Sep 14, 2022
@stale stale bot closed this as completed Sep 21, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
stale
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@twitwi
0