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.

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

Proxy #55

Closed
kojuka opened this Issue Dec 6, 2017 · 14 comments

Comments

Projects
None yet
@kojuka
Copy link

kojuka commented Dec 6, 2017

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

This comment has been minimized.

Copy link
Member

devongovett commented Dec 6, 2017

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

This comment has been minimized.

Copy link
Contributor

tb commented Dec 12, 2017

@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

This comment has been minimized.

Copy link
Author

kojuka commented Dec 12, 2017

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

@jylin

This comment has been minimized.

Copy link

jylin commented Dec 15, 2017

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

This comment has been minimized.

Copy link

chasegiunta commented Dec 17, 2017

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

This comment has been minimized.

Copy link

samithaf commented Dec 21, 2017

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

This comment has been minimized.

Copy link
Member

albinotonnina commented Jan 12, 2018

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

This comment has been minimized.

Copy link

yiranlee commented Jan 17, 2018

@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

This comment has been minimized.

Copy link
Member

albinotonnina commented Jan 27, 2018

@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

This comment has been minimized.

Copy link

larrybolt commented Mar 16, 2018

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

@albinotonnina

This comment has been minimized.

Copy link
Member

albinotonnina commented Apr 23, 2018

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

@ThaddeusJiang

This comment has been minimized.

Copy link

ThaddeusJiang commented May 15, 2018

It would be a very useful feature for spa.

@l-hammer

This comment has been minimized.

Copy link

l-hammer commented Jun 14, 2018

@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

This comment has been minimized.

Copy link

JamesTheHacker commented Jul 17, 2018

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.

@parcel-bundler parcel-bundler locked as resolved and limited conversation to collaborators Jul 17, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.