Parcel: Proxy

[kojuka]

Is there a way to define a proxy? In webpack we are doing something like this:

devServer: {
  proxy: {
   '/api*' :{
      target: 'http://localhost:3001/graphql',
      secure: false,
    },
}

More details about webpack's devserver proxy here.

[devongovett]

I don't really think this should be the responsibility of the bundler... Can you just enable CORS and hit localhost:3001 directly?

Alternatively, you could build your own small server with express and use parcel as a middleware.

let Bundler = require('parcel-bundler');
let express = require('express');

let bundler = new Bundler('entry.html');
let app = express();

// define proxy routes here

app.use(bundler.middleware());

[tb]

@devongovett I always use create-react-app proxy This allows me to use relative urls like /api/endpoint and /graphql. The same urls work then after deployment to production server.

[kojuka]

@tb Oh - thats exactly what I want. Thx for the tip!

[jylin]

It's not the responsibility of the bundler, but it would be a very useful feature for the dev server. If your server is not in NodeJS (and you don't want to enable CORS), then without this you have to use some kind of post-processing to replace "locaholhost:PORT" with something else when deploying to production. It's much nicer to be able to use relative links and have the dev server have a config to proxy to the appropriate backend endpoint.

[chasegiunta]

For the dev-server, I think this would be useful for non-spa sites as well (php applications, etc). Where you proxy the app (myphpsite.test), but watch the assets and/or templates directory for changes. Templates directory changes would trigger full reloads, while asset changes trigger HMR (in a perfect world)

[samithaf]

Hey @webular , you can probably use browser-sync and http-proxy-middleware to achieve your end goal and it's relatively easy to set it up. E.g.

```
import assign from 'lodash/assign';
import Bundler from 'parcel-bundler';
import serve from 'browser-sync';
import proxy from 'http-proxy-middleware';
import compress from 'compression';

const bundler = new Bundler('index.html');
serve({
port: process.env.PORT || 3000,
open: false,
server: { baseDir: 'dist', https: true },
middleware: [
proxy(${envConfig.endpoint}/api, assign({}, proxyConfig)),
proxy(${envConfig.endpoint}/auth, assign({}, proxyConfig)),
compress(),
bundler.middleware()
],
});
```

[albinotonnina]

An complete example with express

const proxy = require('http-proxy-middleware')
const Bundler = require('parcel-bundler')
const express = require('express')

let bundler = new Bundler('src/index.html')
let app = express()

app.use(
  '/api',
  proxy({
    target: 'http://localhost:3000'
  })
)

app.use(bundler.middleware())

app.listen(Number(process.env.PORT || 1234))

[yiranlee]

@albinotonnina oh~good example, but how can i use parcel no cache in this example ? like this : node example.js --no-cache or set some parameters in 'app.use(bundler.middleware())'

[albinotonnina]

@yiranlee

const proxy = require('http-proxy-middleware')
const Bundler = require('parcel-bundler')
const express = require('express')

const bundler = new Bundler('src/index.html', {
  cache: false
})

const app = express()

app.use(
  '/api',
  proxy({
    target: 'http://localhost:3000'
  })
)

app.use(bundler.middleware())

app.listen(Number(process.env.PORT || 1234))

[larrybolt]

For those still needing more help, the socketio example chat app altered to bundle the client-side files:
https://github.com/larrybolt/chat-example/commit/aaeba779d8d74860dc688a5c2179aad6fec73800

[albinotonnina]

Hi @NullVoxPopuli,
Don't know really.
To understand: http://${process.env.API_HOST} prints http://localhost:9091 ?

[ThaddeusJiang]

It would be a very useful feature for spa.

[l-hammer]

@albinotonnina nice example~ but i want to set --open parameters in new Bundle('src/index.html')? like this:

const bundler = new Bundler(proxypath, {
  open: true,
})

But this has no effect，how to do it? Thx~

[JamesTheHacker]

For some reason Parcel's dev server automatically responds with the header Access-Control-Allow-Origin : *. Is this normal behaviour? If so surely it solves this problem? I've tested tonight and I get no CORS warnings.