Add proxy for API calls about react-slingshot

[vssathish]

I am doing proxy using proxy-middleware. Modified srcServer.js

// This file configures the development web server
// which supports hot reloading and synchronized testing.

// Require Browsersync along with webpack and middleware for it
import browserSync from 'browser-sync';
import webpack from 'webpack';
import webpackDevMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';
import url from 'url';
import proxy from 'proxy-middleware';
import webpackConfigBuilder from '../webpack.config';

const webpackConfig = webpackConfigBuilder('development');
const bundler = webpack(webpackConfig);

var proxyOptions = url.parse('http://myproxyserver.net);
proxyOptions.route = '/api';
// Run Browsersync and use middleware for Hot Module Replacement
browserSync({
server: {
baseDir: 'src',
middleware: [
webpackDevMiddleware(bundler, {
// Dev middleware can't access config, so we provide publicPath
publicPath: webpackConfig.output.publicPath,
// pretty colored output
stats: { colors: true },
// Set to false to display a list of each file that is being bundled.
noInfo: true
// for other settings see
// http://webpack.github.io/docs/webpack-dev-middleware.html
}),
// bundler should be the same as above
webpackHotMiddleware(bundler),
proxy(proxyOptions)
]
},
// no need to watch '.js' here, webpack will take care of it for us,
// including full page reloads if HMR won't work
files: [
'src/.html'
]
});

[coryhouse]

I'm reopening since I'd love to see a PR on this. :)

[kwelch]

Closing. Discussion further in the PR #93

[coryhouse]

@kwelch You're a man on a mission tonight! Love it! 💯

[kwelch]

I saw this tweet from @mjackson and got very inspired.

[coryhouse]

Great question. Can you point me to a working configuration example?

[prpatel]

@coryhouse I assume you're asking for an example in webpack-dev-server. Have a look at this file in one of my repos:
https://github.com/prpatel/react-workshop-day1/blob/master/Lab12/webpack.config.js

[coryhouse]

So to be clear, this is an alternative to enabling CORS on local APIs, right? I suspect it's possible to pull this off along with browser-sync, but I haven't had time to hunt for an example yet.

[prpatel]

Actually, it is more about a seamless development experience / setup than CORS. Allow me to elaborate. I'm running my Rails/Node/Java/Python/etc backend server and want to create a SPA using React. During development, I need to either do one of these things to make this work:

1. use ENV vars to set the base URL to my backend API server
2. use magic vars (let authUrl = "http://localhost:3000";) that are managed using (1) or some other method
3. Proxy API calls with some simple configuration through browsersync+webpack in this project's setup

IMO, (3) is not the easest, but is the most simple. From the research I've done into this, I think the answer may be to invert the browsersync+webpack setup:
https://www.npmjs.com/package/browser-sync-webpack-plugin
but I'm not a browersync expert, and haven't had time to dig into its guts to determine how this is possible - was hoping that someone here had already tackled this and had a quick answer.

[nohmar]

@prpatel did you find a solution for this? Mind sharing it here?

[prpatel]

The solution posted by @vssathish above works well.

[vssathish]

I am unable to push my branch. Do i need special permissions?

[coryhouse]

@vssathish You don't need any special permissions to submit a pull request.

[vssathish]

Submitted a PR.

#93

@vssathish in this sample does your '../webpack.config' look identical to the OP? I do not see a 'webpack.config' in the root directory of the project only the webpack.config.dev and webpack.config.prod

[vssathish]

@frankbaum the changes are only to srcServer.js

@vssathish I see your fork of the project - perhaps there was a change and new config files were added after you forked it - as there is not a webpack.config in the existing source there is a .dev and .prod version - thanks

[nickytonline]

@vssathish, I'm a new collaborator on the project and am just going through the issues. Just wondering if you have any blockers to submit your PR?