-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Add a Proxy to browsersync
If you have an API Server running on a different port, you may want to proxy requests from you application to your api.
You can do this by adding a middleware to browsersync. (Shortcut)
One way to do this is by installing the proxy-middleware.
npm install proxy-middleware --save-dev
Then open the file tools/config/project.config.ts.
At the top of the file you include the proxy-middleware by
const proxy = require('proxy-middleware');
As the default browsersync config is defined in tools/config/seed.config.ts we would overwrite it in our project specific settings (tools/config/project.config.ts):
So, you could simply copy the default config:
this.BROWSER_SYNC_CONFIG = {
middleware: [require('connect-history-api-fallback')({index: `${this.APP_BASE}index.html`})],
port: this.PORT,
startPath: this.APP_BASE,
server: {
baseDir: `${this.DIST_DIR}/empty/`,
routes: {
[`${this.APP_BASE}${this.APP_DEST}`]: this.APP_DEST,
[`${this.APP_BASE}node_modules`]: 'node_modules',
[`${this.APP_BASE.replace(/\/$/,'')}`]: this.APP_DEST
}
}
};```
and place it in the project config. But first, we need to change a few things here:
1. Move the top-level middleware property inside the server property.
2. Then, add the proxy as first middleware before the _connect-history-api-fallback_.
```javascript
browserSync({
port: PORT,
startPath: APP_BASE,
server: {
baseDir: baseDir,
middleware: [
proxy({
protocol: 'http:',
hostname: 'localhost',
port: 8080,
pathname: '/api',
route: '/api'
}),
require('connect-history-api-fallback')({index: `${APP_BASE}index.html`})
],
routes: routes
}
});
This configuration will proxy all requests starting with /api (route-property) to another server on localhost:8080/api.
This is the shortcut version to add a proxy to localhost:8080 for any requests on /api
npm install proxy-middleware --save-dev
replace tools/utils/seed/code_change_tools.ts with the gist here