Proxy about parcel HOT 14 CLOSED

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());

from parcel.

@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))

from parcel.

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()
   ],
 }); 

from parcel.

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))

from parcel.

It would be a very useful feature for spa.

from parcel.

@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.

from parcel.

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

from parcel.

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.

from parcel.

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)

from parcel.

@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())'

from parcel.

For those still needing more help, the socketio example chat app altered to bundle the client-side files:
larrybolt/chat-example@aaeba77

from parcel.

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

from parcel.

@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~

from parcel.

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.

from parcel.