Skip to content
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
Closed

Proxy #55

kojuka opened this issue Dec 6, 2017 · 14 comments

Comments

@kojuka
Copy link

@kojuka 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
Copy link
Member

@devongovett 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
Copy link
Contributor

@tb 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
Copy link
Author

@kojuka kojuka commented Dec 12, 2017

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

@jylin
Copy link

@jylin 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
Copy link

@chasegiunta 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
Copy link

@samithaf 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
Copy link
Member

@albinotonnina 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
Copy link

@yiranlee 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
Copy link
Member

@albinotonnina 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
Copy link

@larrybolt 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
Copy link
Member

@albinotonnina albinotonnina commented Apr 23, 2018

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

@ThaddeusJiang
Copy link

@ThaddeusJiang ThaddeusJiang commented May 15, 2018

It would be a very useful feature for spa.

@l-hammer
Copy link

@l-hammer 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
Copy link

@JamesTheHacker 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.
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet